Hero and section sequencing
Children receive deterministic order, delay and stagger variables without extra markup from the model.
Cascade, wave, radialMotion Engine 3Rich motion without animation boilerplate
Make the interface move with intent.
A model selects a global motion profile or one exact recipe. AppBlocks supplies coordinated entrances, scroll-linked transforms, child choreography, hover behavior, press feedback and reduced-motion fallbacks.
One profile choreographs the whole page.
Use a named profile such as cinematic, polished, playful or application. Override only the blocks that need a specific entrance, scroll effect or interaction.
Motion recipes1,000x000 through x999
Entrance effects20Fade, clip, spring, zoom and more
Scroll effects14Parallax, depth, tilt, clip and progress
Hover and press effects24Finite, composable microinteractions
Scroll choreography
Viewport progress drives depth, not just a one-time fade.
A single request can add parallax, scale, rotation, opacity, blur, tilt, skew, clipping, progress or sticky behavior. The runtime batches updates through requestAnimationFrame.
- Intersection-based entrance and repeat controls
- Scroll-linked transforms with bounded intensity
- One animation-frame loop for active elements
- Automatic reduced-motion escape
Profile: cinematic
Motion telemetry
Animation target60fpsOne scheduled scroll loop
Animation dependencies0Native browser APIs
Reduced-motion path100%Transform and loop escape
Motion is generated, inspectable and finite.
Choreography, not random movement
Blocks move according to their role.
Heroes receive staged entrances. Collections cascade or wave. Data surfaces stay fast and restrained. Calls to action can carry stronger emphasis.
Grid choreography
Cards can rise, scale or fan into place while preserving layout and document order.
Scroll-linked depth
Elements can respond continuously as they cross the viewport rather than merely appearing once.
Accessibility remains mandatory
Reduced-motion preferences disable transforms, loops and choreography while keeping content immediately visible.
Magnetic
Pointer attraction
Fine pointers receive bounded magnetic movement. Touch input remains stable.
Shine
Directional highlight
A generated sheen crosses the surface without arbitrary authored CSS.
Tilt
Pointer depth
Perspective responds to pointer position and resets cleanly on pointer leave.
Spotlight
Local illumination
A radial highlight tracks the pointer while the surface remains semantic HTML.
Hover and press are separate decisions.
A model can select one exact x000–x999 recipe or compose a hover and press treatment in a few characters.
Lift + compress
A restrained product-interface default.
Glow + ripple
A higher-emphasis conversion treatment.
Jelly + bounce
A playful interaction for informal products.
Border + push
A graphic interaction with clear pressed feedback.
Motion constraints
Expressive does not mean uncontrolled.
Every effect is allowlisted. Distances and intensity are bounded. Looping motion pauses on hover and disappears under reduced-motion preferences.
Read motion documentationUse the motion engine directly
Spend five tokens, not five hundred lines.
Select a profile, an exact motion recipe, or a small set of explicit effects. The generated output remains ordinary HTML, CSS and JavaScript.