Surfaces and Cards
Surface effects
Each card is now isolated so the surface effects are not masked by grouped-child transforms. Hover the cards to compare pointer light, tilt, animated border, glow, glass, and reveal.
Spotlight
Move the pointer over this card: the light follows the cursor.
Tilt
Hover near the edges: the card leans with the pointer.
Border
The card edge carries the animated border treatment.
Glow
Move the pointer: the glow follows and brightens the surface.
Glass
Hover gives the surface a frosted, lifted treatment.
Reveal
This card animates into place when the section enters the viewport.
List-style reveal variants
These use the same query/list reveal engine on ordinary child cards, proving the styles can be reused outside one specific element type.
Icons
First child item
Second child item
Third child item
Line
First child item
Second child item
Third child item
Highlight
First child item
Second child item
Third child item
Section parallax and staggered children
The section drifts at its own pace while the container reveals and each child fades up in turn.
Second child, staggered by 120ms.
Third child, staggered by 240ms.