Source
Every surface starts with a reference, a licence, and a boundary that survives the rebuild.
Animated content
A viewport-triggered reveal wrapper with slide, blur, tilt, wipe, and stagger variants.
Ship the surface
A reveal that keeps the page still: content arrives in one small movement, then stays out of the way.
Review
The design read, the capture matrix, and the reviewer notes stay attached to the component.
Capture
The same state is checked in light and dark, at desktop, tablet, and mobile widths.
Implementation
1"use client";2 3import {4 useEffect,5 useRef,6 useState,7 type CSSProperties,8 type HTMLAttributes,9 type ReactNode,10} from "react";11 12export type AnimatedContentVariant =13 "fade" | "slide" | "blur" | "tilt" | "wipe";14export type AnimatedContentDirection = "up" | "down" | "left" | "right";15 16export type AnimatedContentProps = Omit<17 HTMLAttributes<HTMLDivElement>,18 "children"19> & {20 /** Content that reveals as a group or as staggered direct children. */21 children: ReactNode;22 /** Visual reveal recipe. */23 variant?: AnimatedContentVariant;24 /** Direction for slide, tilt, and wipe. */25 direction?: AnimatedContentDirection;26 /** Travel distance in pixels. */27 distance?: number;28 /** Transition duration in milliseconds. */