UI/UX Skills Lab · 2026 · 10 Techniques Live

TEN LIVING SKILLS

Every section IS the technique — not a description of it. Liquid Glass, WebGL, Bento Grid, Clay Morphism, and six more, all live.

Explore ↓ See all 10
SCROLL
03 · Bento Grid + 01 · Liquid Glass

Two skills,
one layout

Liquid Glass

backdrop-filter: blur + saturate

The card itself is the demo. Background bleeds through with blur(20px) saturate(160%). Hover to intensify the effect.

10 live techniques on this page
02 · Functional Motion

Animation with intent — scroll to §Motion

07 · WebGL 3D

Live Three.js render

No GIF. Real-time WebGL in a grid cell.

06 · Bold Type
Ag
08 · Dark Luxury

Radial gradients layered over #0a0a0f. Semantic depth.

Bento Grid

grid-column: span 2 · grid-row: span 2 — the grid IS the design.

Next: Clay Morphism →
01 · Liquid Glass

Glass that
breathes

Default
blur(20px) saturate(160%)
Intense
blur(40px) saturate(220%)
Warm tint
blur(24px) hue-rotate(20deg)
Dark glass
blur(16px) brightness(0.6)
02 · Functional Motion

Every frame
has intent

0 Interactions / sec
0 Lighthouse score
0 FPS target
0 ms INP budget
transform · opacity onlyCompositor — zero layout reflow
IntersectionObserverScroll reveal coverage
requestAnimationFrameCounter animations below
transition-delay staggerBento card cascade above
01

Fade up

02

Stagger

03

Delay

04

Cascade

05

Reveal

06

Done ✓

05 · Clay Morphism

Tactile
Surfaces

Layered box-shadow creates apparent 3D depth. Press any button — the shadow collapses on :active.

.clay-btn.primary
.clay-btn
.clay-emerald
.clay-amber
.clay-rose
.clay-ghost

Shadow stack anatomy

box-shadow:
  5px 5px 14px rgba(0,0,0,0.35),      /* outer drop  */
 -3px -3px 8px rgba(255,255,255,0.08), /* inner lift  */
  inset 0 2px 4px rgba(255,255,255,0.25); /* top gloss */

:active → shadow collapses to 2px 3px 8px (pressed state)
06 · Bold Typography — fluid clamp() scale
BOLD
fluid · clamp() · responsive
--text-hero
clamp(3.2rem, 1.5rem+7vw, 9.5rem) Aa
--text-2xl Aa
--text-xl Aa
--text-lg Aa
--text-base Aa
--text-sm Aa
Light 300 Regular 400 Medium 500 SemiBold 600 Bold 700
09 · Anti-Perfect · Organic Hover

Beautifully
Imperfect

Cards have intentional micro-rotations. Hover any button to trigger the wobble keyframe animation.

–1.8° rotation

Slight tilt breaks the monotony of perfect alignment. Human hands never place things perfectly.

+1.2° rotation

Variable border-radius creates organic blob shapes — the softness rectangles can't achieve.

–0.6° rotation

Stagger with a slight overshoot easing: cubic-bezier(0.36, 0.07, 0.19, 0.97) adds snap.

+0.9° rotation

Anti-perfect is intentional — not a bug. Each micro-imperfection adds personality and warmth.

All 10 skills — live on this page

Build your
next
project.

① Liquid Glass · ② Functional Motion · ③ Bento Grid
④ Scroll Reveal · ⑤ Clay Morphism · ⑥ Bold Type
⑦ WebGL 3D · ⑧ Dark Luxury · ⑨ Anti-Perfect · ⑩ Contextual Nav

hello@craft.studio
10Techniques
100%Vanilla JS
0Build tools