Motion & effects capability catalog
A visual, browsable catalog of the motion/effects capabilities available for future productions — real interactive web-motion techniques, a real rendered HyperFrames block, 22 proven shot-template blueprints (4 rendered as real preview loops), and the full 373-item HyperFrames registry, searchable.
Section A
Full live / video quality — these are real, working pieces, not mockups.
Four small, real, working interactive widgets — one per technique from the
web-motion skill. Click / toggle each one; nothing here is a static screenshot.
Trigger → rules → feedback → loop. Press feedback is a 150ms
compositor-safe transform: scale() — under 100ms reads as a glitch, over
400ms reads as lag. The like button adds a spring-overshoot pop
(cubic-bezier(0.34, 1.56, 0.64, 1)) reserved for delight moments, driven off a
real data-liked state flip, not a fake "looks pressed" class.
Your browser has no document.startViewTransition — instant swap fallback used (no polyfill, no broken state).
Uses the native View Transitions API — it screenshots the old and new DOM states and cross-fades/morphs between them with zero layout code, and degrades gracefully: browsers without support just do an instant swap.
The browser can composite transform/opacity changes on the GPU
without re-running layout or paint; almost everything else — left,
width, margin — forces layout recalculation on every frame.
Jank on a fast dev machine is often invisible until profiled — the danger is real even
when both rows look identical here.
Large motion can trigger real vestibular symptoms — WCAG 2.3.3 (AAA) / 2.2.2 exist
because of it. The toggle simulates the OS setting (the page can't force it); this demo
also binds to the real @media (prefers-reduced-motion: reduce) query, so if
you already have it set, it starts reduced automatically.
The HyperFrames block built earlier today — rendered, not a live demo.
True 3D CSS isometric stagger-build — a static camera rotation on a
preserve-3d wrapper turns a flat top-down grid into a correct isometric
diamond grid for free, with each cube's three faces shaded in distinct alpha steps
(top brightest, left mid-tone, right darkest) so the volume reads without a single
per-element skew hack.
Section B
Proven, time-coded shot templates mined from golden product-launch clips. Four are instantiated below as real rendered preview loops with generic placeholder content; the other 18 are rich text cards straight from the real blueprint index.
Generic, non-branded placeholder content, rendered via the HyperFrames CLI at 960×540 (preview scale) — same pipeline as iso-stack-build above.
Hook (escalation) — full-screen beats hard-cut in and land a spring-pop payoff. The workhorse blueprint, serving 6 roles.
Hook — a live caret types and edits a line, collapses it, then spring-pops a brand payoff lockup.
Hook — a cycling accent word suggesting "could be many things" gets physically shoved aside by a hero crashing in — a collision, not a fade.
Key_Feature — labeled tiles self-assemble in a staggered cascade into a grid and hold under a slow push-in.
Name, duration, roles, and description straight from the real blueprint index — grouped by primary role so it doesn't read as a flat wall of 18 identical cards.
Section C
Loading registry…
No items match these filters.