CSS techniques extracted from cross-domain design frameworks. Every effect below is interactive — hover, click, and scroll.
Inspired by sidechain compression in audio production. When you hover one element, siblings duck their opacity and scale — focusing attention like a compressor ducks backing instruments under the kick drum.
Inspired by audio sidechain compressionVisual systems
Choreography
Sound patterns
Cinematography
Cards rotate from their top edge like a door hinge. A radial-gradient ground shadow stretches underneath, creating a convincing 3D depth illusion with pure CSS — no WebGL required.
3D perspective & CSS depth illusion ⚙ Interactive Lab →Rotates from the top edge with perspective: 600px
Ground shadow uses radial-gradient on ::after
Easing: cubic-bezier(0.23, 1, 0.32, 1)
Frosted glass cards using backdrop-filter: blur() over a colorful gradient background. The light-catching top edge is the signature detail — a 1px gradient that catches the eye.
Frosted glass material systembackdrop-filter: blur(20px) with gradient edge
1px top gradient catches ambient light
Semi-transparent background over color mesh
Elements enter one-by-one at 80ms intervals rather than all at once. The golden ratio for motion overlap: each element starts before the previous one finishes. Press replay to see it again.
Motion choreography & sequencingThe same animation feels completely different depending on the easing curve. Hover over each track to see the same distance traveled with a different personality. Spring easing overshoots, bounce snaps back.
Easing curve psychologyEvery synthesizer note has four phases: Attack (how fast it hits), Decay (how it settles), Sustain (the hold level), and Release (how it fades). Buttons should work the same way. Click and hold to feel it.
Inspired by synthesizer envelope designDark mode is not color inversion — it is a lighting system. Higher surfaces are brighter, creating elevation through luminance. Six tiers from deep background to floating surface.
Dark interface lighting systemAnimating box-shadow triggers a repaint every frame. Instead, pre-render the shadow on a ::after pseudo-element and animate its opacity — GPU composited, zero layout thrashing, silky smooth.
Animation performance optimizationDirect box-shadow
Pseudo-element opacity
Cell size is a hierarchy signal. The largest cell contains the most important content. Asymmetric spans create visual rhythm like a well-composed dashboard.
Asymmetric grid hierarchy2×2 span signals highest importance. This cell commands attention by size alone.
1×1 cell
1×1 cell
2×1 span for secondary information — wide enough to contain detail, shorter than primary.
The scroll bar is a timeline. Each pixel scrolled is a reveal. Steps appear as you scroll, creating a reading experience where information unfolds at the user's pace.
Scroll-triggered storytellingUnderstand the seven-layer framework structure before generating new ones.
Motion graphics, audio engineering, cinematography — each domain teaches web design something new.
Six specific frameworks that each capture one pillar of the domain.
One compound framework that weaves all six together into a decision system.
Every framework earns its place by solving a real design problem, not by being theoretically interesting.