CSS
LAB

Experiment 01

Aurora Gradient

@property enables smooth interpolation of oklch hue values inside a gradient. The hue rotates from violet to orange and back, creating a living aurora — impossible before typed custom properties.

@property --aurora-h + oklch() + animation

Experiment 02

Gravitational Grid

:has() detects hover on any cell and dims all non-adjacent siblings. Hovered cell scales up; neighbors glow faintly. No JavaScript event listeners — pure CSS selector awareness.

:has() + @property --grid-glow + transition

Experiment 03

Scroll Morphism

clip-path polygon coordinates are @property values animated by scroll position. The shape smoothly morphs from diamond to trapezoid to abstract form as you scroll through.

@property --morph-* + clip-path + animation-timeline: view()

Experiment 04

Weight Wave

Each character has a scroll-driven font-weight animation at a slightly offset range. As you scroll, a ripple of bold flows through the text. @property --wt: integer enables smooth weight interpolation on variable fonts.

The browser is the
canvas

@property --wt: integer + animation-timeline: scroll() + font-weight

Experiment 05

Depth Field

Text layers at different z-positions via CSS perspective + translateZ. Each layer scrolls at a different speed using animation-timeline: view(). Pure CSS 3D parallax — no JavaScript, no canvas, no WebGL.

perspective + translateZ + animation-timeline: view()

Experiment 06

Moire Interference

Two overlapping conic-gradient patterns rotating in opposite directions. Where they overlap, optical interference creates an ever-shifting moire pattern. No canvas, no WebGL, no JavaScript — pure CSS rendering.

@property --angle + repeating-conic-gradient + mix-blend-mode