From 51a88b95660c5f67e66e9c5977226f6ae7b31255 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Fri, 11 Sep 2026 18:15:00 -0400
Subject: [PATCH] docs(catalog): put the install command above the preview
 (#3888)

The install command is the one line a reader comes to a catalog page to copy,
and it sat below the whole variables explorer, under its Customize panel, a
screen or more down on long items. Move the Install section above the preview
and regenerate all 399 pages.
---
 docs/catalog/blocks/ai-chat-reveal.mdx        |  12 +-
 docs/catalog/blocks/app-showcase.mdx          |  12 +-
 docs/catalog/blocks/apple-money-count.mdx     |  12 +-
 docs/catalog/blocks/bar-chart-race.mdx        |  12 +-
 docs/catalog/blocks/beat-freeze-cut.mdx       |  12 +-
 .../blocks/blue-sweater-intro-video.mdx       |  12 +-
 docs/catalog/blocks/camcorder-hud.mdx         |  12 +-
 docs/catalog/blocks/camera-dolly-zoom.mdx     |  12 +-
 docs/catalog/blocks/carousel-circle-1.mdx     |  12 +-
 docs/catalog/blocks/carousel-circle-2.mdx     |  12 +-
 docs/catalog/blocks/carousel-circle-3.mdx     |  12 +-
 docs/catalog/blocks/carousel-circle-4.mdx     |  12 +-
 docs/catalog/blocks/carousel-circle-5.mdx     |  12 +-
 docs/catalog/blocks/carousel-orbit-1.mdx      |  12 +-
 docs/catalog/blocks/carousel-orbit-2.mdx      |  12 +-
 docs/catalog/blocks/carousel-orbit-3.mdx      |  12 +-
 docs/catalog/blocks/carousel-orbit-4.mdx      |  12 +-
 docs/catalog/blocks/carousel-orbit-5.mdx      |  12 +-
 docs/catalog/blocks/carousel-path-1.mdx       |  12 +-
 docs/catalog/blocks/carousel-path-2.mdx       |  12 +-
 docs/catalog/blocks/carousel-path-3.mdx       |  12 +-
 docs/catalog/blocks/carousel-path-4.mdx       |  12 +-
 docs/catalog/blocks/carousel-path-5.mdx       |  12 +-
 .../catalog/blocks/carousel-text-circle-1.mdx |  12 +-
 .../catalog/blocks/carousel-text-circle-2.mdx |  12 +-
 .../catalog/blocks/carousel-text-circle-3.mdx |  12 +-
 .../catalog/blocks/carousel-text-circle-4.mdx |  12 +-
 .../catalog/blocks/carousel-text-circle-5.mdx |  12 +-
 docs/catalog/blocks/carousel-vision-1.mdx     |  12 +-
 docs/catalog/blocks/carousel-vision-2.mdx     |  12 +-
 docs/catalog/blocks/carousel-vision-3.mdx     |  12 +-
 docs/catalog/blocks/carousel-vision-4.mdx     |  12 +-
 docs/catalog/blocks/carousel-vision-5.mdx     |  12 +-
 docs/catalog/blocks/chatgpt-exchange.mdx      |  81 +-
 .../catalog/blocks/chromatic-radial-split.mdx |  12 +-
 docs/catalog/blocks/cinematic-zoom.mdx        |  12 +-
 docs/catalog/blocks/claude-exchange.mdx       |  60 +-
 docs/catalog/blocks/code-3d-extrude.mdx       |  12 +-
 docs/catalog/blocks/code-diff.mdx             |  12 +-
 docs/catalog/blocks/code-highlight.mdx        |  12 +-
 docs/catalog/blocks/code-morph.mdx            |  12 +-
 .../catalog/blocks/code-particle-assemble.mdx |  12 +-
 docs/catalog/blocks/code-scroll.mdx           |  12 +-
 docs/catalog/blocks/code-shader-dissolve.mdx  |  12 +-
 .../code-snippet-apple-terminal-basic.mdx     |  12 +-
 ...code-snippet-apple-terminal-clear-dark.mdx |  12 +-
 ...ode-snippet-apple-terminal-clear-light.mdx |  12 +-
 .../code-snippet-apple-terminal-grass.mdx     |  12 +-
 .../code-snippet-apple-terminal-homebrew.mdx  |  12 +-
 .../code-snippet-apple-terminal-man-page.mdx  |  12 +-
 .../code-snippet-apple-terminal-novel.mdx     |  12 +-
 .../code-snippet-apple-terminal-ocean.mdx     |  12 +-
 .../code-snippet-apple-terminal-pro.mdx       |  12 +-
 .../code-snippet-apple-terminal-red-sands.mdx |  12 +-
 ...-snippet-apple-terminal-silver-aerogel.mdx |  12 +-
 ...de-snippet-apple-terminal-solid-colors.mdx |  12 +-
 .../catalog/blocks/code-snippet-dark-2026.mdx |  12 +-
 .../blocks/code-snippet-dark-modern.mdx       |  12 +-
 .../catalog/blocks/code-snippet-dark-plus.mdx |  12 +-
 docs/catalog/blocks/code-snippet-flight.mdx   |  12 +-
 .../code-snippet-high-contrast-light.mdx      |  12 +-
 .../blocks/code-snippet-high-contrast.mdx     |  12 +-
 .../blocks/code-snippet-light-2026.mdx        |  12 +-
 .../blocks/code-snippet-light-modern.mdx      |  12 +-
 .../blocks/code-snippet-light-plus.mdx        |  12 +-
 docs/catalog/blocks/code-snippet-monokai.mdx  |  12 +-
 .../blocks/code-snippet-solarized-light.mdx   |  12 +-
 .../code-snippet-visual-studio-dark.mdx       |  12 +-
 .../code-snippet-visual-studio-light.mdx      |  12 +-
 docs/catalog/blocks/code-typing.mdx           |  12 +-
 docs/catalog/blocks/cosmic-orb.mdx            |  12 +-
 docs/catalog/blocks/cross-warp-morph.mdx      |  12 +-
 docs/catalog/blocks/data-chart.mdx            |  12 +-
 docs/catalog/blocks/domain-warp-dissolve.mdx  |  12 +-
 .../blocks/editorial-flash-overlay.mdx        |  12 +-
 docs/catalog/blocks/flash-through-white.mdx   |  12 +-
 docs/catalog/blocks/flowchart-vertical.mdx    |  12 +-
 docs/catalog/blocks/flowchart.mdx             |  12 +-
 docs/catalog/blocks/freeze-frame-dressing.mdx |  12 +-
 docs/catalog/blocks/gallery-tunnel.mdx        |  12 +-
 docs/catalog/blocks/glitch.mdx                |  12 +-
 docs/catalog/blocks/gravitational-lens.mdx    |  12 +-
 docs/catalog/blocks/halftone-field.mdx        |  12 +-
 .../blocks/heygen-avatar-promo-card.mdx       |   4 +-
 docs/catalog/blocks/hw-frame.mdx              |  12 +-
 docs/catalog/blocks/hw-path-text.mdx          |  12 +-
 docs/catalog/blocks/hw-pipeline.mdx           |  12 +-
 .../catalog/blocks/hw-scribble-transition.mdx |  12 +-
 docs/catalog/blocks/hw-text-cloud.mdx         |  12 +-
 docs/catalog/blocks/hw-title.mdx              |  12 +-
 docs/catalog/blocks/hw-write-title.mdx        |   4 +-
 docs/catalog/blocks/instagram-follow.mdx      |  12 +-
 docs/catalog/blocks/ios26-liquid-glass.mdx    |   4 +-
 docs/catalog/blocks/light-leak.mdx            |  12 +-
 .../blocks/liquid-glass-context-menu.mdx      |  18 +-
 .../blocks/liquid-glass-media-controls.mdx    |  18 +-
 .../blocks/liquid-glass-notification.mdx      |  18 +-
 docs/catalog/blocks/liquid-glass-widgets.mdx  |  18 +-
 docs/catalog/blocks/logo-outro.mdx            |  12 +-
 docs/catalog/blocks/lower-third-bild.mdx      |  12 +-
 docs/catalog/blocks/lt-accent-underline.mdx   |  12 +-
 docs/catalog/blocks/lt-bold-block.mdx         |  12 +-
 docs/catalog/blocks/lt-clean-bar.mdx          |  12 +-
 docs/catalog/blocks/lt-color-block.mdx        |  12 +-
 docs/catalog/blocks/lt-dark-card.mdx          |  12 +-
 docs/catalog/blocks/lt-kicker-name.mdx        |  12 +-
 docs/catalog/blocks/lt-mask-reveal.mdx        |  12 +-
 docs/catalog/blocks/lt-neon-border.mdx        |  12 +-
 docs/catalog/blocks/lt-side-rule.mdx          |  12 +-
 docs/catalog/blocks/lt-soft-pill.mdx          |  12 +-
 docs/catalog/blocks/lt-stack-bars.mdx         |  12 +-
 docs/catalog/blocks/macos-notification.mdx    |  12 +-
 .../blocks/macos-tahoe-liquid-glass.mdx       |   4 +-
 docs/catalog/blocks/message-thread-reveal.mdx |  12 +-
 docs/catalog/blocks/mk-background.mdx         |  12 +-
 docs/catalog/blocks/mk-callout-highlight.mdx  |  12 +-
 .../blocks/mk-clone-wall-transition.mdx       |  12 +-
 docs/catalog/blocks/mk-line-graph.mdx         |  12 +-
 docs/catalog/blocks/mk-placeholder-grid.mdx   |  12 +-
 docs/catalog/blocks/mk-progress-stat.mdx      |  12 +-
 docs/catalog/blocks/mk-specs-list.mdx         |  12 +-
 docs/catalog/blocks/news-ticker.mdx           |  12 +-
 .../blocks/north-korea-locked-down.mdx        |  12 +-
 docs/catalog/blocks/notes-reveal.mdx          | 851 ++++++++++++------
 docs/catalog/blocks/notification-cascade.mdx  |  12 +-
 docs/catalog/blocks/nyc-paris-flight.mdx      |  12 +-
 .../blocks/organic-light-leak-overlay.mdx     |  12 +-
 docs/catalog/blocks/oscilloscope-trace.mdx    |  12 +-
 docs/catalog/blocks/rack-focus.mdx            |  12 +-
 docs/catalog/blocks/reddit-post.mdx           |  12 +-
 docs/catalog/blocks/ridged-burn.mdx           |  12 +-
 docs/catalog/blocks/ripple-waves.mdx          |  12 +-
 docs/catalog/blocks/sdf-iris.mdx              |  12 +-
 docs/catalog/blocks/share-sheet-carousel.mdx  |  12 +-
 docs/catalog/blocks/slack-notification-ad.mdx |   4 +-
 docs/catalog/blocks/spain-map.mdx             |  12 +-
 docs/catalog/blocks/spiral-galaxy.mdx         |  12 +-
 docs/catalog/blocks/split-flap-board.mdx      |  12 +-
 docs/catalog/blocks/spotify-card.mdx          |  12 +-
 docs/catalog/blocks/swirl-vortex.mdx          |  12 +-
 docs/catalog/blocks/thermal-distortion.mdx    |  12 +-
 docs/catalog/blocks/thread-message-stack.mdx  |  12 +-
 docs/catalog/blocks/tiktok-follow.mdx         |  12 +-
 docs/catalog/blocks/transitions-3d.mdx        |  12 +-
 docs/catalog/blocks/transitions-blur.mdx      |  12 +-
 docs/catalog/blocks/transitions-cover.mdx     |  12 +-
 .../blocks/transitions-destruction.mdx        |  12 +-
 docs/catalog/blocks/transitions-dissolve.mdx  |  12 +-
 .../catalog/blocks/transitions-distortion.mdx |  12 +-
 docs/catalog/blocks/transitions-grid.mdx      |  12 +-
 docs/catalog/blocks/transitions-light.mdx     |  12 +-
 .../catalog/blocks/transitions-mechanical.mdx |  12 +-
 docs/catalog/blocks/transitions-other.mdx     |  12 +-
 docs/catalog/blocks/transitions-push.mdx      |  12 +-
 docs/catalog/blocks/transitions-radial.mdx    |  12 +-
 docs/catalog/blocks/transitions-scale.mdx     |  12 +-
 docs/catalog/blocks/ui-3d-reveal.mdx          |  12 +-
 docs/catalog/blocks/us-map-bubble.mdx         |  12 +-
 docs/catalog/blocks/us-map-flow.mdx           |  12 +-
 docs/catalog/blocks/us-map-hex.mdx            |  12 +-
 docs/catalog/blocks/us-map.mdx                |  12 +-
 docs/catalog/blocks/vfx-anamorphic-flare.mdx  |  12 +-
 docs/catalog/blocks/vfx-iphone-device.mdx     |   4 +-
 docs/catalog/blocks/vfx-liquid-background.mdx |   4 +-
 docs/catalog/blocks/vfx-liquid-glass.mdx      |   4 +-
 docs/catalog/blocks/vfx-magnetic.mdx          |   4 +-
 docs/catalog/blocks/vfx-portal.mdx            |   4 +-
 docs/catalog/blocks/vfx-shatter.mdx           |   4 +-
 docs/catalog/blocks/vfx-text-cursor.mdx       |  12 +-
 docs/catalog/blocks/vpn-youtube-spot.mdx      |  12 +-
 docs/catalog/blocks/weight-wave.mdx           |  12 +-
 docs/catalog/blocks/whip-pan.mdx              |  12 +-
 docs/catalog/blocks/world-map.mdx             |  12 +-
 docs/catalog/blocks/x-post.mdx                |  12 +-
 docs/catalog/blocks/yt-comment-card.mdx       |  12 +-
 docs/catalog/blocks/yt-lcd-background.mdx     |  12 +-
 docs/catalog/blocks/yt-logo-intro.mdx         |  12 +-
 docs/catalog/blocks/yt-lower-third.mdx        |  12 +-
 docs/catalog/blocks/yt-prism-title.mdx        |  12 +-
 docs/catalog/blocks/yt-vertical-fill.mdx      |  12 +-
 .../catalog/components/animated-bar-chart.mdx |  12 +-
 docs/catalog/components/arc-motion-path.mdx   |  12 +-
 docs/catalog/components/ascii-render-pass.mdx |  12 +-
 .../catalog/components/ascii-trail-reveal.mdx |  12 +-
 docs/catalog/components/aurora-drift.mdx      |  12 +-
 docs/catalog/components/avatar-cloud.mdx      |  12 +-
 .../catalog/components/avatar-group-hover.mdx |  12 +-
 docs/catalog/components/badge-pop.mdx         |  12 +-
 docs/catalog/components/beat-accent.mdx       |  12 +-
 .../components/beat-pulse-background.mdx      |  12 +-
 docs/catalog/components/beat-timeline.mdx     |  12 +-
 docs/catalog/components/before-after-wipe.mdx |  12 +-
 docs/catalog/components/blur-in.mdx           |  12 +-
 docs/catalog/components/blur-out-up.mdx       |  12 +-
 docs/catalog/components/bottom-up-letters.mdx |  12 +-
 .../components/browser-device-stage.mdx       |  12 +-
 .../components/camera-rig-depth-stack.mdx     |  12 +-
 docs/catalog/components/camera-scan-gate.mdx  |  12 +-
 docs/catalog/components/camera-shake.mdx      |  12 +-
 .../components/caption-blend-difference.mdx   |   4 +-
 .../components/caption-camera-follow.mdx      |  12 +-
 docs/catalog/components/caption-clip-wipe.mdx |  12 +-
 .../components/caption-editorial-emphasis.mdx |  12 +-
 docs/catalog/components/caption-emoji-pop.mdx |  12 +-
 .../catalog/components/caption-glitch-rgb.mdx |  12 +-
 .../components/caption-gradient-fill.mdx      |  12 +-
 docs/catalog/components/caption-highlight.mdx |  12 +-
 .../components/caption-kinetic-slam.mdx       |  12 +-
 .../components/caption-matrix-decode.mdx      |  12 +-
 .../components/caption-neon-accent.mdx        |  12 +-
 docs/catalog/components/caption-neon-glow.mdx |  12 +-
 .../components/caption-parallax-layers.mdx    |  12 +-
 .../components/caption-particle-burst.mdx     |  12 +-
 .../components/caption-pill-karaoke.mdx       |  12 +-
 docs/catalog/components/caption-texture.mdx   |  12 +-
 .../components/caption-weight-shift.mdx       |  12 +-
 docs/catalog/components/card-resize.mdx       |  12 +-
 docs/catalog/components/char-slam-explode.mdx |  12 +-
 docs/catalog/components/chart-story.mdx       |  12 +-
 docs/catalog/components/chat-message.mdx      |  12 +-
 docs/catalog/components/chat-thread.mdx       |  12 +-
 .../components/chromatic-aberration-wipe.mdx  |  12 +-
 docs/catalog/components/code-terminal-run.mdx |  12 +-
 docs/catalog/components/comparison-split.mdx  |  12 +-
 docs/catalog/components/confetti.mdx          |  12 +-
 .../components/conic-progress-ring.mdx        |  12 +-
 docs/catalog/components/constellation-hub.mdx |  12 +-
 docs/catalog/components/count-up.mdx          |  12 +-
 docs/catalog/components/cta-close.mdx         |  12 +-
 docs/catalog/components/cta-lockup.mdx        |  12 +-
 .../catalog/components/cursor-glyph-trail.mdx |  12 +-
 docs/catalog/components/cut-the-curve.mdx     |  12 +-
 docs/catalog/components/decline-chart.mdx     |  12 +-
 .../catalog/components/device-frame-stage.mdx |  12 +-
 docs/catalog/components/directional-wipe.mdx  |  12 +-
 docs/catalog/components/drift-hold.mdx        |  12 +-
 docs/catalog/components/dynamic-grid.mdx      |  12 +-
 docs/catalog/components/echo-trail.mdx        |  12 +-
 docs/catalog/components/facet-morph.mdx       |  12 +-
 docs/catalog/components/fade-through.mdx      |  12 +-
 .../catalog/components/focus-blur-resolve.mdx |  12 +-
 docs/catalog/components/focus-rack.mdx        |  12 +-
 docs/catalog/components/focus-swap.mdx        |  12 +-
 docs/catalog/components/gesture-tap.mdx       |  12 +-
 docs/catalog/components/gloss-sweep.mdx       |  12 +-
 .../catalog/components/grade-split-reveal.mdx |  12 +-
 docs/catalog/components/grain-field.mdx       |  12 +-
 docs/catalog/components/grain-overlay.mdx     |  12 +-
 .../catalog/components/grid-card-assemble.mdx |  12 +-
 .../catalog/components/grid-pixelate-wipe.mdx |  12 +-
 docs/catalog/components/halftone-dissolve.mdx |  12 +-
 docs/catalog/components/headline-slam.mdx     |  12 +-
 docs/catalog/components/hw-arrow.mdx          |  12 +-
 docs/catalog/components/hw-boil.mdx           |  12 +-
 docs/catalog/components/hw-box-label.mdx      |  12 +-
 docs/catalog/components/hw-callout-circle.mdx |  12 +-
 docs/catalog/components/hw-underline.mdx      |  12 +-
 docs/catalog/components/icon-morph-beat.mdx   |  12 +-
 docs/catalog/components/icon-swap.mdx         |  12 +-
 docs/catalog/components/ink-bleed-reveal.mdx  |  12 +-
 docs/catalog/components/inline-highlight.mdx  |  12 +-
 docs/catalog/components/input-feedback.mdx    |  12 +-
 docs/catalog/components/iris-reveal.mdx       |  12 +-
 .../components/keyframe-scrub-stack.mdx       |  12 +-
 .../components/kinetic-center-build.mdx       |  26 +-
 docs/catalog/components/kinetic-type-swap.mdx |  12 +-
 docs/catalog/components/light-sweep-pass.mdx  |  12 +-
 .../catalog/components/line-by-line-slide.mdx |  12 +-
 docs/catalog/components/line-swap.mdx         |  12 +-
 .../components/locked-nucleus-orbit.mdx       |  12 +-
 docs/catalog/components/logo-brand-close.mdx  |  12 +-
 docs/catalog/components/logo-sting.mdx        |  12 +-
 docs/catalog/components/logo-wall.mdx         |  12 +-
 .../components/marker-checklist-card.mdx      |  12 +-
 docs/catalog/components/marker-highlight.mdx  |  12 +-
 docs/catalog/components/match-cut.mdx         |  12 +-
 docs/catalog/components/matrix-decode.mdx     |  12 +-
 docs/catalog/components/menu-morph.mdx        |  12 +-
 docs/catalog/components/mesh-gradient-bg.mdx  |  12 +-
 docs/catalog/components/micro-transitions.mdx |  12 +-
 docs/catalog/components/mk-emphasis-type.mdx  |  12 +-
 docs/catalog/components/mk-usage-arc.mdx      |  12 +-
 docs/catalog/components/modal-morph.mdx       |  12 +-
 docs/catalog/components/morph-swap.mdx        |  12 +-
 docs/catalog/components/morph-text.mdx        |  12 +-
 docs/catalog/components/motion-blur.mdx       |  12 +-
 .../catalog/components/multi-device-splay.mdx |  12 +-
 .../components/multiplayer-cursors.mdx        |  12 +-
 .../components/native-notification-pop.mdx    |  12 +-
 docs/catalog/components/notes-typing.mdx      |  12 +-
 .../components/notification-pileup.mdx        |  12 +-
 .../catalog/components/notification-stack.mdx |  12 +-
 docs/catalog/components/number-pop-in.mdx     |  12 +-
 docs/catalog/components/number-wheel.mdx      |  12 +-
 .../components/offset-path-traveler.mdx       |  12 +-
 .../components/onboarding-stepper-flow.mdx    |  12 +-
 .../components/ordered-dither-pass.mdx        |  12 +-
 docs/catalog/components/outline-draw.mdx      |  12 +-
 docs/catalog/components/oversized-cursor.mdx  |  12 +-
 .../catalog/components/overwhelm-surround.mdx |  12 +-
 docs/catalog/components/page-slide.mdx        |  12 +-
 docs/catalog/components/pan-stations.mdx      |  12 +-
 docs/catalog/components/panel-reveal.mdx      |  12 +-
 .../components/parallax-device-dive.mdx       |  12 +-
 docs/catalog/components/parallax-unzoom.mdx   |  12 +-
 docs/catalog/components/parallax-zoom.mdx     |  12 +-
 .../components/particle-image-reveal.mdx      |  12 +-
 .../components/particle-text-dissolve.mdx     |  12 +-
 .../catalog/components/per-word-crossfade.mdx |  12 +-
 docs/catalog/components/per-word-rise.mdx     |  12 +-
 .../components/perspective-marquee.mdx        |  12 +-
 docs/catalog/components/physical-exit.mdx     |  12 +-
 docs/catalog/components/press-ripple.mdx      |  12 +-
 docs/catalog/components/pull-back-reveal.mdx  |  12 +-
 docs/catalog/components/pull-to-refresh.mdx   |  12 +-
 docs/catalog/components/push-in.mdx           |  12 +-
 docs/catalog/components/radial-surround.mdx   |  12 +-
 docs/catalog/components/rgb-glitch-text.mdx   |  12 +-
 .../catalog/components/rubber-band-bumper.mdx |  12 +-
 docs/catalog/components/scan-band.mdx         |  12 +-
 docs/catalog/components/scramble-reveal.mdx   |  12 +-
 .../components/screen-flow-carousel.mdx       |  12 +-
 .../components/scroll-camera-story.mdx        |  12 +-
 docs/catalog/components/scroll-feed.mdx       |  12 +-
 .../catalog/components/segmentation-flood.mdx |  12 +-
 docs/catalog/components/separator.mdx         |  12 +-
 .../components/settings-toggle-flow.mdx       |  12 +-
 docs/catalog/components/shared-axis-y.mdx     |  12 +-
 docs/catalog/components/shared-axis-z.mdx     |  12 +-
 docs/catalog/components/sheet-spring-up.mdx   |  12 +-
 docs/catalog/components/shimmer-sweep.mdx     |  12 +-
 docs/catalog/components/signup-flow.mdx       |  12 +-
 docs/catalog/components/simulated-cursor.mdx  |  12 +-
 docs/catalog/components/skeleton-reveal.mdx   |  12 +-
 docs/catalog/components/slit-scan-reveal.mdx  |  12 +-
 docs/catalog/components/slot-machine-roll.mdx |  12 +-
 docs/catalog/components/social-proof-card.mdx |  12 +-
 docs/catalog/components/soft-blob-touch.mdx   |  12 +-
 docs/catalog/components/soft-blur-in.mdx      |  12 +-
 docs/catalog/components/split-tilt-cards.mdx  |  12 +-
 docs/catalog/components/spotlight-card.mdx    |  12 +-
 docs/catalog/components/spring-pop.mdx        |  12 +-
 .../components/spring-stack-shuffle.mdx       |  12 +-
 docs/catalog/components/stagger-cascade.mdx   |  12 +-
 docs/catalog/components/stagger-lattice.mdx   |  12 +-
 docs/catalog/components/staggered-fade-up.mdx |  12 +-
 docs/catalog/components/star-rating-fill.mdx  |  12 +-
 docs/catalog/components/state-chip-rail.mdx   |  12 +-
 docs/catalog/components/sticky-mock-swap.mdx  |  12 +-
 .../catalog/components/stitched-text-draw.mdx |  12 +-
 .../components/stop-motion-cadence.mdx        |  12 +-
 .../catalog/components/store-badge-lockup.mdx |  12 +-
 docs/catalog/components/streaming-text.mdx    |  12 +-
 .../components/strikethrough-replace.mdx      |  12 +-
 docs/catalog/components/success-check.mdx     |  12 +-
 .../components/svg-line-draw-loader.mdx       |  12 +-
 docs/catalog/components/svg-mask-reveal.mdx   |  12 +-
 docs/catalog/components/svg-stroke-trace.mdx  |  12 +-
 docs/catalog/components/swipe-rail.mdx        |  12 +-
 .../components/tabs-slide-indicator.mdx       |  12 +-
 docs/catalog/components/telemetry-hud.mdx     |  12 +-
 .../catalog/components/terminal-simulator.mdx |  12 +-
 docs/catalog/components/testimonial-card.mdx  |  12 +-
 .../components/testimonial-proof-card.mdx     |  12 +-
 docs/catalog/components/text-shimmer.mdx      |  12 +-
 docs/catalog/components/text-stagger.mdx      |  12 +-
 docs/catalog/components/text-state-swap.mdx   |  12 +-
 docs/catalog/components/texture-mask-text.mdx |  12 +-
 .../components/three-orbiting-cards.mdx       |  12 +-
 docs/catalog/components/ticker-takeover.mdx   |  12 +-
 docs/catalog/components/tilt-card.mdx         |  12 +-
 docs/catalog/components/titlecard-calm.mdx    |  12 +-
 docs/catalog/components/titlecard-lockup.mdx  |  12 +-
 docs/catalog/components/toggle-flip.mdx       |  12 +-
 docs/catalog/components/top-down-letters.mdx  |  12 +-
 docs/catalog/components/touch-indicator.mdx   |  12 +-
 docs/catalog/components/tracing-beam.mdx      |  12 +-
 docs/catalog/components/tracking-in.mdx       |  12 +-
 docs/catalog/components/trust-strip.mdx       |  12 +-
 docs/catalog/components/type-match-cut.mdx    |  12 +-
 docs/catalog/components/typed-prompt.mdx      |  12 +-
 docs/catalog/components/typewriter.mdx        |  12 +-
 docs/catalog/components/typing-indicator.mdx  |  12 +-
 docs/catalog/components/ui-focus-zoom.mdx     |  12 +-
 .../catalog/components/variable-axis-type.mdx |  12 +-
 .../catalog/components/variable-font-flex.mdx |  12 +-
 docs/catalog/components/vector-editor-rig.mdx |  12 +-
 .../components/velocity-throw-snap.mdx        |  12 +-
 docs/catalog/components/vignette.mdx          |  12 +-
 docs/catalog/components/vox-annotate.mdx      |  12 +-
 docs/catalog/components/whip-pan-cut.mdx      |  12 +-
 docs/catalog/components/whiteboard-ink.mdx    |  12 +-
 docs/catalog/components/wordmark-tiles.mdx    |  12 +-
 docs/catalog/components/x-follow-card.mdx     |  12 +-
 docs/catalog/components/yt-camera-move.mdx    |  12 +-
 docs/catalog/components/yt-circle-pointer.mdx |  12 +-
 .../components/yt-feather-highlight.mdx       |  12 +-
 docs/catalog/components/yt-screen-warp.mdx    |  12 +-
 .../components/zoom-through-transition.mdx    |  12 +-
 docs/snippets/variables-explorer.jsx          |   2 +-
 scripts/generate-catalog-pages.ts             |  13 +-
 401 files changed, 3087 insertions(+), 2614 deletions(-)

diff --git a/docs/catalog/blocks/ai-chat-reveal.mdx b/docs/catalog/blocks/ai-chat-reveal.mdx
index 2e2433a1f6..53f620ea36 100644
--- a/docs/catalog/blocks/ai-chat-reveal.mdx
+++ b/docs/catalog/blocks/ai-chat-reveal.mdx
@@ -6,6 +6,12 @@ description: "A question is typed on a rising keyboard, sent, and answered by an
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add ai-chat-reveal" item="ai-chat-reveal" />
+
+That writes `compositions/ai-chat-reveal.html`, plus 2 supporting files under `assets/`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/ai-chat-reveal.json"
   compositionId="ai-chat-reveal"
@@ -1036,12 +1042,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add ai-chat-reveal" item="ai-chat-reveal" />
-
-That writes `compositions/ai-chat-reveal.html`, plus 2 supporting files under `assets/`.
-
 ## Add it to your video
 
 It runs for 19.3333 seconds at 1080×1920. Paste this into your composition:
diff --git a/docs/catalog/blocks/app-showcase.mdx b/docs/catalog/blocks/app-showcase.mdx
index 10e6811cf7..cdb4e5a4a7 100644
--- a/docs/catalog/blocks/app-showcase.mdx
+++ b/docs/catalog/blocks/app-showcase.mdx
@@ -5,6 +5,12 @@ description: "Fitness app product showcase with three floating smartphone screen
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add app-showcase" item="app-showcase" />
+
+That writes one file: `compositions/app-showcase.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="app-showcase preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/app-showcase.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add app-showcase" item="app-showcase" />
-
-That writes one file: `compositions/app-showcase.html`.
-
 ## Source
 
 <Accordion title={`app-showcase.html`}>
diff --git a/docs/catalog/blocks/apple-money-count.mdx b/docs/catalog/blocks/apple-money-count.mdx
index fdc2510102..68875cad2c 100644
--- a/docs/catalog/blocks/apple-money-count.mdx
+++ b/docs/catalog/blocks/apple-money-count.mdx
@@ -5,6 +5,12 @@ description: "Apple-style finance counter that counts from $0 to $10,000, flashe
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add apple-money-count" item="apple-money-count" />
+
+That writes `compositions/apple-money-count.html`, plus 1 supporting file under `assets/`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="apple-money-count preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/apple-money-count.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add apple-money-count" item="apple-money-count" />
-
-That writes `compositions/apple-money-count.html`, plus 1 supporting file under `assets/`.
-
 ## Source
 
 <Accordion title={`apple-money-count.html`}>
diff --git a/docs/catalog/blocks/bar-chart-race.mdx b/docs/catalog/blocks/bar-chart-race.mdx
index 859329615e..2917aac272 100644
--- a/docs/catalog/blocks/bar-chart-race.mdx
+++ b/docs/catalog/blocks/bar-chart-race.mdx
@@ -6,6 +6,12 @@ description: "Ranked bars grow and overtake each other as a time series advances
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add bar-chart-race" item="bar-chart-race" />
+
+That writes one file: `compositions/bar-chart-race.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/bar-chart-race.json"
   compositionId="bar-chart-race"
@@ -602,12 +608,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add bar-chart-race" item="bar-chart-race" />
-
-That writes one file: `compositions/bar-chart-race.html`.
-
 ## Add it to your video
 
 It runs for 12 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/beat-freeze-cut.mdx b/docs/catalog/blocks/beat-freeze-cut.mdx
index a66deadbed..421969f269 100644
--- a/docs/catalog/blocks/beat-freeze-cut.mdx
+++ b/docs/catalog/blocks/beat-freeze-cut.mdx
@@ -5,6 +5,12 @@ description: "A beat-driven speed ramp, freeze-frame hit, and hard-cut sequence
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add beat-freeze-cut" item="beat-freeze-cut" />
+
+That writes one file: `compositions/beat-freeze-cut.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="beat-freeze-cut preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/beat-freeze-cut.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/beat-freeze-cut.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add beat-freeze-cut" item="beat-freeze-cut" />
-
-That writes one file: `compositions/beat-freeze-cut.html`.
-
 ## Add it to your video
 
 It runs for 6 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/blue-sweater-intro-video.mdx b/docs/catalog/blocks/blue-sweater-intro-video.mdx
index 0de2fcdc0e..051cea77bf 100644
--- a/docs/catalog/blocks/blue-sweater-intro-video.mdx
+++ b/docs/catalog/blocks/blue-sweater-intro-video.mdx
@@ -5,6 +5,12 @@ description: "Warm AI creator intro sequence that resolves into an X follow card
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add blue-sweater-intro-video" item="blue-sweater-intro-video" />
+
+That writes `compositions/blue-sweater-intro-video.html`, plus 2 supporting files under `assets/` and `assets/sfx/`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="blue-sweater-intro-video preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/blue-sweater-intro-video.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add blue-sweater-intro-video" item="blue-sweater-intro-video" />
-
-That writes `compositions/blue-sweater-intro-video.html`, plus 2 supporting files under `assets/` and `assets/sfx/`.
-
 ## Source
 
 <Accordion title={`blue-sweater-intro-video.html`}>
diff --git a/docs/catalog/blocks/camcorder-hud.mdx b/docs/catalog/blocks/camcorder-hud.mdx
index b0e80a7b3b..016c48f551 100644
--- a/docs/catalog/blocks/camcorder-hud.mdx
+++ b/docs/catalog/blocks/camcorder-hud.mdx
@@ -5,6 +5,12 @@ description: "Responsive REC, battery, editable date placeholder, and timeline-d
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add camcorder-hud" item="camcorder-hud" />
+
+That writes one file: `compositions/camcorder-hud.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="camcorder-hud preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/camcorder-hud.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/camcorder-hud.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add camcorder-hud" item="camcorder-hud" />
-
-That writes one file: `compositions/camcorder-hud.html`.
-
 ## Add it to your video
 
 It runs for 4 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/camera-dolly-zoom.mdx b/docs/catalog/blocks/camera-dolly-zoom.mdx
index c860ffdf28..55ef820af5 100644
--- a/docs/catalog/blocks/camera-dolly-zoom.mdx
+++ b/docs/catalog/blocks/camera-dolly-zoom.mdx
@@ -6,6 +6,12 @@ description: "Camera tracks toward or away from the subject while the field of v
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add camera-dolly-zoom" item="camera-dolly-zoom" />
+
+That writes one file: `compositions/camera-dolly-zoom.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/camera-dolly-zoom.json"
   compositionId="camera-dolly-zoom"
@@ -372,12 +378,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add camera-dolly-zoom" item="camera-dolly-zoom" />
-
-That writes one file: `compositions/camera-dolly-zoom.html`.
-
 ## Add it to your video
 
 It runs for 4 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/carousel-circle-1.mdx b/docs/catalog/blocks/carousel-circle-1.mdx
index 0d810986bb..75dc769c4d 100644
--- a/docs/catalog/blocks/carousel-circle-1.mdx
+++ b/docs/catalog/blocks/carousel-circle-1.mdx
@@ -6,6 +6,12 @@ description: "Image cards ride a circle with a size gradient by depth angle, swe
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add carousel-circle-1" item="carousel-circle-1" />
+
+That writes `compositions/carousel-circle-1.html`, plus 12 supporting files under `assets/carousel-images/`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/carousel-circle-1.json"
   compositionId="carousel-circle-1"
@@ -1019,12 +1025,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add carousel-circle-1" item="carousel-circle-1" />
-
-That writes `compositions/carousel-circle-1.html`, plus 12 supporting files under `assets/carousel-images/`.
-
 ## Add it to your video
 
 It runs for 6 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/carousel-circle-2.mdx b/docs/catalog/blocks/carousel-circle-2.mdx
index 336087b21b..75bb9f097f 100644
--- a/docs/catalog/blocks/carousel-circle-2.mdx
+++ b/docs/catalog/blocks/carousel-circle-2.mdx
@@ -6,6 +6,12 @@ description: "Image cards ride a circle with a size gradient by depth angle, swe
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add carousel-circle-2" item="carousel-circle-2" />
+
+That writes `compositions/carousel-circle-2.html`, plus 12 supporting files under `assets/carousel-images/`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/carousel-circle-2.json"
   compositionId="carousel-circle-2"
@@ -1019,12 +1025,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add carousel-circle-2" item="carousel-circle-2" />
-
-That writes `compositions/carousel-circle-2.html`, plus 12 supporting files under `assets/carousel-images/`.
-
 ## Add it to your video
 
 It runs for 6 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/carousel-circle-3.mdx b/docs/catalog/blocks/carousel-circle-3.mdx
index 85d2c5fc0d..8279d9f74e 100644
--- a/docs/catalog/blocks/carousel-circle-3.mdx
+++ b/docs/catalog/blocks/carousel-circle-3.mdx
@@ -6,6 +6,12 @@ description: "Image cards ride a circle with a size gradient by depth angle, swe
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add carousel-circle-3" item="carousel-circle-3" />
+
+That writes `compositions/carousel-circle-3.html`, plus 12 supporting files under `assets/carousel-images/`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/carousel-circle-3.json"
   compositionId="carousel-circle-3"
@@ -1019,12 +1025,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add carousel-circle-3" item="carousel-circle-3" />
-
-That writes `compositions/carousel-circle-3.html`, plus 12 supporting files under `assets/carousel-images/`.
-
 ## Add it to your video
 
 It runs for 6 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/carousel-circle-4.mdx b/docs/catalog/blocks/carousel-circle-4.mdx
index 86f00032ec..25c8768bb6 100644
--- a/docs/catalog/blocks/carousel-circle-4.mdx
+++ b/docs/catalog/blocks/carousel-circle-4.mdx
@@ -6,6 +6,12 @@ description: "Image cards ride a circle with a size gradient by depth angle, swe
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add carousel-circle-4" item="carousel-circle-4" />
+
+That writes `compositions/carousel-circle-4.html`, plus 12 supporting files under `assets/carousel-images/`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/carousel-circle-4.json"
   compositionId="carousel-circle-4"
@@ -1019,12 +1025,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add carousel-circle-4" item="carousel-circle-4" />
-
-That writes `compositions/carousel-circle-4.html`, plus 12 supporting files under `assets/carousel-images/`.
-
 ## Add it to your video
 
 It runs for 6 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/carousel-circle-5.mdx b/docs/catalog/blocks/carousel-circle-5.mdx
index f7fda5fc63..378f798273 100644
--- a/docs/catalog/blocks/carousel-circle-5.mdx
+++ b/docs/catalog/blocks/carousel-circle-5.mdx
@@ -6,6 +6,12 @@ description: "Image cards ride a circle with a size gradient by depth angle, swe
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add carousel-circle-5" item="carousel-circle-5" />
+
+That writes `compositions/carousel-circle-5.html`, plus 12 supporting files under `assets/carousel-images/`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/carousel-circle-5.json"
   compositionId="carousel-circle-5"
@@ -1019,12 +1025,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add carousel-circle-5" item="carousel-circle-5" />
-
-That writes `compositions/carousel-circle-5.html`, plus 12 supporting files under `assets/carousel-images/`.
-
 ## Add it to your video
 
 It runs for 6 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/carousel-orbit-1.mdx b/docs/catalog/blocks/carousel-orbit-1.mdx
index 446528ba08..9379a58292 100644
--- a/docs/catalog/blocks/carousel-orbit-1.mdx
+++ b/docs/catalog/blocks/carousel-orbit-1.mdx
@@ -6,6 +6,12 @@ description: "Image cards on a spinning 3D Fibonacci sphere, billboarded to the
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add carousel-orbit-1" item="carousel-orbit-1" />
+
+That writes `compositions/carousel-orbit-1.html`, plus 24 supporting files under `assets/carousel-images/`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/carousel-orbit-1.json"
   compositionId="carousel-orbit-1"
@@ -1041,12 +1047,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add carousel-orbit-1" item="carousel-orbit-1" />
-
-That writes `compositions/carousel-orbit-1.html`, plus 24 supporting files under `assets/carousel-images/`.
-
 ## Add it to your video
 
 It runs for 6 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/carousel-orbit-2.mdx b/docs/catalog/blocks/carousel-orbit-2.mdx
index f658b9ad67..f20e2e3e72 100644
--- a/docs/catalog/blocks/carousel-orbit-2.mdx
+++ b/docs/catalog/blocks/carousel-orbit-2.mdx
@@ -6,6 +6,12 @@ description: "Image cards on a spinning 3D Fibonacci sphere, billboarded to the
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add carousel-orbit-2" item="carousel-orbit-2" />
+
+That writes `compositions/carousel-orbit-2.html`, plus 24 supporting files under `assets/carousel-images/`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/carousel-orbit-2.json"
   compositionId="carousel-orbit-2"
@@ -1041,12 +1047,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add carousel-orbit-2" item="carousel-orbit-2" />
-
-That writes `compositions/carousel-orbit-2.html`, plus 24 supporting files under `assets/carousel-images/`.
-
 ## Add it to your video
 
 It runs for 6 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/carousel-orbit-3.mdx b/docs/catalog/blocks/carousel-orbit-3.mdx
index fc1636de2a..d4e9f13bae 100644
--- a/docs/catalog/blocks/carousel-orbit-3.mdx
+++ b/docs/catalog/blocks/carousel-orbit-3.mdx
@@ -6,6 +6,12 @@ description: "Image cards on a spinning 3D Fibonacci sphere, billboarded to the
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add carousel-orbit-3" item="carousel-orbit-3" />
+
+That writes `compositions/carousel-orbit-3.html`, plus 24 supporting files under `assets/carousel-images/`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/carousel-orbit-3.json"
   compositionId="carousel-orbit-3"
@@ -1041,12 +1047,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add carousel-orbit-3" item="carousel-orbit-3" />
-
-That writes `compositions/carousel-orbit-3.html`, plus 24 supporting files under `assets/carousel-images/`.
-
 ## Add it to your video
 
 It runs for 6 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/carousel-orbit-4.mdx b/docs/catalog/blocks/carousel-orbit-4.mdx
index ca20847b91..f9d1d3a446 100644
--- a/docs/catalog/blocks/carousel-orbit-4.mdx
+++ b/docs/catalog/blocks/carousel-orbit-4.mdx
@@ -6,6 +6,12 @@ description: "Image cards on a spinning 3D Fibonacci sphere, billboarded to the
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add carousel-orbit-4" item="carousel-orbit-4" />
+
+That writes `compositions/carousel-orbit-4.html`, plus 24 supporting files under `assets/carousel-images/`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/carousel-orbit-4.json"
   compositionId="carousel-orbit-4"
@@ -1057,12 +1063,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add carousel-orbit-4" item="carousel-orbit-4" />
-
-That writes `compositions/carousel-orbit-4.html`, plus 24 supporting files under `assets/carousel-images/`.
-
 ## Add it to your video
 
 It runs for 6 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/carousel-orbit-5.mdx b/docs/catalog/blocks/carousel-orbit-5.mdx
index 83f09a49b7..3e444cc16c 100644
--- a/docs/catalog/blocks/carousel-orbit-5.mdx
+++ b/docs/catalog/blocks/carousel-orbit-5.mdx
@@ -6,6 +6,12 @@ description: "Image cards on a spinning 3D Fibonacci sphere, billboarded to the
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add carousel-orbit-5" item="carousel-orbit-5" />
+
+That writes `compositions/carousel-orbit-5.html`, plus 24 supporting files under `assets/carousel-images/`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/carousel-orbit-5.json"
   compositionId="carousel-orbit-5"
@@ -1041,12 +1047,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add carousel-orbit-5" item="carousel-orbit-5" />
-
-That writes `compositions/carousel-orbit-5.html`, plus 24 supporting files under `assets/carousel-images/`.
-
 ## Add it to your video
 
 It runs for 6 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/carousel-path-1.mdx b/docs/catalog/blocks/carousel-path-1.mdx
index 032e897b99..f0817e3aab 100644
--- a/docs/catalog/blocks/carousel-path-1.mdx
+++ b/docs/catalog/blocks/carousel-path-1.mdx
@@ -6,6 +6,12 @@ description: "Image cards ride an open bezier path (arc, V, diagonal, wave, S-cu
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add carousel-path-1" item="carousel-path-1" />
+
+That writes `compositions/carousel-path-1.html`, plus 24 supporting files under `assets/carousel-images/`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/carousel-path-1.json"
   compositionId="carousel-path-1"
@@ -1063,12 +1069,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add carousel-path-1" item="carousel-path-1" />
-
-That writes `compositions/carousel-path-1.html`, plus 24 supporting files under `assets/carousel-images/`.
-
 ## Add it to your video
 
 It runs for 6 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/carousel-path-2.mdx b/docs/catalog/blocks/carousel-path-2.mdx
index bbe3fe9368..5de8326eee 100644
--- a/docs/catalog/blocks/carousel-path-2.mdx
+++ b/docs/catalog/blocks/carousel-path-2.mdx
@@ -6,6 +6,12 @@ description: "Image cards ride an open bezier path (arc, V, diagonal, wave, S-cu
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add carousel-path-2" item="carousel-path-2" />
+
+That writes `compositions/carousel-path-2.html`, plus 12 supporting files under `assets/carousel-images/`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/carousel-path-2.json"
   compositionId="carousel-path-2"
@@ -1020,12 +1026,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add carousel-path-2" item="carousel-path-2" />
-
-That writes `compositions/carousel-path-2.html`, plus 12 supporting files under `assets/carousel-images/`.
-
 ## Add it to your video
 
 It runs for 6 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/carousel-path-3.mdx b/docs/catalog/blocks/carousel-path-3.mdx
index d46384f78d..b9cdb4b9fa 100644
--- a/docs/catalog/blocks/carousel-path-3.mdx
+++ b/docs/catalog/blocks/carousel-path-3.mdx
@@ -6,6 +6,12 @@ description: "Image cards ride an open bezier path (arc, V, diagonal, wave, S-cu
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add carousel-path-3" item="carousel-path-3" />
+
+That writes `compositions/carousel-path-3.html`, plus 12 supporting files under `assets/carousel-images/`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/carousel-path-3.json"
   compositionId="carousel-path-3"
@@ -1034,12 +1040,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add carousel-path-3" item="carousel-path-3" />
-
-That writes `compositions/carousel-path-3.html`, plus 12 supporting files under `assets/carousel-images/`.
-
 ## Add it to your video
 
 It runs for 6 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/carousel-path-4.mdx b/docs/catalog/blocks/carousel-path-4.mdx
index 2a10285c7d..989dd3b012 100644
--- a/docs/catalog/blocks/carousel-path-4.mdx
+++ b/docs/catalog/blocks/carousel-path-4.mdx
@@ -6,6 +6,12 @@ description: "Image cards ride an open bezier path (arc, V, diagonal, wave, S-cu
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add carousel-path-4" item="carousel-path-4" />
+
+That writes `compositions/carousel-path-4.html`, plus 24 supporting files under `assets/carousel-images/`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/carousel-path-4.json"
   compositionId="carousel-path-4"
@@ -1063,12 +1069,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add carousel-path-4" item="carousel-path-4" />
-
-That writes `compositions/carousel-path-4.html`, plus 24 supporting files under `assets/carousel-images/`.
-
 ## Add it to your video
 
 It runs for 6 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/carousel-path-5.mdx b/docs/catalog/blocks/carousel-path-5.mdx
index 305f6eded4..91e323a336 100644
--- a/docs/catalog/blocks/carousel-path-5.mdx
+++ b/docs/catalog/blocks/carousel-path-5.mdx
@@ -6,6 +6,12 @@ description: "Image cards ride an open bezier path (arc, V, diagonal, wave, S-cu
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add carousel-path-5" item="carousel-path-5" />
+
+That writes `compositions/carousel-path-5.html`, plus 24 supporting files under `assets/carousel-images/`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/carousel-path-5.json"
   compositionId="carousel-path-5"
@@ -1062,12 +1068,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add carousel-path-5" item="carousel-path-5" />
-
-That writes `compositions/carousel-path-5.html`, plus 24 supporting files under `assets/carousel-images/`.
-
 ## Add it to your video
 
 It runs for 6 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/carousel-text-circle-1.mdx b/docs/catalog/blocks/carousel-text-circle-1.mdx
index 6bae7b829a..af0aa9bac1 100644
--- a/docs/catalog/blocks/carousel-text-circle-1.mdx
+++ b/docs/catalog/blocks/carousel-text-circle-1.mdx
@@ -6,6 +6,12 @@ description: "A headline mask-reveals word by word while a circle carousel conve
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add carousel-text-circle-1" item="carousel-text-circle-1" />
+
+That writes `compositions/carousel-text-circle-1.html`, plus 12 supporting files under `assets/carousel-images/`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/carousel-text-circle-1.json"
   compositionId="carousel-text-circle-1"
@@ -1060,12 +1066,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add carousel-text-circle-1" item="carousel-text-circle-1" />
-
-That writes `compositions/carousel-text-circle-1.html`, plus 12 supporting files under `assets/carousel-images/`.
-
 ## Add it to your video
 
 It runs for 5 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/carousel-text-circle-2.mdx b/docs/catalog/blocks/carousel-text-circle-2.mdx
index 79b779492e..4243a7aaac 100644
--- a/docs/catalog/blocks/carousel-text-circle-2.mdx
+++ b/docs/catalog/blocks/carousel-text-circle-2.mdx
@@ -6,6 +6,12 @@ description: "A headline mask-reveals word by word while a circle carousel conve
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add carousel-text-circle-2" item="carousel-text-circle-2" />
+
+That writes `compositions/carousel-text-circle-2.html`, plus 12 supporting files under `assets/carousel-images/`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/carousel-text-circle-2.json"
   compositionId="carousel-text-circle-2"
@@ -1060,12 +1066,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add carousel-text-circle-2" item="carousel-text-circle-2" />
-
-That writes `compositions/carousel-text-circle-2.html`, plus 12 supporting files under `assets/carousel-images/`.
-
 ## Add it to your video
 
 It runs for 5 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/carousel-text-circle-3.mdx b/docs/catalog/blocks/carousel-text-circle-3.mdx
index 00b648a665..07e1b6a8c6 100644
--- a/docs/catalog/blocks/carousel-text-circle-3.mdx
+++ b/docs/catalog/blocks/carousel-text-circle-3.mdx
@@ -6,6 +6,12 @@ description: "A headline mask-reveals word by word while a circle carousel conve
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add carousel-text-circle-3" item="carousel-text-circle-3" />
+
+That writes `compositions/carousel-text-circle-3.html`, plus 12 supporting files under `assets/carousel-images/`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/carousel-text-circle-3.json"
   compositionId="carousel-text-circle-3"
@@ -1060,12 +1066,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add carousel-text-circle-3" item="carousel-text-circle-3" />
-
-That writes `compositions/carousel-text-circle-3.html`, plus 12 supporting files under `assets/carousel-images/`.
-
 ## Add it to your video
 
 It runs for 5 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/carousel-text-circle-4.mdx b/docs/catalog/blocks/carousel-text-circle-4.mdx
index c991b73e62..80e836e9b9 100644
--- a/docs/catalog/blocks/carousel-text-circle-4.mdx
+++ b/docs/catalog/blocks/carousel-text-circle-4.mdx
@@ -6,6 +6,12 @@ description: "A headline mask-reveals word by word while a circle carousel conve
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add carousel-text-circle-4" item="carousel-text-circle-4" />
+
+That writes `compositions/carousel-text-circle-4.html`, plus 12 supporting files under `assets/carousel-images/`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/carousel-text-circle-4.json"
   compositionId="carousel-text-circle-4"
@@ -1060,12 +1066,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add carousel-text-circle-4" item="carousel-text-circle-4" />
-
-That writes `compositions/carousel-text-circle-4.html`, plus 12 supporting files under `assets/carousel-images/`.
-
 ## Add it to your video
 
 It runs for 5 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/carousel-text-circle-5.mdx b/docs/catalog/blocks/carousel-text-circle-5.mdx
index 1f7e0651c5..e28c6b1c40 100644
--- a/docs/catalog/blocks/carousel-text-circle-5.mdx
+++ b/docs/catalog/blocks/carousel-text-circle-5.mdx
@@ -6,6 +6,12 @@ description: "A headline mask-reveals word by word while a circle carousel conve
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add carousel-text-circle-5" item="carousel-text-circle-5" />
+
+That writes `compositions/carousel-text-circle-5.html`, plus 12 supporting files under `assets/carousel-images/`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/carousel-text-circle-5.json"
   compositionId="carousel-text-circle-5"
@@ -1060,12 +1066,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add carousel-text-circle-5" item="carousel-text-circle-5" />
-
-That writes `compositions/carousel-text-circle-5.html`, plus 12 supporting files under `assets/carousel-images/`.
-
 ## Add it to your video
 
 It runs for 5 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/carousel-vision-1.mdx b/docs/catalog/blocks/carousel-vision-1.mdx
index 5ee18cc1aa..badfb9d11f 100644
--- a/docs/catalog/blocks/carousel-vision-1.mdx
+++ b/docs/catalog/blocks/carousel-vision-1.mdx
@@ -6,6 +6,12 @@ description: "A ring of large image cards tilted into a row under a 3D camera, e
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add carousel-vision-1" item="carousel-vision-1" />
+
+That writes `compositions/carousel-vision-1.html`, plus 12 supporting files under `assets/carousel-images/`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/carousel-vision-1.json"
   compositionId="carousel-vision-1"
@@ -1023,12 +1029,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add carousel-vision-1" item="carousel-vision-1" />
-
-That writes `compositions/carousel-vision-1.html`, plus 12 supporting files under `assets/carousel-images/`.
-
 ## Add it to your video
 
 It runs for 6 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/carousel-vision-2.mdx b/docs/catalog/blocks/carousel-vision-2.mdx
index cd8c50dece..90c10e9cf4 100644
--- a/docs/catalog/blocks/carousel-vision-2.mdx
+++ b/docs/catalog/blocks/carousel-vision-2.mdx
@@ -6,6 +6,12 @@ description: "A ring of large image cards tilted into a row under a 3D camera, e
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add carousel-vision-2" item="carousel-vision-2" />
+
+That writes `compositions/carousel-vision-2.html`, plus 12 supporting files under `assets/carousel-images/`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/carousel-vision-2.json"
   compositionId="carousel-vision-2"
@@ -1023,12 +1029,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add carousel-vision-2" item="carousel-vision-2" />
-
-That writes `compositions/carousel-vision-2.html`, plus 12 supporting files under `assets/carousel-images/`.
-
 ## Add it to your video
 
 It runs for 6 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/carousel-vision-3.mdx b/docs/catalog/blocks/carousel-vision-3.mdx
index fc296a857f..920b516a6c 100644
--- a/docs/catalog/blocks/carousel-vision-3.mdx
+++ b/docs/catalog/blocks/carousel-vision-3.mdx
@@ -6,6 +6,12 @@ description: "A ring of large image cards tilted into a row under a 3D camera, e
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add carousel-vision-3" item="carousel-vision-3" />
+
+That writes `compositions/carousel-vision-3.html`, plus 12 supporting files under `assets/carousel-images/`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/carousel-vision-3.json"
   compositionId="carousel-vision-3"
@@ -1023,12 +1029,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add carousel-vision-3" item="carousel-vision-3" />
-
-That writes `compositions/carousel-vision-3.html`, plus 12 supporting files under `assets/carousel-images/`.
-
 ## Add it to your video
 
 It runs for 6 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/carousel-vision-4.mdx b/docs/catalog/blocks/carousel-vision-4.mdx
index c361b67817..d9270daaf6 100644
--- a/docs/catalog/blocks/carousel-vision-4.mdx
+++ b/docs/catalog/blocks/carousel-vision-4.mdx
@@ -6,6 +6,12 @@ description: "A ring of large image cards tilted into a row under a 3D camera, e
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add carousel-vision-4" item="carousel-vision-4" />
+
+That writes `compositions/carousel-vision-4.html`, plus 12 supporting files under `assets/carousel-images/`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/carousel-vision-4.json"
   compositionId="carousel-vision-4"
@@ -1030,12 +1036,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add carousel-vision-4" item="carousel-vision-4" />
-
-That writes `compositions/carousel-vision-4.html`, plus 12 supporting files under `assets/carousel-images/`.
-
 ## Add it to your video
 
 It runs for 6 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/carousel-vision-5.mdx b/docs/catalog/blocks/carousel-vision-5.mdx
index 1affe26a97..80d527a9b0 100644
--- a/docs/catalog/blocks/carousel-vision-5.mdx
+++ b/docs/catalog/blocks/carousel-vision-5.mdx
@@ -6,6 +6,12 @@ description: "A ring of large image cards tilted into a row under a 3D camera, e
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add carousel-vision-5" item="carousel-vision-5" />
+
+That writes `compositions/carousel-vision-5.html`, plus 12 supporting files under `assets/carousel-images/`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/carousel-vision-5.json"
   compositionId="carousel-vision-5"
@@ -1023,12 +1029,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add carousel-vision-5" item="carousel-vision-5" />
-
-That writes `compositions/carousel-vision-5.html`, plus 12 supporting files under `assets/carousel-images/`.
-
 ## Add it to your video
 
 It runs for 6 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/chatgpt-exchange.mdx b/docs/catalog/blocks/chatgpt-exchange.mdx
index 6fd1865e3d..2159efe5df 100644
--- a/docs/catalog/blocks/chatgpt-exchange.mdx
+++ b/docs/catalog/blocks/chatgpt-exchange.mdx
@@ -5,6 +5,12 @@ description: "A portrait ChatGPT-style exchange types and sends a prompt, stream
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add chatgpt-exchange" item="chatgpt-exchange" />
+
+That writes `compositions/chatgpt-exchange.html`, plus 5 supporting files under `assets/fonts/`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="chatgpt-exchange preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/chatgpt-exchange.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/chatgpt-exchange.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add chatgpt-exchange" item="chatgpt-exchange" />
-
-That writes `compositions/chatgpt-exchange.html`, plus 5 supporting files under `assets/fonts/`.
-
 ## Add it to your video
 
 It runs for 14.9 seconds at 1080×1920. Paste this into your composition:
@@ -1413,6 +1413,75 @@ Move it in time with `data-start`. Put it on a different timeline row with
         tRead + T.readbackDur - 0.35,
       );
 
+      /* ---- caret-following scroll in the composer.
+         `prompt` is an editable slot, but `.comp-text` is a fixed-width single line with
+         `white-space: pre` inside a composer that clips, and the packaged prompt already reaches
+         the mic. A longer one therefore slides under the mic and the send button and loses its
+         tail, with the caret hidden behind them -- the remix looks like it typed into nowhere.
+         A real single-line input scrolls its text left to keep the caret in view; this does the
+         same, on the very times the reveal already uses. Shrinking the type instead was the other
+         option and it is worse: it would shrink the packaged prompt too, since that prompt has no
+         headroom, and it still cannot absorb a prompt twice as long without becoming unreadable.
+         A prompt that fits emits no keyframes at all, so the packaged composition is untouched. */
+      const compTextEl = composer.querySelector("#cge-comp-text");
+      // The obstacle is the opaque round button, not the mic: the packaged prompt's caret already
+      // sits 2px past the mic's left edge, so measuring to the mic would scroll the packaged
+      // composition. The caret has 35px of clearance to the button, which is the real boundary.
+      const compStopEl = composer.querySelector("#cge-blue-btn");
+      const CARET_PAD = 8;
+      // The rebuild below has to discard exactly what the previous pass added, and `tl.to()`
+      // returns the TIMELINE, not the tween it just created -- so collecting those return values
+      // and killing them on the second pass kills the master timeline, and the composition stops
+      // dead. It only bites when there are keyframes to discard, i.e. an overflowing prompt: the
+      // exact remix this scroll exists for, and why a packaged-defaults render never saw it.
+      // One nested child timeline is a real object that can be killed and replaced, and killing
+      // it cannot reach `tl`.
+      let caretTl = null;
+      const layoutCaretScroll = () => {
+        if (caretTl) {
+          caretTl.kill();
+          caretTl = null;
+          // Only ever touch typedEl when there was scrolling to undo. A zero translate — or even
+          // a clearProps on an untouched element — stamps and removes a transform, which changes
+          // how the text rasterizes and makes the packaged render differ for no reason.
+          gsap.set(typedEl, { clearProps: "transform" });
+        }
+        if (!compTextEl || !compStopEl) return;
+        // Rects live in the scaled .screen space while offsets are layout px, so convert with the
+        // element's own ratio rather than reading --scale -- this then survives a change to it.
+        const box = compTextEl.getBoundingClientRect();
+        const ratio = compTextEl.offsetWidth ? box.width / compTextEl.offsetWidth : 1;
+        const limit =
+          (compStopEl.getBoundingClientRect().left - box.left) / (ratio || 1) - CARET_PAD;
+        if (!(limit > 0)) return;
+        // Collect the steps first, so a prompt that fits leaves typedEl alone entirely.
+        const steps = [];
+        let shift = 0;
+        chars.forEach((c, i) => {
+          const caret = curEls[i + 1];
+          if (!caret) return;
+          const want = Math.max(0, caret.offsetLeft - limit);
+          if (want > shift + 0.5) {
+            shift = want;
+            steps.push([charT[i], -shift]);
+          }
+        });
+        if (!steps.length) return;
+        // Children sit at the same absolute times as before, and the nest is added at 0, so the
+        // nested timeline's local clock is the master's -- the motion is unchanged.
+        caretTl = gsap.timeline();
+        steps.forEach(([at, x]) => {
+          caretTl.to(typedEl, { x, duration: 0.08, ease: "none" }, at);
+        });
+        // Back to the start when the composer empties, so the collapse animates from x=0.
+        caretTl.to(typedEl, { x: 0, duration: 0.01 }, tGo);
+        tl.add(caretTl, 0);
+      };
+      layoutCaretScroll();
+      // This composition builds its timeline once, so the first pass measures whatever font was
+      // live then. Re-measure when the embedded faces are ready.
+      document.fonts.ready.then(layoutCaretScroll);
+
       window.__timelines["chatgpt-exchange"] = tl;
     </script>
   </body>
diff --git a/docs/catalog/blocks/chromatic-radial-split.mdx b/docs/catalog/blocks/chromatic-radial-split.mdx
index 31bdf55a8b..d85128ab8d 100644
--- a/docs/catalog/blocks/chromatic-radial-split.mdx
+++ b/docs/catalog/blocks/chromatic-radial-split.mdx
@@ -5,6 +5,12 @@ description: "Shader transition with chromatic aberration radial split"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add chromatic-radial-split" item="chromatic-radial-split" />
+
+That writes one file: `compositions/chromatic-radial-split.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="chromatic-radial-split preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/chromatic-radial-split.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/chromatic-radial-split.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add chromatic-radial-split" item="chromatic-radial-split" />
-
-That writes one file: `compositions/chromatic-radial-split.html`.
-
 ## Source
 
 <Accordion title={`chromatic-radial-split.html`}>
diff --git a/docs/catalog/blocks/cinematic-zoom.mdx b/docs/catalog/blocks/cinematic-zoom.mdx
index 632e8cc02c..c759a70425 100644
--- a/docs/catalog/blocks/cinematic-zoom.mdx
+++ b/docs/catalog/blocks/cinematic-zoom.mdx
@@ -5,6 +5,12 @@ description: "Shader transition with dramatic zoom blur"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add cinematic-zoom" item="cinematic-zoom" />
+
+That writes one file: `compositions/cinematic-zoom.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="cinematic-zoom preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/cinematic-zoom.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cinematic-zoom.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add cinematic-zoom" item="cinematic-zoom" />
-
-That writes one file: `compositions/cinematic-zoom.html`.
-
 ## Source
 
 <Accordion title={`cinematic-zoom.html`}>
diff --git a/docs/catalog/blocks/claude-exchange.mdx b/docs/catalog/blocks/claude-exchange.mdx
index 7f2cf229f1..28c336aeec 100644
--- a/docs/catalog/blocks/claude-exchange.mdx
+++ b/docs/catalog/blocks/claude-exchange.mdx
@@ -5,6 +5,12 @@ description: "A portrait Claude-style exchange types a prompt, works through sea
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add claude-exchange" item="claude-exchange" />
+
+That writes `compositions/claude-exchange.html`, plus 8 supporting files under `assets/fonts/`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="claude-exchange preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/claude-exchange.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/claude-exchange.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add claude-exchange" item="claude-exchange" />
-
-That writes `compositions/claude-exchange.html`, plus 8 supporting files under `assets/fonts/`.
-
 ## Add it to your video
 
 It runs for 21.4 seconds at 1080×1920. Paste this into your composition:
@@ -1626,6 +1626,54 @@ Move it in time with `data-start`. Put it on a different timeline row with
         // the minute rolls over between the source frames — keep that
         tl.to(document.getElementById("cle-clock-early"), { autoAlpha: 0, duration: 0.01 }, 8.4);
         tl.to(document.getElementById("cle-clock-late"), { autoAlpha: 1, duration: 0.01 }, 8.4);
+
+        /* ---- caret-following scroll in the composer.
+           `prompt` is an editable slot, but `.comp-text` is a fixed-width single line with
+           `white-space: pre` inside a composer that clips, and the packaged prompt already
+           reaches the mic. A longer one therefore slides under the mic and the send button and
+           loses its tail, with the caret hidden behind them. A real single-line input scrolls its
+           text left to keep the caret in view; this does the same, on the very times the reveal
+           already uses. Shrinking the type instead would shrink the packaged prompt too, since
+           that prompt has no headroom, and still could not absorb a prompt twice as long without
+           becoming unreadable. A prompt that fits emits no keyframes, so the packaged
+           composition is untouched. Lives inside build(), which is re-run once the embedded
+           faces are ready, so the measurement is taken against the final font. */
+        const compTextEl = composer.querySelector("#cle-comp-text");
+        // The obstacle is the opaque round button, not the mic glyph the text may abut. Take the
+        // leftmost of the two that occupy that corner, since one swaps in for the other.
+        const compStops = ["#cle-voice-btn", "#cle-send-btn"]
+          .map((sel) => composer.querySelector(sel))
+          .filter(Boolean);
+        const CARET_PAD = 8;
+        if (compTextEl && compStops.length) {
+          // Rects live in the scaled .screen space while offsets are layout px, so convert with
+          // the element's own ratio rather than reading --scale.
+          const box = compTextEl.getBoundingClientRect();
+          const ratio = compTextEl.offsetWidth ? box.width / compTextEl.offsetWidth : 1;
+          const stopLeft = Math.min(...compStops.map((el) => el.getBoundingClientRect().left));
+          const limit = (stopLeft - box.left) / (ratio || 1) - CARET_PAD;
+          if (limit > 0) {
+            // Collect the steps first, so a prompt that fits leaves typedEl alone entirely: even a
+            // zero translate stamps a transform, which changes how the text rasterizes and would
+            // make the packaged render differ from before for no reason.
+            const steps = [];
+            let shift = 0;
+            chars.forEach((c, i) => {
+              const caret = curEls[i + 1];
+              if (!caret) return;
+              const want = Math.max(0, caret.offsetLeft - limit);
+              if (want > shift + 0.5) {
+                shift = want;
+                steps.push([charT[i], -shift]);
+              }
+            });
+            if (steps.length) {
+              steps.forEach(([at, x]) => tl.to(typedEl, { x, duration: 0.08, ease: "none" }, at));
+              // Back to the start when the composer empties, so the collapse animates from x=0.
+              tl.to(typedEl, { x: 0, duration: 0.01 }, tGo);
+            }
+          }
+        }
       }
 
       build();
diff --git a/docs/catalog/blocks/code-3d-extrude.mdx b/docs/catalog/blocks/code-3d-extrude.mdx
index 497881b0a0..2e9489d9e9 100644
--- a/docs/catalog/blocks/code-3d-extrude.mdx
+++ b/docs/catalog/blocks/code-3d-extrude.mdx
@@ -5,6 +5,12 @@ description: "Syntax-highlighted code on a lit, beveled 3D slab that rotates thr
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add code-3d-extrude" item="code-3d-extrude" />
+
+That writes one file: `compositions/code-3d-extrude.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="code-3d-extrude preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-3d-extrude.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-3d-extrude.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add code-3d-extrude" item="code-3d-extrude" />
-
-That writes one file: `compositions/code-3d-extrude.html`.
-
 ## Source
 
 <Accordion title={`code-3d-extrude.html`}>
diff --git a/docs/catalog/blocks/code-diff.mdx b/docs/catalog/blocks/code-diff.mdx
index f076cd831d..b831660e51 100644
--- a/docs/catalog/blocks/code-diff.mdx
+++ b/docs/catalog/blocks/code-diff.mdx
@@ -5,6 +5,12 @@ description: "An edit shown as a colored diff — removed lines collapse in red,
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add code-diff" item="code-diff" />
+
+That writes one file: `compositions/code-diff.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="code-diff preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-diff.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-diff.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add code-diff" item="code-diff" />
-
-That writes one file: `compositions/code-diff.html`.
-
 ## Source
 
 <Accordion title={`code-diff.html`}>
diff --git a/docs/catalog/blocks/code-highlight.mdx b/docs/catalog/blocks/code-highlight.mdx
index 498ab8f7cd..e9d3ba3e15 100644
--- a/docs/catalog/blocks/code-highlight.mdx
+++ b/docs/catalog/blocks/code-highlight.mdx
@@ -5,6 +5,12 @@ description: "A highlight band sweeps across a target line while the surrounding
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add code-highlight" item="code-highlight" />
+
+That writes one file: `compositions/code-highlight.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="code-highlight preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-highlight.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-highlight.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add code-highlight" item="code-highlight" />
-
-That writes one file: `compositions/code-highlight.html`.
-
 ## Source
 
 <Accordion title={`code-highlight.html`}>
diff --git a/docs/catalog/blocks/code-morph.mdx b/docs/catalog/blocks/code-morph.mdx
index 021786f270..eee188bf0d 100644
--- a/docs/catalog/blocks/code-morph.mdx
+++ b/docs/catalog/blocks/code-morph.mdx
@@ -5,6 +5,12 @@ description: "One snippet transforms into another — tokens glide between posit
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add code-morph" item="code-morph" />
+
+That writes one file: `compositions/code-morph.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="code-morph preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-morph.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-morph.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add code-morph" item="code-morph" />
-
-That writes one file: `compositions/code-morph.html`.
-
 ## Source
 
 <Accordion title={`code-morph.html`}>
diff --git a/docs/catalog/blocks/code-particle-assemble.mdx b/docs/catalog/blocks/code-particle-assemble.mdx
index 4f65559a54..2223682263 100644
--- a/docs/catalog/blocks/code-particle-assemble.mdx
+++ b/docs/catalog/blocks/code-particle-assemble.mdx
@@ -5,6 +5,12 @@ description: "Thousands of GPU points scatter through space and fly to the exact
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add code-particle-assemble" item="code-particle-assemble" />
+
+That writes one file: `compositions/code-particle-assemble.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="code-particle-assemble preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-particle-assemble.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-particle-assemble.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add code-particle-assemble" item="code-particle-assemble" />
-
-That writes one file: `compositions/code-particle-assemble.html`.
-
 ## Source
 
 <Accordion title={`code-particle-assemble.html`}>
diff --git a/docs/catalog/blocks/code-scroll.mdx b/docs/catalog/blocks/code-scroll.mdx
index 38a4e1a7d3..31e4f4de0f 100644
--- a/docs/catalog/blocks/code-scroll.mdx
+++ b/docs/catalog/blocks/code-scroll.mdx
@@ -5,6 +5,12 @@ description: "The camera scrolls a long file to bring a target line to center an
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add code-scroll" item="code-scroll" />
+
+That writes one file: `compositions/code-scroll.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="code-scroll preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-scroll.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-scroll.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add code-scroll" item="code-scroll" />
-
-That writes one file: `compositions/code-scroll.html`.
-
 ## Source
 
 <Accordion title={`code-scroll.html`}>
diff --git a/docs/catalog/blocks/code-shader-dissolve.mdx b/docs/catalog/blocks/code-shader-dissolve.mdx
index 12c7bb416f..7002804e33 100644
--- a/docs/catalog/blocks/code-shader-dissolve.mdx
+++ b/docs/catalog/blocks/code-shader-dissolve.mdx
@@ -5,6 +5,12 @@ description: "The code compiles into existence: a GPU fragment shader resolves i
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add code-shader-dissolve" item="code-shader-dissolve" />
+
+That writes one file: `compositions/code-shader-dissolve.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="code-shader-dissolve preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-shader-dissolve.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-shader-dissolve.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add code-shader-dissolve" item="code-shader-dissolve" />
-
-That writes one file: `compositions/code-shader-dissolve.html`.
-
 ## Source
 
 <Accordion title={`code-shader-dissolve.html`}>
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx
index b51023f491..f03ad7f34f 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx
@@ -5,6 +5,12 @@ description: "Apple Terminal Basic profile: white background, black text, per-ch
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-basic" item="code-snippet-apple-terminal-basic" />
+
+That writes one file: `compositions/code-snippet-apple-terminal-basic.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="code-snippet-apple-terminal-basic preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-apple-terminal-basic.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-basic.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-basic" item="code-snippet-apple-terminal-basic" />
-
-That writes one file: `compositions/code-snippet-apple-terminal-basic.html`.
-
 ## Source
 
 <Accordion title={`code-snippet-apple-terminal-basic.html`}>
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-clear-dark.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-clear-dark.mdx
index 2828512485..e479ab093c 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-clear-dark.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-clear-dark.mdx
@@ -5,6 +5,12 @@ description: "Apple Terminal Clear Dark profile: semi-transparent dark backgroun
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-clear-dark" item="code-snippet-apple-terminal-clear-dark" />
+
+That writes one file: `compositions/code-snippet-apple-terminal-clear-dark.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="code-snippet-apple-terminal-clear-dark preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-apple-terminal-clear-dark.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-dark.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-clear-dark" item="code-snippet-apple-terminal-clear-dark" />
-
-That writes one file: `compositions/code-snippet-apple-terminal-clear-dark.html`.
-
 ## Source
 
 <Accordion title={`code-snippet-apple-terminal-clear-dark.html`}>
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-clear-light.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-clear-light.mdx
index 91b24d91e6..3bb4733b47 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-clear-light.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-clear-light.mdx
@@ -5,6 +5,12 @@ description: "Apple Terminal Clear Light profile: semi-transparent light backgro
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-clear-light" item="code-snippet-apple-terminal-clear-light" />
+
+That writes one file: `compositions/code-snippet-apple-terminal-clear-light.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="code-snippet-apple-terminal-clear-light preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-apple-terminal-clear-light.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-light.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-clear-light" item="code-snippet-apple-terminal-clear-light" />
-
-That writes one file: `compositions/code-snippet-apple-terminal-clear-light.html`.
-
 ## Source
 
 <Accordion title={`code-snippet-apple-terminal-clear-light.html`}>
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-grass.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-grass.mdx
index 4f06746baa..0a95b3a476 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-grass.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-grass.mdx
@@ -5,6 +5,12 @@ description: "Apple Terminal Grass profile: black background with green text, pe
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-grass" item="code-snippet-apple-terminal-grass" />
+
+That writes one file: `compositions/code-snippet-apple-terminal-grass.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="code-snippet-apple-terminal-grass preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-apple-terminal-grass.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-grass.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-grass" item="code-snippet-apple-terminal-grass" />
-
-That writes one file: `compositions/code-snippet-apple-terminal-grass.html`.
-
 ## Source
 
 <Accordion title={`code-snippet-apple-terminal-grass.html`}>
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-homebrew.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-homebrew.mdx
index 348bfbcf75..53b863694a 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-homebrew.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-homebrew.mdx
@@ -5,6 +5,12 @@ description: "Apple Terminal Homebrew profile: black background with bright gree
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-homebrew" item="code-snippet-apple-terminal-homebrew" />
+
+That writes one file: `compositions/code-snippet-apple-terminal-homebrew.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="code-snippet-apple-terminal-homebrew preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-apple-terminal-homebrew.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-homebrew.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-homebrew" item="code-snippet-apple-terminal-homebrew" />
-
-That writes one file: `compositions/code-snippet-apple-terminal-homebrew.html`.
-
 ## Source
 
 <Accordion title={`code-snippet-apple-terminal-homebrew.html`}>
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-man-page.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-man-page.mdx
index 0644ff13a5..c85b53793a 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-man-page.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-man-page.mdx
@@ -5,6 +5,12 @@ description: "Apple Terminal Man Page profile: pale yellow background with black
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-man-page" item="code-snippet-apple-terminal-man-page" />
+
+That writes one file: `compositions/code-snippet-apple-terminal-man-page.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="code-snippet-apple-terminal-man-page preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-apple-terminal-man-page.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-man-page.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-man-page" item="code-snippet-apple-terminal-man-page" />
-
-That writes one file: `compositions/code-snippet-apple-terminal-man-page.html`.
-
 ## Source
 
 <Accordion title={`code-snippet-apple-terminal-man-page.html`}>
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-novel.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-novel.mdx
index a237802b96..c275d9dfd8 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-novel.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-novel.mdx
@@ -5,6 +5,12 @@ description: "Apple Terminal Novel profile: warm parchment background with dark
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-novel" item="code-snippet-apple-terminal-novel" />
+
+That writes one file: `compositions/code-snippet-apple-terminal-novel.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="code-snippet-apple-terminal-novel preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-apple-terminal-novel.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-novel.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-novel" item="code-snippet-apple-terminal-novel" />
-
-That writes one file: `compositions/code-snippet-apple-terminal-novel.html`.
-
 ## Source
 
 <Accordion title={`code-snippet-apple-terminal-novel.html`}>
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-ocean.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-ocean.mdx
index 48576b8b56..7388edaeb9 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-ocean.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-ocean.mdx
@@ -5,6 +5,12 @@ description: "Apple Terminal Ocean profile: deep blue background with white text
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-ocean" item="code-snippet-apple-terminal-ocean" />
+
+That writes one file: `compositions/code-snippet-apple-terminal-ocean.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="code-snippet-apple-terminal-ocean preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-apple-terminal-ocean.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-ocean.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-ocean" item="code-snippet-apple-terminal-ocean" />
-
-That writes one file: `compositions/code-snippet-apple-terminal-ocean.html`.
-
 ## Source
 
 <Accordion title={`code-snippet-apple-terminal-ocean.html`}>
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-pro.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-pro.mdx
index 768b50dd97..e454c63c23 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-pro.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-pro.mdx
@@ -5,6 +5,12 @@ description: "Apple Terminal Pro profile: black background with grey text and li
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-pro" item="code-snippet-apple-terminal-pro" />
+
+That writes one file: `compositions/code-snippet-apple-terminal-pro.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="code-snippet-apple-terminal-pro preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-apple-terminal-pro.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-pro.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-pro" item="code-snippet-apple-terminal-pro" />
-
-That writes one file: `compositions/code-snippet-apple-terminal-pro.html`.
-
 ## Source
 
 <Accordion title={`code-snippet-apple-terminal-pro.html`}>
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-red-sands.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-red-sands.mdx
index b0d174e898..4ac7f431f3 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-red-sands.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-red-sands.mdx
@@ -5,6 +5,12 @@ description: "Apple Terminal Red Sands profile: deep red background with sandy t
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-red-sands" item="code-snippet-apple-terminal-red-sands" />
+
+That writes one file: `compositions/code-snippet-apple-terminal-red-sands.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="code-snippet-apple-terminal-red-sands preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-apple-terminal-red-sands.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-red-sands.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-red-sands" item="code-snippet-apple-terminal-red-sands" />
-
-That writes one file: `compositions/code-snippet-apple-terminal-red-sands.html`.
-
 ## Source
 
 <Accordion title={`code-snippet-apple-terminal-red-sands.html`}>
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mdx
index f7207d55c9..7f63b1e4c1 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mdx
@@ -5,6 +5,12 @@ description: "Apple Terminal Silver Aerogel profile: dark grey background with w
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-silver-aerogel" item="code-snippet-apple-terminal-silver-aerogel" />
+
+That writes one file: `compositions/code-snippet-apple-terminal-silver-aerogel.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="code-snippet-apple-terminal-silver-aerogel preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-silver-aerogel" item="code-snippet-apple-terminal-silver-aerogel" />
-
-That writes one file: `compositions/code-snippet-apple-terminal-silver-aerogel.html`.
-
 ## Source
 
 <Accordion title={`code-snippet-apple-terminal-silver-aerogel.html`}>
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-solid-colors.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-solid-colors.mdx
index 2984e593f4..ad13bdae72 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-solid-colors.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-solid-colors.mdx
@@ -5,6 +5,12 @@ description: "Apple Terminal Solid Colors profile: deep purple background with w
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-solid-colors" item="code-snippet-apple-terminal-solid-colors" />
+
+That writes one file: `compositions/code-snippet-apple-terminal-solid-colors.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="code-snippet-apple-terminal-solid-colors preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-apple-terminal-solid-colors.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-solid-colors.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add code-snippet-apple-terminal-solid-colors" item="code-snippet-apple-terminal-solid-colors" />
-
-That writes one file: `compositions/code-snippet-apple-terminal-solid-colors.html`.
-
 ## Source
 
 <Accordion title={`code-snippet-apple-terminal-solid-colors.html`}>
diff --git a/docs/catalog/blocks/code-snippet-dark-2026.mdx b/docs/catalog/blocks/code-snippet-dark-2026.mdx
index 3979f26b63..63db6ff379 100644
--- a/docs/catalog/blocks/code-snippet-dark-2026.mdx
+++ b/docs/catalog/blocks/code-snippet-dark-2026.mdx
@@ -5,6 +5,12 @@ description: "VS Code workbench with per-character typing animation in the Dark
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add code-snippet-dark-2026" item="code-snippet-dark-2026" />
+
+That writes `compositions/code-snippet-dark-2026.html`, plus 1 supporting file under `assets/`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="code-snippet-dark-2026 preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-dark-2026.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-2026.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add code-snippet-dark-2026" item="code-snippet-dark-2026" />
-
-That writes `compositions/code-snippet-dark-2026.html`, plus 1 supporting file under `assets/`.
-
 ## Source
 
 <Accordion title={`code-snippet-dark-2026.html`}>
diff --git a/docs/catalog/blocks/code-snippet-dark-modern.mdx b/docs/catalog/blocks/code-snippet-dark-modern.mdx
index 8070a3cf06..3be5a1eb2a 100644
--- a/docs/catalog/blocks/code-snippet-dark-modern.mdx
+++ b/docs/catalog/blocks/code-snippet-dark-modern.mdx
@@ -5,6 +5,12 @@ description: "VS Code workbench with per-character typing animation in the Dark
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add code-snippet-dark-modern" item="code-snippet-dark-modern" />
+
+That writes `compositions/code-snippet-dark-modern.html`, plus 1 supporting file under `assets/`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="code-snippet-dark-modern preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-dark-modern.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-modern.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add code-snippet-dark-modern" item="code-snippet-dark-modern" />
-
-That writes `compositions/code-snippet-dark-modern.html`, plus 1 supporting file under `assets/`.
-
 ## Source
 
 <Accordion title={`code-snippet-dark-modern.html`}>
diff --git a/docs/catalog/blocks/code-snippet-dark-plus.mdx b/docs/catalog/blocks/code-snippet-dark-plus.mdx
index 577ed67fbd..a5be4b0e78 100644
--- a/docs/catalog/blocks/code-snippet-dark-plus.mdx
+++ b/docs/catalog/blocks/code-snippet-dark-plus.mdx
@@ -5,6 +5,12 @@ description: "VS Code workbench with per-character typing animation in the Dark+
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add code-snippet-dark-plus" item="code-snippet-dark-plus" />
+
+That writes `compositions/code-snippet-dark-plus.html`, plus 1 supporting file under `assets/`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="code-snippet-dark-plus preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-dark-plus.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-plus.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add code-snippet-dark-plus" item="code-snippet-dark-plus" />
-
-That writes `compositions/code-snippet-dark-plus.html`, plus 1 supporting file under `assets/`.
-
 ## Source
 
 <Accordion title={`code-snippet-dark-plus.html`}>
diff --git a/docs/catalog/blocks/code-snippet-flight.mdx b/docs/catalog/blocks/code-snippet-flight.mdx
index 2e89461e48..e68df3d37b 100644
--- a/docs/catalog/blocks/code-snippet-flight.mdx
+++ b/docs/catalog/blocks/code-snippet-flight.mdx
@@ -5,6 +5,12 @@ description: "Discrete code snippets fly in from the side and assemble into a st
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add code-snippet-flight" item="code-snippet-flight" />
+
+That writes one file: `compositions/code-snippet-flight.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="code-snippet-flight preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-flight.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-flight.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add code-snippet-flight" item="code-snippet-flight" />
-
-That writes one file: `compositions/code-snippet-flight.html`.
-
 ## Source
 
 <Accordion title={`code-snippet-flight.html`}>
diff --git a/docs/catalog/blocks/code-snippet-high-contrast-light.mdx b/docs/catalog/blocks/code-snippet-high-contrast-light.mdx
index d4c07b5ea6..eda710a5f5 100644
--- a/docs/catalog/blocks/code-snippet-high-contrast-light.mdx
+++ b/docs/catalog/blocks/code-snippet-high-contrast-light.mdx
@@ -5,6 +5,12 @@ description: "VS Code workbench with per-character typing animation in the High
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add code-snippet-high-contrast-light" item="code-snippet-high-contrast-light" />
+
+That writes `compositions/code-snippet-high-contrast-light.html`, plus 1 supporting file under `assets/`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="code-snippet-high-contrast-light preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-high-contrast-light.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-high-contrast-light.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add code-snippet-high-contrast-light" item="code-snippet-high-contrast-light" />
-
-That writes `compositions/code-snippet-high-contrast-light.html`, plus 1 supporting file under `assets/`.
-
 ## Source
 
 <Accordion title={`code-snippet-high-contrast-light.html`}>
diff --git a/docs/catalog/blocks/code-snippet-high-contrast.mdx b/docs/catalog/blocks/code-snippet-high-contrast.mdx
index 09a3b89f52..3b643344ae 100644
--- a/docs/catalog/blocks/code-snippet-high-contrast.mdx
+++ b/docs/catalog/blocks/code-snippet-high-contrast.mdx
@@ -5,6 +5,12 @@ description: "VS Code workbench with per-character typing animation in the High
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add code-snippet-high-contrast" item="code-snippet-high-contrast" />
+
+That writes `compositions/code-snippet-high-contrast.html`, plus 1 supporting file under `assets/`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="code-snippet-high-contrast preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-high-contrast.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-high-contrast.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add code-snippet-high-contrast" item="code-snippet-high-contrast" />
-
-That writes `compositions/code-snippet-high-contrast.html`, plus 1 supporting file under `assets/`.
-
 ## Source
 
 <Accordion title={`code-snippet-high-contrast.html`}>
diff --git a/docs/catalog/blocks/code-snippet-light-2026.mdx b/docs/catalog/blocks/code-snippet-light-2026.mdx
index 24cf2f4755..9fa7e0c188 100644
--- a/docs/catalog/blocks/code-snippet-light-2026.mdx
+++ b/docs/catalog/blocks/code-snippet-light-2026.mdx
@@ -5,6 +5,12 @@ description: "VS Code workbench with per-character typing animation in the Light
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add code-snippet-light-2026" item="code-snippet-light-2026" />
+
+That writes `compositions/code-snippet-light-2026.html`, plus 1 supporting file under `assets/`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="code-snippet-light-2026 preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-light-2026.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-2026.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add code-snippet-light-2026" item="code-snippet-light-2026" />
-
-That writes `compositions/code-snippet-light-2026.html`, plus 1 supporting file under `assets/`.
-
 ## Source
 
 <Accordion title={`code-snippet-light-2026.html`}>
diff --git a/docs/catalog/blocks/code-snippet-light-modern.mdx b/docs/catalog/blocks/code-snippet-light-modern.mdx
index 3d788158ec..ec00def510 100644
--- a/docs/catalog/blocks/code-snippet-light-modern.mdx
+++ b/docs/catalog/blocks/code-snippet-light-modern.mdx
@@ -5,6 +5,12 @@ description: "VS Code workbench with per-character typing animation in the Light
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add code-snippet-light-modern" item="code-snippet-light-modern" />
+
+That writes `compositions/code-snippet-light-modern.html`, plus 1 supporting file under `assets/`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="code-snippet-light-modern preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-light-modern.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-modern.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add code-snippet-light-modern" item="code-snippet-light-modern" />
-
-That writes `compositions/code-snippet-light-modern.html`, plus 1 supporting file under `assets/`.
-
 ## Source
 
 <Accordion title={`code-snippet-light-modern.html`}>
diff --git a/docs/catalog/blocks/code-snippet-light-plus.mdx b/docs/catalog/blocks/code-snippet-light-plus.mdx
index cee700ddb7..47afbdbae0 100644
--- a/docs/catalog/blocks/code-snippet-light-plus.mdx
+++ b/docs/catalog/blocks/code-snippet-light-plus.mdx
@@ -5,6 +5,12 @@ description: "VS Code workbench with per-character typing animation in the Light
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add code-snippet-light-plus" item="code-snippet-light-plus" />
+
+That writes `compositions/code-snippet-light-plus.html`, plus 1 supporting file under `assets/`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="code-snippet-light-plus preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-light-plus.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-plus.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add code-snippet-light-plus" item="code-snippet-light-plus" />
-
-That writes `compositions/code-snippet-light-plus.html`, plus 1 supporting file under `assets/`.
-
 ## Source
 
 <Accordion title={`code-snippet-light-plus.html`}>
diff --git a/docs/catalog/blocks/code-snippet-monokai.mdx b/docs/catalog/blocks/code-snippet-monokai.mdx
index 25187ae44b..d1d45f8874 100644
--- a/docs/catalog/blocks/code-snippet-monokai.mdx
+++ b/docs/catalog/blocks/code-snippet-monokai.mdx
@@ -5,6 +5,12 @@ description: "VS Code workbench with per-character typing animation in the Monok
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add code-snippet-monokai" item="code-snippet-monokai" />
+
+That writes `compositions/code-snippet-monokai.html`, plus 1 supporting file under `assets/`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="code-snippet-monokai preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-monokai.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-monokai.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add code-snippet-monokai" item="code-snippet-monokai" />
-
-That writes `compositions/code-snippet-monokai.html`, plus 1 supporting file under `assets/`.
-
 ## Source
 
 <Accordion title={`code-snippet-monokai.html`}>
diff --git a/docs/catalog/blocks/code-snippet-solarized-light.mdx b/docs/catalog/blocks/code-snippet-solarized-light.mdx
index 654e0bccd8..b9a60cdcc0 100644
--- a/docs/catalog/blocks/code-snippet-solarized-light.mdx
+++ b/docs/catalog/blocks/code-snippet-solarized-light.mdx
@@ -5,6 +5,12 @@ description: "VS Code workbench with per-character typing animation in the Solar
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add code-snippet-solarized-light" item="code-snippet-solarized-light" />
+
+That writes `compositions/code-snippet-solarized-light.html`, plus 1 supporting file under `assets/`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="code-snippet-solarized-light preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-solarized-light.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-solarized-light.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add code-snippet-solarized-light" item="code-snippet-solarized-light" />
-
-That writes `compositions/code-snippet-solarized-light.html`, plus 1 supporting file under `assets/`.
-
 ## Source
 
 <Accordion title={`code-snippet-solarized-light.html`}>
diff --git a/docs/catalog/blocks/code-snippet-visual-studio-dark.mdx b/docs/catalog/blocks/code-snippet-visual-studio-dark.mdx
index 176607c7b2..1a4d63bf85 100644
--- a/docs/catalog/blocks/code-snippet-visual-studio-dark.mdx
+++ b/docs/catalog/blocks/code-snippet-visual-studio-dark.mdx
@@ -5,6 +5,12 @@ description: "VS Code workbench with per-character typing animation in the Visua
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add code-snippet-visual-studio-dark" item="code-snippet-visual-studio-dark" />
+
+That writes `compositions/code-snippet-visual-studio-dark.html`, plus 1 supporting file under `assets/`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="code-snippet-visual-studio-dark preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-visual-studio-dark.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-visual-studio-dark.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add code-snippet-visual-studio-dark" item="code-snippet-visual-studio-dark" />
-
-That writes `compositions/code-snippet-visual-studio-dark.html`, plus 1 supporting file under `assets/`.
-
 ## Source
 
 <Accordion title={`code-snippet-visual-studio-dark.html`}>
diff --git a/docs/catalog/blocks/code-snippet-visual-studio-light.mdx b/docs/catalog/blocks/code-snippet-visual-studio-light.mdx
index 98499ae4ef..df24f5c96e 100644
--- a/docs/catalog/blocks/code-snippet-visual-studio-light.mdx
+++ b/docs/catalog/blocks/code-snippet-visual-studio-light.mdx
@@ -5,6 +5,12 @@ description: "VS Code workbench with per-character typing animation in the Visua
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add code-snippet-visual-studio-light" item="code-snippet-visual-studio-light" />
+
+That writes `compositions/code-snippet-visual-studio-light.html`, plus 1 supporting file under `assets/`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="code-snippet-visual-studio-light preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-visual-studio-light.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-visual-studio-light.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add code-snippet-visual-studio-light" item="code-snippet-visual-studio-light" />
-
-That writes `compositions/code-snippet-visual-studio-light.html`, plus 1 supporting file under `assets/`.
-
 ## Source
 
 <Accordion title={`code-snippet-visual-studio-light.html`}>
diff --git a/docs/catalog/blocks/code-typing.mdx b/docs/catalog/blocks/code-typing.mdx
index 890acedba4..9c94a37d69 100644
--- a/docs/catalog/blocks/code-typing.mdx
+++ b/docs/catalog/blocks/code-typing.mdx
@@ -5,6 +5,12 @@ description: "Token-streamed typing reveal with a caret that tracks the frontier
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add code-typing" item="code-typing" />
+
+That writes one file: `compositions/code-typing.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="code-typing preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-typing.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-typing.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add code-typing" item="code-typing" />
-
-That writes one file: `compositions/code-typing.html`.
-
 ## Source
 
 <Accordion title={`code-typing.html`}>
diff --git a/docs/catalog/blocks/cosmic-orb.mdx b/docs/catalog/blocks/cosmic-orb.mdx
index 9c827adf7e..877d546685 100644
--- a/docs/catalog/blocks/cosmic-orb.mdx
+++ b/docs/catalog/blocks/cosmic-orb.mdx
@@ -6,6 +6,12 @@ description: "An iridescent soap-bubble planet: a slowly spinning sphere of nebu
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add cosmic-orb" item="cosmic-orb" />
+
+That writes one file: `compositions/cosmic-orb.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/cosmic-orb.json"
   compositionId="cosmic-orb"
@@ -449,12 +455,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add cosmic-orb" item="cosmic-orb" />
-
-That writes one file: `compositions/cosmic-orb.html`.
-
 ## Add it to your video
 
 It runs for 10 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/cross-warp-morph.mdx b/docs/catalog/blocks/cross-warp-morph.mdx
index 6ddd54fead..c0f0781973 100644
--- a/docs/catalog/blocks/cross-warp-morph.mdx
+++ b/docs/catalog/blocks/cross-warp-morph.mdx
@@ -5,6 +5,12 @@ description: "Shader transition with cross-warped morphing"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add cross-warp-morph" item="cross-warp-morph" />
+
+That writes one file: `compositions/cross-warp-morph.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="cross-warp-morph preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/cross-warp-morph.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cross-warp-morph.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add cross-warp-morph" item="cross-warp-morph" />
-
-That writes one file: `compositions/cross-warp-morph.html`.
-
 ## Source
 
 <Accordion title={`cross-warp-morph.html`}>
diff --git a/docs/catalog/blocks/data-chart.mdx b/docs/catalog/blocks/data-chart.mdx
index 48123f4a7d..8b93f3ebdc 100644
--- a/docs/catalog/blocks/data-chart.mdx
+++ b/docs/catalog/blocks/data-chart.mdx
@@ -5,6 +5,12 @@ description: "Animated bar + line chart with staggered reveal, NYT-style typogra
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add data-chart" item="data-chart" />
+
+That writes one file: `compositions/data-chart.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="data-chart preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/data-chart.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add data-chart" item="data-chart" />
-
-That writes one file: `compositions/data-chart.html`.
-
 ## Change the colors
 
 Set these CSS variables on the block:
diff --git a/docs/catalog/blocks/domain-warp-dissolve.mdx b/docs/catalog/blocks/domain-warp-dissolve.mdx
index c06073925c..a03d1daa8e 100644
--- a/docs/catalog/blocks/domain-warp-dissolve.mdx
+++ b/docs/catalog/blocks/domain-warp-dissolve.mdx
@@ -5,6 +5,12 @@ description: "Shader transition with fractal noise domain warping"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add domain-warp-dissolve" item="domain-warp-dissolve" />
+
+That writes one file: `compositions/domain-warp-dissolve.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="domain-warp-dissolve preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/domain-warp-dissolve.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/domain-warp-dissolve.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add domain-warp-dissolve" item="domain-warp-dissolve" />
-
-That writes one file: `compositions/domain-warp-dissolve.html`.
-
 ## Source
 
 <Accordion title={`domain-warp-dissolve.html`}>
diff --git a/docs/catalog/blocks/editorial-flash-overlay.mdx b/docs/catalog/blocks/editorial-flash-overlay.mdx
index d0f8d647ad..9acb7920be 100644
--- a/docs/catalog/blocks/editorial-flash-overlay.mdx
+++ b/docs/catalog/blocks/editorial-flash-overlay.mdx
@@ -5,6 +5,12 @@ description: "Finite neutral-warm light layers for a seek-safe camera-flash cut
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add editorial-flash-overlay" item="editorial-flash-overlay" />
+
+That writes one file: `compositions/editorial-flash-overlay.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="editorial-flash-overlay preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/editorial-flash-overlay.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/editorial-flash-overlay.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add editorial-flash-overlay" item="editorial-flash-overlay" />
-
-That writes one file: `compositions/editorial-flash-overlay.html`.
-
 ## Add it to your video
 
 It runs for 4 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/flash-through-white.mdx b/docs/catalog/blocks/flash-through-white.mdx
index e4d83dd57e..b6464bf314 100644
--- a/docs/catalog/blocks/flash-through-white.mdx
+++ b/docs/catalog/blocks/flash-through-white.mdx
@@ -5,6 +5,12 @@ description: "Shader transition with white flash crossfade"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add flash-through-white" item="flash-through-white" />
+
+That writes one file: `compositions/flash-through-white.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="flash-through-white preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/flash-through-white.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flash-through-white.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add flash-through-white" item="flash-through-white" />
-
-That writes one file: `compositions/flash-through-white.html`.
-
 ## Source
 
 <Accordion title={`flash-through-white.html`}>
diff --git a/docs/catalog/blocks/flowchart-vertical.mdx b/docs/catalog/blocks/flowchart-vertical.mdx
index bbe2c1ae2f..d69ccd9b93 100644
--- a/docs/catalog/blocks/flowchart-vertical.mdx
+++ b/docs/catalog/blocks/flowchart-vertical.mdx
@@ -5,6 +5,12 @@ description: "Portrait animated decision tree with SVG connectors, sticky-note n
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add flowchart-vertical" item="flowchart-vertical" />
+
+That writes one file: `compositions/flowchart-vertical.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="flowchart-vertical preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/flowchart-vertical.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart-vertical.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add flowchart-vertical" item="flowchart-vertical" />
-
-That writes one file: `compositions/flowchart-vertical.html`.
-
 ## Source
 
 <Accordion title={`flowchart-vertical.html`}>
diff --git a/docs/catalog/blocks/flowchart.mdx b/docs/catalog/blocks/flowchart.mdx
index 88b3b333e5..49e6f343f2 100644
--- a/docs/catalog/blocks/flowchart.mdx
+++ b/docs/catalog/blocks/flowchart.mdx
@@ -5,6 +5,12 @@ description: "Animated decision tree with SVG connectors, sticky-note nodes, cur
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add flowchart" item="flowchart" />
+
+That writes one file: `compositions/flowchart.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="flowchart preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/flowchart.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add flowchart" item="flowchart" />
-
-That writes one file: `compositions/flowchart.html`.
-
 ## Source
 
 <Accordion title={`flowchart.html`}>
diff --git a/docs/catalog/blocks/freeze-frame-dressing.mdx b/docs/catalog/blocks/freeze-frame-dressing.mdx
index f2d60f9e5e..699e734bfb 100644
--- a/docs/catalog/blocks/freeze-frame-dressing.mdx
+++ b/docs/catalog/blocks/freeze-frame-dressing.mdx
@@ -5,6 +5,12 @@ description: "Timeline-driven paper, tape, and flash dressing for a freeze-frame
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add freeze-frame-dressing" item="freeze-frame-dressing" />
+
+That writes one file: `compositions/freeze-frame-dressing.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="freeze-frame-dressing preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/freeze-frame-dressing.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/freeze-frame-dressing.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add freeze-frame-dressing" item="freeze-frame-dressing" />
-
-That writes one file: `compositions/freeze-frame-dressing.html`.
-
 ## Add it to your video
 
 It runs for 4 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/gallery-tunnel.mdx b/docs/catalog/blocks/gallery-tunnel.mdx
index f84eee4b7b..b07f249b40 100644
--- a/docs/catalog/blocks/gallery-tunnel.mdx
+++ b/docs/catalog/blocks/gallery-tunnel.mdx
@@ -6,6 +6,12 @@ description: "An infinite corridor of panels: a square tunnel receding to a vani
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add gallery-tunnel" item="gallery-tunnel" />
+
+That writes one file: `compositions/gallery-tunnel.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/gallery-tunnel.json"
   compositionId="gallery-tunnel"
@@ -472,12 +478,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add gallery-tunnel" item="gallery-tunnel" />
-
-That writes one file: `compositions/gallery-tunnel.html`.
-
 ## Add it to your video
 
 It runs for 12 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/glitch.mdx b/docs/catalog/blocks/glitch.mdx
index 3b4f2029ff..da1a205719 100644
--- a/docs/catalog/blocks/glitch.mdx
+++ b/docs/catalog/blocks/glitch.mdx
@@ -5,6 +5,12 @@ description: "Shader transition with digital glitch artifacts"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add glitch" item="glitch" />
+
+That writes one file: `compositions/glitch.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="glitch preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/glitch.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/glitch.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add glitch" item="glitch" />
-
-That writes one file: `compositions/glitch.html`.
-
 ## Source
 
 <Accordion title={`glitch.html`}>
diff --git a/docs/catalog/blocks/gravitational-lens.mdx b/docs/catalog/blocks/gravitational-lens.mdx
index 384a20502a..7a6018c46b 100644
--- a/docs/catalog/blocks/gravitational-lens.mdx
+++ b/docs/catalog/blocks/gravitational-lens.mdx
@@ -5,6 +5,12 @@ description: "Shader transition with gravitational lensing distortion"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add gravitational-lens" item="gravitational-lens" />
+
+That writes one file: `compositions/gravitational-lens.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="gravitational-lens preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/gravitational-lens.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/gravitational-lens.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add gravitational-lens" item="gravitational-lens" />
-
-That writes one file: `compositions/gravitational-lens.html`.
-
 ## Source
 
 <Accordion title={`gravitational-lens.html`}>
diff --git a/docs/catalog/blocks/halftone-field.mdx b/docs/catalog/blocks/halftone-field.mdx
index 822ecb640d..86ea4f3587 100644
--- a/docs/catalog/blocks/halftone-field.mdx
+++ b/docs/catalog/blocks/halftone-field.mdx
@@ -6,6 +6,12 @@ description: "A full-bleed halftone light field: a grid of dots whose size and c
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add halftone-field" item="halftone-field" />
+
+That writes one file: `compositions/halftone-field.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/halftone-field.json"
   compositionId="halftone-field"
@@ -396,12 +402,6 @@ void main() {
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add halftone-field" item="halftone-field" />
-
-That writes one file: `compositions/halftone-field.html`.
-
 ## Add it to your video
 
 It runs for 10 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/heygen-avatar-promo-card.mdx b/docs/catalog/blocks/heygen-avatar-promo-card.mdx
index 9644154c14..75b0f73b90 100644
--- a/docs/catalog/blocks/heygen-avatar-promo-card.mdx
+++ b/docs/catalog/blocks/heygen-avatar-promo-card.mdx
@@ -5,14 +5,14 @@ description: "A portrait HeyGen offer card pairs a moving avatar mosaic with bol
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/heygen-avatar-promo-card.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/heygen-avatar-promo-card.png" autoPlay muted loop playsInline />
-
 ## Install
 
 <InstallCommand command="npx hyperframes add heygen-avatar-promo-card" item="heygen-avatar-promo-card" />
 
 That writes `compositions/heygen-avatar-promo-card.html`, plus 15 supporting files under `assets/` and `assets/fonts/`.
 
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/heygen-avatar-promo-card.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/heygen-avatar-promo-card.png" autoPlay muted loop playsInline />
+
 ## Add it to your video
 
 It runs for 10 seconds at 1080×1920. Paste this into your composition:
diff --git a/docs/catalog/blocks/hw-frame.mdx b/docs/catalog/blocks/hw-frame.mdx
index ef1c3e4628..521c636eaa 100644
--- a/docs/catalog/blocks/hw-frame.mdx
+++ b/docs/catalog/blocks/hw-frame.mdx
@@ -5,6 +5,12 @@ description: "Media in a hand-drawn border with corner doodles and a handwritten
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add hw-frame" item="hw-frame" />
+
+That writes `compositions/hw-frame.html`, plus 1 supporting file under `assets/fonts/`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="hw-frame preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/hw-frame.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-frame.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add hw-frame" item="hw-frame" />
-
-That writes `compositions/hw-frame.html`, plus 1 supporting file under `assets/fonts/`.
-
 ## Add it to your video
 
 It runs for 8 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/hw-path-text.mdx b/docs/catalog/blocks/hw-path-text.mdx
index 649aee8d96..7c6937c656 100644
--- a/docs/catalog/blocks/hw-path-text.mdx
+++ b/docs/catalog/blocks/hw-path-text.mdx
@@ -5,6 +5,12 @@ description: "Handwriting flowing along any SVG path with a per-character reveal
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add hw-path-text" item="hw-path-text" />
+
+That writes `compositions/hw-path-text.html`, plus 1 supporting file under `assets/fonts/`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="hw-path-text preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/hw-path-text.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-path-text.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add hw-path-text" item="hw-path-text" />
-
-That writes `compositions/hw-path-text.html`, plus 1 supporting file under `assets/fonts/`.
-
 ## Add it to your video
 
 It runs for 6 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/hw-pipeline.mdx b/docs/catalog/blocks/hw-pipeline.mdx
index bbaf5f8bd5..bcd89f3074 100644
--- a/docs/catalog/blocks/hw-pipeline.mdx
+++ b/docs/catalog/blocks/hw-pipeline.mdx
@@ -5,6 +5,12 @@ description: "Wobbled boxes with handwritten labels joined by curved connectors,
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add hw-pipeline" item="hw-pipeline" />
+
+That writes `compositions/hw-pipeline.html`, plus 1 supporting file under `assets/fonts/`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="hw-pipeline preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/hw-pipeline.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-pipeline.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add hw-pipeline" item="hw-pipeline" />
-
-That writes `compositions/hw-pipeline.html`, plus 1 supporting file under `assets/fonts/`.
-
 ## Add it to your video
 
 It runs for 7 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/hw-scribble-transition.mdx b/docs/catalog/blocks/hw-scribble-transition.mdx
index 0e45a58916..9e94509ae0 100644
--- a/docs/catalog/blocks/hw-scribble-transition.mdx
+++ b/docs/catalog/blocks/hw-scribble-transition.mdx
@@ -5,6 +5,12 @@ description: "Overlay transition: scribble bands accumulate to cover the frame w
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add hw-scribble-transition" item="hw-scribble-transition" />
+
+That writes one file: `compositions/hw-scribble-transition.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="hw-scribble-transition preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/hw-scribble-transition.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-scribble-transition.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add hw-scribble-transition" item="hw-scribble-transition" />
-
-That writes one file: `compositions/hw-scribble-transition.html`.
-
 ## Add it to your video
 
 It runs for 2.2 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/hw-text-cloud.mdx b/docs/catalog/blocks/hw-text-cloud.mdx
index 539ce55a10..198f08d8ae 100644
--- a/docs/catalog/blocks/hw-text-cloud.mdx
+++ b/docs/catalog/blocks/hw-text-cloud.mdx
@@ -5,6 +5,12 @@ description: "Hand-drawn speech bubble with a positionable tail: outline draws o
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add hw-text-cloud" item="hw-text-cloud" />
+
+That writes `compositions/hw-text-cloud.html`, plus 1 supporting file under `assets/fonts/`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="hw-text-cloud preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/hw-text-cloud.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-text-cloud.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add hw-text-cloud" item="hw-text-cloud" />
-
-That writes `compositions/hw-text-cloud.html`, plus 1 supporting file under `assets/fonts/`.
-
 ## Add it to your video
 
 It runs for 6 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/hw-title.mdx b/docs/catalog/blocks/hw-title.mdx
index af8133c201..759cbe964a 100644
--- a/docs/catalog/blocks/hw-title.mdx
+++ b/docs/catalog/blocks/hw-title.mdx
@@ -5,6 +5,12 @@ description: "Handwritten display text with a scalar-driven word-by-word highlig
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add hw-title" item="hw-title" />
+
+That writes `compositions/hw-title.html`, plus 1 supporting file under `assets/fonts/`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="hw-title preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/hw-title.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-title.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add hw-title" item="hw-title" />
-
-That writes `compositions/hw-title.html`, plus 1 supporting file under `assets/fonts/`.
-
 ## Add it to your video
 
 It runs for 6 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/hw-write-title.mdx b/docs/catalog/blocks/hw-write-title.mdx
index 737fb16718..b5bc632346 100644
--- a/docs/catalog/blocks/hw-write-title.mdx
+++ b/docs/catalog/blocks/hw-write-title.mdx
@@ -5,14 +5,14 @@ description: "True glyph write-on: filled Caveat letterforms revealed by baked p
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-write-title.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-write-title.png" autoPlay muted loop playsInline />
-
 ## Install
 
 <InstallCommand command="npx hyperframes add hw-write-title" item="hw-write-title" />
 
 That writes `compositions/hw-write-title.html`, plus 2 supporting files under `assets/baked/` and `assets/fonts/`.
 
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-write-title.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-write-title.png" autoPlay muted loop playsInline />
+
 ## Add it to your video
 
 It runs for 6 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/instagram-follow.mdx b/docs/catalog/blocks/instagram-follow.mdx
index a319ba5b6d..fb0616f17f 100644
--- a/docs/catalog/blocks/instagram-follow.mdx
+++ b/docs/catalog/blocks/instagram-follow.mdx
@@ -5,6 +5,12 @@ description: "Animated Instagram follow overlay with profile card and follow but
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add instagram-follow" item="instagram-follow" />
+
+That writes `compositions/instagram-follow.html`, plus 1 supporting file under `assets/`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="instagram-follow preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/instagram-follow.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add instagram-follow" item="instagram-follow" />
-
-That writes `compositions/instagram-follow.html`, plus 1 supporting file under `assets/`.
-
 ## Source
 
 <Accordion title={`instagram-follow.html`}>
diff --git a/docs/catalog/blocks/ios26-liquid-glass.mdx b/docs/catalog/blocks/ios26-liquid-glass.mdx
index c00c58c77c..917b06230d 100644
--- a/docs/catalog/blocks/ios26-liquid-glass.mdx
+++ b/docs/catalog/blocks/ios26-liquid-glass.mdx
@@ -5,14 +5,14 @@ description: "3D iPhone with a normal iOS 26 home screen, liquid glass app icons
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.png" autoPlay muted loop playsInline />
-
 ## Install
 
 <InstallCommand command="npx hyperframes add ios26-liquid-glass" item="ios26-liquid-glass" />
 
 That writes `compositions/ios26-liquid-glass.html`, plus 28 supporting files under `models/`, `lib/`, and `assets/icons/`.
 
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.png" autoPlay muted loop playsInline />
+
 <Danger>
   Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
   Without it this item's screen renders black. Rendering from the CLI switches
diff --git a/docs/catalog/blocks/light-leak.mdx b/docs/catalog/blocks/light-leak.mdx
index 5176fa55bf..bb50eb6294 100644
--- a/docs/catalog/blocks/light-leak.mdx
+++ b/docs/catalog/blocks/light-leak.mdx
@@ -5,6 +5,12 @@ description: "Shader transition with cinematic light leak overlay"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add light-leak" item="light-leak" />
+
+That writes one file: `compositions/light-leak.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="light-leak preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/light-leak.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/light-leak.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add light-leak" item="light-leak" />
-
-That writes one file: `compositions/light-leak.html`.
-
 ## Source
 
 <Accordion title={`light-leak.html`}>
diff --git a/docs/catalog/blocks/liquid-glass-context-menu.mdx b/docs/catalog/blocks/liquid-glass-context-menu.mdx
index 298e592ae7..55983b0d25 100644
--- a/docs/catalog/blocks/liquid-glass-context-menu.mdx
+++ b/docs/catalog/blocks/liquid-glass-context-menu.mdx
@@ -5,6 +5,12 @@ description: "Frosted glass context menu panel drifting over an aurora shader ba
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add liquid-glass-context-menu" item="liquid-glass-context-menu" />
+
+That writes `compositions/liquid-glass-context-menu.html`, plus 1 supporting file under `compositions/lib/`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="liquid-glass-context-menu preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/liquid-glass-context-menu.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-context-menu.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add liquid-glass-context-menu" item="liquid-glass-context-menu" />
-
-That writes `compositions/liquid-glass-context-menu.html`, plus 1 supporting file under `compositions/lib/`.
-
 <Danger>
   Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
   Without it this item's screen renders black. Rendering from the CLI switches
@@ -36,7 +36,11 @@ That writes `compositions/liquid-glass-context-menu.html`, plus 1 supporting fil
     <meta name="viewport" content="width=1920, height=1080" />
     <title>Liquid Glass Context Menu</title>
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"
+      integrity="sha384-CI3ELBVUz9XQO+97x6nwMDPosPR5XvsxW2ua7N1Xeygeh1IxtgqtCkGfQY9WWdHu"
+      crossorigin="anonymous"
+    ></script>
     <script src="lib/liquid-glass.iife.js"></script>
     <style>
       *,
diff --git a/docs/catalog/blocks/liquid-glass-media-controls.mdx b/docs/catalog/blocks/liquid-glass-media-controls.mdx
index 43d0107c4e..1f24f2683f 100644
--- a/docs/catalog/blocks/liquid-glass-media-controls.mdx
+++ b/docs/catalog/blocks/liquid-glass-media-controls.mdx
@@ -5,6 +5,12 @@ description: "Frosted glass media control panels spreading over an aurora shader
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add liquid-glass-media-controls" item="liquid-glass-media-controls" />
+
+That writes `compositions/liquid-glass-media-controls.html`, plus 1 supporting file under `compositions/lib/`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="liquid-glass-media-controls preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/liquid-glass-media-controls.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-media-controls.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add liquid-glass-media-controls" item="liquid-glass-media-controls" />
-
-That writes `compositions/liquid-glass-media-controls.html`, plus 1 supporting file under `compositions/lib/`.
-
 <Danger>
   Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
   Without it this item's screen renders black. Rendering from the CLI switches
@@ -36,7 +36,11 @@ That writes `compositions/liquid-glass-media-controls.html`, plus 1 supporting f
     <meta name="viewport" content="width=1920, height=1080" />
     <title>Liquid Glass Media Controls</title>
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"
+      integrity="sha384-CI3ELBVUz9XQO+97x6nwMDPosPR5XvsxW2ua7N1Xeygeh1IxtgqtCkGfQY9WWdHu"
+      crossorigin="anonymous"
+    ></script>
     <script src="lib/liquid-glass.iife.js"></script>
     <style>
       *,
diff --git a/docs/catalog/blocks/liquid-glass-notification.mdx b/docs/catalog/blocks/liquid-glass-notification.mdx
index b0c51701b4..048bb6c011 100644
--- a/docs/catalog/blocks/liquid-glass-notification.mdx
+++ b/docs/catalog/blocks/liquid-glass-notification.mdx
@@ -5,6 +5,12 @@ description: "Frosted glass notification cards floating over an aurora shader ba
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add liquid-glass-notification" item="liquid-glass-notification" />
+
+That writes `compositions/liquid-glass-notification.html`, plus 2 supporting files under `compositions/assets/` and `compositions/lib/`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="liquid-glass-notification preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/liquid-glass-notification.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-notification.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add liquid-glass-notification" item="liquid-glass-notification" />
-
-That writes `compositions/liquid-glass-notification.html`, plus 2 supporting files under `compositions/assets/` and `compositions/lib/`.
-
 <Danger>
   Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
   Without it this item's screen renders black. Rendering from the CLI switches
@@ -35,7 +35,11 @@ That writes `compositions/liquid-glass-notification.html`, plus 2 supporting fil
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=1920, height=1080" />
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"
+      integrity="sha384-CI3ELBVUz9XQO+97x6nwMDPosPR5XvsxW2ua7N1Xeygeh1IxtgqtCkGfQY9WWdHu"
+      crossorigin="anonymous"
+    ></script>
     <script src="lib/liquid-glass.iife.js"></script>
     <style>
       * {
diff --git a/docs/catalog/blocks/liquid-glass-widgets.mdx b/docs/catalog/blocks/liquid-glass-widgets.mdx
index eeb8e5ff5c..9452a44844 100644
--- a/docs/catalog/blocks/liquid-glass-widgets.mdx
+++ b/docs/catalog/blocks/liquid-glass-widgets.mdx
@@ -5,6 +5,12 @@ description: "Frosted glass stat cards, showcase panel and pill chips over an au
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add liquid-glass-widgets" item="liquid-glass-widgets" />
+
+That writes `compositions/liquid-glass-widgets.html`, plus 2 supporting files under `compositions/assets/` and `compositions/lib/`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="liquid-glass-widgets preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/liquid-glass-widgets.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-widgets.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add liquid-glass-widgets" item="liquid-glass-widgets" />
-
-That writes `compositions/liquid-glass-widgets.html`, plus 2 supporting files under `compositions/assets/` and `compositions/lib/`.
-
 <Danger>
   Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
   Without it this item's screen renders black. Rendering from the CLI switches
@@ -36,7 +36,11 @@ That writes `compositions/liquid-glass-widgets.html`, plus 2 supporting files un
     <meta name="viewport" content="width=1920, height=1080" />
     <title>Liquid Glass Widgets</title>
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"
+      integrity="sha384-CI3ELBVUz9XQO+97x6nwMDPosPR5XvsxW2ua7N1Xeygeh1IxtgqtCkGfQY9WWdHu"
+      crossorigin="anonymous"
+    ></script>
     <script src="lib/liquid-glass.iife.js"></script>
     <style>
       *,
diff --git a/docs/catalog/blocks/logo-outro.mdx b/docs/catalog/blocks/logo-outro.mdx
index c608fe86ef..5bbf0ba82d 100644
--- a/docs/catalog/blocks/logo-outro.mdx
+++ b/docs/catalog/blocks/logo-outro.mdx
@@ -5,6 +5,12 @@ description: "Cinematic logo reveal with piece-by-piece assembly, glow bloom, ta
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add logo-outro" item="logo-outro" />
+
+That writes one file: `compositions/logo-outro.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="logo-outro preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/logo-outro.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add logo-outro" item="logo-outro" />
-
-That writes one file: `compositions/logo-outro.html`.
-
 ## Change the colors
 
 Set these CSS variables on the block:
diff --git a/docs/catalog/blocks/lower-third-bild.mdx b/docs/catalog/blocks/lower-third-bild.mdx
index 951b274966..1a2555bed7 100644
--- a/docs/catalog/blocks/lower-third-bild.mdx
+++ b/docs/catalog/blocks/lower-third-bild.mdx
@@ -6,6 +6,12 @@ description: "News-style lower third with tight-fit text boxes: white headline b
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add lower-third-bild" item="lower-third-bild" />
+
+That writes `compositions/lower-third-bild.html`, plus 2 supporting files under `compositions/assets/fonts/`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/lower-third-bild.json"
   compositionId="lower-third-bild"
@@ -169,12 +175,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add lower-third-bild" item="lower-third-bild" />
-
-That writes `compositions/lower-third-bild.html`, plus 2 supporting files under `compositions/assets/fonts/`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/blocks/lt-accent-underline.mdx b/docs/catalog/blocks/lt-accent-underline.mdx
index cb69b8b9da..2239acd991 100644
--- a/docs/catalog/blocks/lt-accent-underline.mdx
+++ b/docs/catalog/blocks/lt-accent-underline.mdx
@@ -5,6 +5,12 @@ description: "Cardless lower third for footage overlay: name rises, an accent ru
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add lt-accent-underline" item="lt-accent-underline" />
+
+That writes one file: `compositions/lt-accent-underline.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="lt-accent-underline preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/lt-accent-underline.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-accent-underline.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add lt-accent-underline" item="lt-accent-underline" />
-
-That writes one file: `compositions/lt-accent-underline.html`.
-
 ## Source
 
 <Accordion title={`lt-accent-underline.html`}>
diff --git a/docs/catalog/blocks/lt-bold-block.mdx b/docs/catalog/blocks/lt-bold-block.mdx
index bd15e4b67b..a2bd005244 100644
--- a/docs/catalog/blocks/lt-bold-block.mdx
+++ b/docs/catalog/blocks/lt-bold-block.mdx
@@ -5,6 +5,12 @@ description: "High-energy podcast lower third: solid dark block wipes in, upperc
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add lt-bold-block" item="lt-bold-block" />
+
+That writes one file: `compositions/lt-bold-block.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="lt-bold-block preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/lt-bold-block.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-bold-block.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add lt-bold-block" item="lt-bold-block" />
-
-That writes one file: `compositions/lt-bold-block.html`.
-
 ## Source
 
 <Accordion title={`lt-bold-block.html`}>
diff --git a/docs/catalog/blocks/lt-clean-bar.mdx b/docs/catalog/blocks/lt-clean-bar.mdx
index 0fb033018a..eeb7ce2b43 100644
--- a/docs/catalog/blocks/lt-clean-bar.mdx
+++ b/docs/catalog/blocks/lt-clean-bar.mdx
@@ -5,6 +5,12 @@ description: "Minimal white-card lower third for podcasts/interviews: accent tab
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add lt-clean-bar" item="lt-clean-bar" />
+
+That writes one file: `compositions/lt-clean-bar.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="lt-clean-bar preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/lt-clean-bar.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-clean-bar.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add lt-clean-bar" item="lt-clean-bar" />
-
-That writes one file: `compositions/lt-clean-bar.html`.
-
 ## Source
 
 <Accordion title={`lt-clean-bar.html`}>
diff --git a/docs/catalog/blocks/lt-color-block.mdx b/docs/catalog/blocks/lt-color-block.mdx
index 1ca7e052a7..cd4255e779 100644
--- a/docs/catalog/blocks/lt-color-block.mdx
+++ b/docs/catalog/blocks/lt-color-block.mdx
@@ -5,6 +5,12 @@ description: "High-energy lower third: bold accent-color block slides in with ov
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add lt-color-block" item="lt-color-block" />
+
+That writes one file: `compositions/lt-color-block.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="lt-color-block preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/lt-color-block.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-color-block.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add lt-color-block" item="lt-color-block" />
-
-That writes one file: `compositions/lt-color-block.html`.
-
 ## Source
 
 <Accordion title={`lt-color-block.html`}>
diff --git a/docs/catalog/blocks/lt-dark-card.mdx b/docs/catalog/blocks/lt-dark-card.mdx
index bc9d10809d..24b1b508d6 100644
--- a/docs/catalog/blocks/lt-dark-card.mdx
+++ b/docs/catalog/blocks/lt-dark-card.mdx
@@ -5,6 +5,12 @@ description: "Charcoal card lower third for bright footage: name, drawn accent u
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add lt-dark-card" item="lt-dark-card" />
+
+That writes one file: `compositions/lt-dark-card.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="lt-dark-card preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/lt-dark-card.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-dark-card.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add lt-dark-card" item="lt-dark-card" />
-
-That writes one file: `compositions/lt-dark-card.html`.
-
 ## Source
 
 <Accordion title={`lt-dark-card.html`}>
diff --git a/docs/catalog/blocks/lt-kicker-name.mdx b/docs/catalog/blocks/lt-kicker-name.mdx
index 0e11c36259..2f3f93d65e 100644
--- a/docs/catalog/blocks/lt-kicker-name.mdx
+++ b/docs/catalog/blocks/lt-kicker-name.mdx
@@ -5,6 +5,12 @@ description: "Cardless lower third with an accent eyebrow/kicker tag, heavy name
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add lt-kicker-name" item="lt-kicker-name" />
+
+That writes one file: `compositions/lt-kicker-name.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="lt-kicker-name preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/lt-kicker-name.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-kicker-name.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add lt-kicker-name" item="lt-kicker-name" />
-
-That writes one file: `compositions/lt-kicker-name.html`.
-
 ## Source
 
 <Accordion title={`lt-kicker-name.html`}>
diff --git a/docs/catalog/blocks/lt-mask-reveal.mdx b/docs/catalog/blocks/lt-mask-reveal.mdx
index d5e9710151..f128a127b0 100644
--- a/docs/catalog/blocks/lt-mask-reveal.mdx
+++ b/docs/catalog/blocks/lt-mask-reveal.mdx
@@ -5,6 +5,12 @@ description: "Cardless lower third: an accent sweep crosses and clip-path-reveal
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add lt-mask-reveal" item="lt-mask-reveal" />
+
+That writes one file: `compositions/lt-mask-reveal.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="lt-mask-reveal preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/lt-mask-reveal.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-mask-reveal.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add lt-mask-reveal" item="lt-mask-reveal" />
-
-That writes one file: `compositions/lt-mask-reveal.html`.
-
 ## Source
 
 <Accordion title={`lt-mask-reveal.html`}>
diff --git a/docs/catalog/blocks/lt-neon-border.mdx b/docs/catalog/blocks/lt-neon-border.mdx
index f8a33a1086..f9a548e3b1 100644
--- a/docs/catalog/blocks/lt-neon-border.mdx
+++ b/docs/catalog/blocks/lt-neon-border.mdx
@@ -6,6 +6,12 @@ description: "Two arcs of light travel the edge of a rounded panel and snap corn
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add lt-neon-border" item="lt-neon-border" />
+
+That writes one file: `compositions/lt-neon-border.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/lt-neon-border.json"
   compositionId="lt-neon-border"
@@ -408,12 +414,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add lt-neon-border" item="lt-neon-border" />
-
-That writes one file: `compositions/lt-neon-border.html`.
-
 ## Add it to your video
 
 It runs for 4.8 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/lt-side-rule.mdx b/docs/catalog/blocks/lt-side-rule.mdx
index c3e34b4806..baefa7233e 100644
--- a/docs/catalog/blocks/lt-side-rule.mdx
+++ b/docs/catalog/blocks/lt-side-rule.mdx
@@ -5,6 +5,12 @@ description: "Cardless lower third with a vertical accent bar; condensed display
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add lt-side-rule" item="lt-side-rule" />
+
+That writes one file: `compositions/lt-side-rule.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="lt-side-rule preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/lt-side-rule.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-side-rule.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add lt-side-rule" item="lt-side-rule" />
-
-That writes one file: `compositions/lt-side-rule.html`.
-
 ## Source
 
 <Accordion title={`lt-side-rule.html`}>
diff --git a/docs/catalog/blocks/lt-soft-pill.mdx b/docs/catalog/blocks/lt-soft-pill.mdx
index 303711c00f..b67dca48a0 100644
--- a/docs/catalog/blocks/lt-soft-pill.mdx
+++ b/docs/catalog/blocks/lt-soft-pill.mdx
@@ -5,6 +5,12 @@ description: "Rounded white pill lower third for podcasts/interviews: status dot
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add lt-soft-pill" item="lt-soft-pill" />
+
+That writes one file: `compositions/lt-soft-pill.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="lt-soft-pill preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/lt-soft-pill.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-soft-pill.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add lt-soft-pill" item="lt-soft-pill" />
-
-That writes one file: `compositions/lt-soft-pill.html`.
-
 ## Source
 
 <Accordion title={`lt-soft-pill.html`}>
diff --git a/docs/catalog/blocks/lt-stack-bars.mdx b/docs/catalog/blocks/lt-stack-bars.mdx
index ae51e7c3a6..0a29cb01b7 100644
--- a/docs/catalog/blocks/lt-stack-bars.mdx
+++ b/docs/catalog/blocks/lt-stack-bars.mdx
@@ -5,6 +5,12 @@ description: "Two stacked bars: a dark name bar wipes from the left, an accent r
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add lt-stack-bars" item="lt-stack-bars" />
+
+That writes one file: `compositions/lt-stack-bars.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="lt-stack-bars preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/lt-stack-bars.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-stack-bars.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add lt-stack-bars" item="lt-stack-bars" />
-
-That writes one file: `compositions/lt-stack-bars.html`.
-
 ## Source
 
 <Accordion title={`lt-stack-bars.html`}>
diff --git a/docs/catalog/blocks/macos-notification.mdx b/docs/catalog/blocks/macos-notification.mdx
index 9c69e3dd8f..c8b43fa165 100644
--- a/docs/catalog/blocks/macos-notification.mdx
+++ b/docs/catalog/blocks/macos-notification.mdx
@@ -5,6 +5,12 @@ description: "Animated macOS-style notification banner with app icon and message
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add macos-notification" item="macos-notification" />
+
+That writes one file: `compositions/macos-notification.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="macos-notification preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/macos-notification.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-notification.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add macos-notification" item="macos-notification" />
-
-That writes one file: `compositions/macos-notification.html`.
-
 ## Source
 
 <Accordion title={`macos-notification.html`}>
diff --git a/docs/catalog/blocks/macos-tahoe-liquid-glass.mdx b/docs/catalog/blocks/macos-tahoe-liquid-glass.mdx
index a9517f21ed..25054263dc 100644
--- a/docs/catalog/blocks/macos-tahoe-liquid-glass.mdx
+++ b/docs/catalog/blocks/macos-tahoe-liquid-glass.mdx
@@ -5,14 +5,14 @@ description: "3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finde
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.png" autoPlay muted loop playsInline />
-
 ## Install
 
 <InstallCommand command="npx hyperframes add macos-tahoe-liquid-glass" item="macos-tahoe-liquid-glass" />
 
 That writes `compositions/macos-tahoe-liquid-glass.html`, plus 18 supporting files under `models/`, `assets/wallpapers/`, and `assets/icons/`.
 
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.png" autoPlay muted loop playsInline />
+
 <Danger>
   Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
   Without it this item's screen renders black. Rendering from the CLI switches
diff --git a/docs/catalog/blocks/message-thread-reveal.mdx b/docs/catalog/blocks/message-thread-reveal.mdx
index 5e944287ed..241134ed1c 100644
--- a/docs/catalog/blocks/message-thread-reveal.mdx
+++ b/docs/catalog/blocks/message-thread-reveal.mdx
@@ -6,6 +6,12 @@ description: "A full text conversation plays out on a phone - bubbles popping in
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add message-thread-reveal" item="message-thread-reveal" />
+
+That writes `compositions/message-thread-reveal.html`, plus 3 supporting files under `assets/`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/message-thread-reveal.json"
   compositionId="message-thread-reveal"
@@ -1641,12 +1647,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add message-thread-reveal" item="message-thread-reveal" />
-
-That writes `compositions/message-thread-reveal.html`, plus 3 supporting files under `assets/`.
-
 ## Add it to your video
 
 It runs for 25.7667 seconds at 1080×1920. Paste this into your composition:
diff --git a/docs/catalog/blocks/mk-background.mdx b/docs/catalog/blocks/mk-background.mdx
index 44fb2039de..91130cae96 100644
--- a/docs/catalog/blocks/mk-background.mdx
+++ b/docs/catalog/blocks/mk-background.mdx
@@ -5,6 +5,12 @@ description: "Procedural soft-blob gradient backdrop in a minimalist presentatio
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add mk-background" item="mk-background" />
+
+That writes one file: `compositions/mk-background.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="mk-background preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/mk-background.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-background.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add mk-background" item="mk-background" />
-
-That writes one file: `compositions/mk-background.html`.
-
 ## Add it to your video
 
 It runs for 10 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/mk-callout-highlight.mdx b/docs/catalog/blocks/mk-callout-highlight.mdx
index 944f41cdc8..46c0fc4eeb 100644
--- a/docs/catalog/blocks/mk-callout-highlight.mdx
+++ b/docs/catalog/blocks/mk-callout-highlight.mdx
@@ -5,6 +5,12 @@ description: "A sentence whose word-by-word emphasis is driven by a single scala
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add mk-callout-highlight" item="mk-callout-highlight" />
+
+That writes one file: `compositions/mk-callout-highlight.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="mk-callout-highlight preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/mk-callout-highlight.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-callout-highlight.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add mk-callout-highlight" item="mk-callout-highlight" />
-
-That writes one file: `compositions/mk-callout-highlight.html`.
-
 ## Add it to your video
 
 It runs for 8 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/mk-clone-wall-transition.mdx b/docs/catalog/blocks/mk-clone-wall-transition.mdx
index 7b4c4097fa..e6c68cbb80 100644
--- a/docs/catalog/blocks/mk-clone-wall-transition.mdx
+++ b/docs/catalog/blocks/mk-clone-wall-transition.mdx
@@ -5,6 +5,12 @@ description: "Overlay transition: a tiled word wall covers the frame, inverts vi
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add mk-clone-wall-transition" item="mk-clone-wall-transition" />
+
+That writes one file: `compositions/mk-clone-wall-transition.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="mk-clone-wall-transition preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/mk-clone-wall-transition.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-clone-wall-transition.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add mk-clone-wall-transition" item="mk-clone-wall-transition" />
-
-That writes one file: `compositions/mk-clone-wall-transition.html`.
-
 ## Add it to your video
 
 It runs for 2.4 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/mk-line-graph.mdx b/docs/catalog/blocks/mk-line-graph.mdx
index 6f4ba89260..7a15f08386 100644
--- a/docs/catalog/blocks/mk-line-graph.mdx
+++ b/docs/catalog/blocks/mk-line-graph.mdx
@@ -5,6 +5,12 @@ description: "One or two SVG series draw on with dots popping and value labels r
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add mk-line-graph" item="mk-line-graph" />
+
+That writes one file: `compositions/mk-line-graph.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="mk-line-graph preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/mk-line-graph.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-line-graph.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add mk-line-graph" item="mk-line-graph" />
-
-That writes one file: `compositions/mk-line-graph.html`.
-
 ## Add it to your video
 
 It runs for 7 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/mk-placeholder-grid.mdx b/docs/catalog/blocks/mk-placeholder-grid.mdx
index dd5d13c52c..42c013946f 100644
--- a/docs/catalog/blocks/mk-placeholder-grid.mdx
+++ b/docs/catalog/blocks/mk-placeholder-grid.mdx
@@ -5,6 +5,12 @@ description: "N-up rounded-corner media grid (2-up, 3-up, 4-up, 3x2, hero plus t
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add mk-placeholder-grid" item="mk-placeholder-grid" />
+
+That writes one file: `compositions/mk-placeholder-grid.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="mk-placeholder-grid preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/mk-placeholder-grid.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-placeholder-grid.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add mk-placeholder-grid" item="mk-placeholder-grid" />
-
-That writes one file: `compositions/mk-placeholder-grid.html`.
-
 ## Add it to your video
 
 It runs for 8 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/mk-progress-stat.mdx b/docs/catalog/blocks/mk-progress-stat.mdx
index 043d1cd8f5..2d4d9317ac 100644
--- a/docs/catalog/blocks/mk-progress-stat.mdx
+++ b/docs/catalog/blocks/mk-progress-stat.mdx
@@ -5,6 +5,12 @@ description: "Big-numeral statistic with count-up, label, thin progress track fi
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add mk-progress-stat" item="mk-progress-stat" />
+
+That writes one file: `compositions/mk-progress-stat.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="mk-progress-stat preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/mk-progress-stat.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-progress-stat.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add mk-progress-stat" item="mk-progress-stat" />
-
-That writes one file: `compositions/mk-progress-stat.html`.
-
 ## Add it to your video
 
 It runs for 7 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/mk-specs-list.mdx b/docs/catalog/blocks/mk-specs-list.mdx
index 1ca8078973..c4c1094302 100644
--- a/docs/catalog/blocks/mk-specs-list.mdx
+++ b/docs/catalog/blocks/mk-specs-list.mdx
@@ -5,6 +5,12 @@ description: "Left-aligned specs/traits checklist over footage or a board: rows
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add mk-specs-list" item="mk-specs-list" />
+
+That writes one file: `compositions/mk-specs-list.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="mk-specs-list preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/mk-specs-list.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-specs-list.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add mk-specs-list" item="mk-specs-list" />
-
-That writes one file: `compositions/mk-specs-list.html`.
-
 ## Add it to your video
 
 It runs for 8 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/news-ticker.mdx b/docs/catalog/blocks/news-ticker.mdx
index fe1a995010..43f1eda8f4 100644
--- a/docs/catalog/blocks/news-ticker.mdx
+++ b/docs/catalog/blocks/news-ticker.mdx
@@ -5,6 +5,12 @@ description: "Premium broadcast-style lower-third ticker with live label, headli
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add news-ticker" item="news-ticker" />
+
+That writes one file: `compositions/news-ticker.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="news-ticker preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/news-ticker.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/news-ticker.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add news-ticker" item="news-ticker" />
-
-That writes one file: `compositions/news-ticker.html`.
-
 ## Source
 
 <Accordion title={`news-ticker.html`}>
diff --git a/docs/catalog/blocks/north-korea-locked-down.mdx b/docs/catalog/blocks/north-korea-locked-down.mdx
index 72ce62c87d..1767447609 100644
--- a/docs/catalog/blocks/north-korea-locked-down.mdx
+++ b/docs/catalog/blocks/north-korea-locked-down.mdx
@@ -5,6 +5,12 @@ description: "Realistic map zoom into North Korea with a red scribble circle, lo
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add north-korea-locked-down" item="north-korea-locked-down" />
+
+That writes `compositions/north-korea-locked-down.html`, plus 1 supporting file under `assets/`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="north-korea-locked-down preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/north-korea-locked-down.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/north-korea-locked-down.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add north-korea-locked-down" item="north-korea-locked-down" />
-
-That writes `compositions/north-korea-locked-down.html`, plus 1 supporting file under `assets/`.
-
 ## Source
 
 <Accordion title={`north-korea-locked-down.html`}>
diff --git a/docs/catalog/blocks/notes-reveal.mdx b/docs/catalog/blocks/notes-reveal.mdx
index 98a09436f8..464e52be6b 100644
--- a/docs/catalog/blocks/notes-reveal.mdx
+++ b/docs/catalog/blocks/notes-reveal.mdx
@@ -6,11 +6,17 @@ description: "A personal note is typed character by character in a notes app - c
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add notes-reveal" item="notes-reveal" />
+
+That writes `compositions/notes-reveal.html`, plus 5 supporting files under `assets/`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/notes-reveal.json"
   compositionId="notes-reveal"
   compositionSrc="compositions/notes-reveal.html"
-  variables={[{"id":"titleL1","type":"string","role":"content","label":"Note title line 1","description":"First line of the note title.","default":"Things nobody told me"},{"id":"titleL2","type":"string","role":"content","label":"Note title line 2","description":"Second line of the note title.","default":"about video."},{"id":"cardTop","type":"string","role":"content","label":"Card headline top","description":"First marker line on the closing card.","default":"THE POWER"},{"id":"check1Label","type":"string","role":"content","label":"Checklist 1 label","description":"Typewriter label of the first checklist row.","default":"WRITE"},{"id":"check1Value","type":"string","role":"content","label":"Checklist 1 value","description":"Marker value of the first checklist row.","default":"HTML"},{"id":"check2Label","type":"string","role":"content","label":"Checklist 2 label","description":"Typewriter label of the second checklist row.","default":"RENDER"},{"id":"check2Value","type":"string","role":"content","label":"Checklist 2 value","description":"Marker value of the second checklist row.","default":"IN 4K"},{"id":"check3Label","type":"string","role":"content","label":"Checklist 3 label","description":"Typewriter label of the third checklist row.","default":"SHIP"},{"id":"check3Value","type":"string","role":"content","label":"Checklist 3 value","description":"Marker value of the third checklist row.","default":"TODAY"},{"id":"brandLogo","type":"image","role":"content","label":"Brand logo","description":"Transparent mark of the brand this video promotes, in the sign-off strip under the card.","portrays":["subject_logo"],"default":"assets/hyperframes-logo-black.svg"},{"id":"brandDomain","type":"string","role":"content","label":"Sign-off domain","description":"Domain of the brand this video promotes, closing the sign-off strip. Use the real domain, or a call to action when no domain fits.","portrays":["subject_domain"],"default":"hyperframes.heygen.com"}]}
+  variables={[{"id":"titleL1","type":"string","role":"content","label":"Note title line 1","description":"First line of the note title.","default":"Things nobody told me"},{"id":"titleL2","type":"string","role":"content","label":"Note title line 2","description":"Second line of the note title.","default":"about video."},{"id":"noteLine1","type":"string","role":"content","label":"Note body line 1","description":"First typed line of the note. The seven body lines are the bulk of the video: they must be about the brand this video promotes, not about video-making.","default":"my videos sucked"},{"id":"noteLine2","type":"string","role":"content","label":"Note body line 2","description":"Second typed line of the note.","default":"my tools cost $$$"},{"id":"noteLine3","type":"string","role":"content","label":"Note body line 3","description":"Third typed line of the note.","default":"and re-edits never end."},{"id":"noteLine4","type":"string","role":"content","label":"Note body line 4","description":"Fourth typed line of the note — the turn, where the brand enters.","default":"then i tried writing html only"},{"id":"noteLine5","type":"string","role":"content","label":"Note body line 5","description":"Fifth typed line of the note — name the brand here.","default":"started HyperFrames three weeks ago"},{"id":"noteLine6","type":"string","role":"content","label":"Note body line 6","description":"Sixth typed line of the note.","default":"the grind is gone, but more than that —"},{"id":"noteLine7","type":"string","role":"content","label":"Note body line 7","description":"Last typed line of the note — the payoff.","default":"I ship videos weekly."},{"id":"cardTop","type":"string","role":"content","label":"Card headline top","description":"First marker line on the closing card. The underline follows its last word.","default":"THE POWER"},{"id":"cardMid","type":"string","role":"content","label":"Card headline middle","description":"Short connector line between the two headline lines, centred on the card.","default":"OF"},{"id":"cardBottom","type":"string","role":"content","label":"Card headline bottom","description":"Last marker line on the closing card. Its first word is ringed.","default":"ONE FILE"},{"id":"check1Label","type":"string","role":"content","label":"Checklist 1 label","description":"Typewriter label of the first checklist row.","default":"WRITE"},{"id":"check1Value","type":"string","role":"content","label":"Checklist 1 value","description":"Marker value of the first checklist row.","default":"HTML"},{"id":"check2Label","type":"string","role":"content","label":"Checklist 2 label","description":"Typewriter label of the second checklist row.","default":"RENDER"},{"id":"check2Value","type":"string","role":"content","label":"Checklist 2 value","description":"Marker value of the second checklist row.","default":"IN 4K"},{"id":"check3Label","type":"string","role":"content","label":"Checklist 3 label","description":"Typewriter label of the third checklist row.","default":"SHIP"},{"id":"check3Value","type":"string","role":"content","label":"Checklist 3 value","description":"Marker value of the third checklist row.","default":"TODAY"},{"id":"brandLogo","type":"image","role":"content","label":"Brand logo","description":"Transparent mark of the brand this video promotes, in the sign-off strip under the card.","portrays":["subject_logo"],"default":"assets/hyperframes-logo-black.svg"},{"id":"brandDomain","type":"string","role":"content","label":"Sign-off domain","description":"Domain of the brand this video promotes, closing the sign-off strip. Use the real domain, or a call to action when no domain fits.","portrays":["subject_domain"],"default":"hyperframes.heygen.com"}]}
 >
 
 ```html notes-reveal.html
@@ -20,7 +26,16 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
   data-composition-variables='[
     { "id": "titleL1", "type": "string", "role": "content", "label": "Note title line 1", "description": "First line of the note title.", "default": "Things nobody told me" },
     { "id": "titleL2", "type": "string", "role": "content", "label": "Note title line 2", "description": "Second line of the note title.", "default": "about video." },
-    { "id": "cardTop", "type": "string", "role": "content", "label": "Card headline top", "description": "First marker line on the closing card.", "default": "THE POWER" },
+    { "id": "noteLine1", "type": "string", "role": "content", "label": "Note body line 1", "description": "First typed line of the note. The seven body lines are the bulk of the video: they must be about the brand this video promotes, not about video-making.", "default": "my videos sucked" },
+    { "id": "noteLine2", "type": "string", "role": "content", "label": "Note body line 2", "description": "Second typed line of the note.", "default": "my tools cost $$$" },
+    { "id": "noteLine3", "type": "string", "role": "content", "label": "Note body line 3", "description": "Third typed line of the note.", "default": "and re-edits never end." },
+    { "id": "noteLine4", "type": "string", "role": "content", "label": "Note body line 4", "description": "Fourth typed line of the note — the turn, where the brand enters.", "default": "then i tried writing html only" },
+    { "id": "noteLine5", "type": "string", "role": "content", "label": "Note body line 5", "description": "Fifth typed line of the note — name the brand here.", "default": "started HyperFrames three weeks ago" },
+    { "id": "noteLine6", "type": "string", "role": "content", "label": "Note body line 6", "description": "Sixth typed line of the note.", "default": "the grind is gone, but more than that —" },
+    { "id": "noteLine7", "type": "string", "role": "content", "label": "Note body line 7", "description": "Last typed line of the note — the payoff.", "default": "I ship videos weekly." },
+    { "id": "cardTop", "type": "string", "role": "content", "label": "Card headline top", "description": "First marker line on the closing card. The underline follows its last word.", "default": "THE POWER" },
+    { "id": "cardMid", "type": "string", "role": "content", "label": "Card headline middle", "description": "Short connector line between the two headline lines, centred on the card.", "default": "OF" },
+    { "id": "cardBottom", "type": "string", "role": "content", "label": "Card headline bottom", "description": "Last marker line on the closing card. Its first word is ringed.", "default": "ONE FILE" },
     { "id": "check1Label", "type": "string", "role": "content", "label": "Checklist 1 label", "description": "Typewriter label of the first checklist row.", "default": "WRITE" },
     { "id": "check1Value", "type": "string", "role": "content", "label": "Checklist 1 value", "description": "Marker value of the first checklist row.", "default": "HTML" },
     { "id": "check2Label", "type": "string", "role": "content", "label": "Checklist 2 label", "description": "Typewriter label of the second checklist row.", "default": "RENDER" },
@@ -281,7 +296,10 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
         font-weight: 400;
         letter-spacing: 0em;
         color: #191919;
-        white-space: nowrap;
+        /* `pre`, not `nowrap`: the per-character spans are built at runtime from the line
+           variables, and a leading or trailing space in a supplied line would collapse under
+           `nowrap` — the caret then stalls on a zero-width span. */
+        white-space: pre;
       }
       #caret {
         position: absolute;
@@ -376,7 +394,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
             <div
               class="mk"
               id="hl1"
-              data-layout-allow-overflow
               data-layout-allow-overlap
               data-layout-allow-occlusion
               style="left: 116px; top: 72px"
@@ -387,7 +404,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
             <div
               class="mk"
               id="hl2"
-              data-layout-allow-overflow
               data-layout-allow-overlap
               data-layout-allow-occlusion
               style="left: 356px; top: 181px"
@@ -397,7 +413,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
             <div
               class="mk"
               id="hl3"
-              data-layout-allow-overflow
               data-layout-allow-overlap
               data-layout-allow-occlusion
               style="left: 155px; top: 329px"
@@ -418,8 +433,19 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
                   stroke="#602640"
                   stroke-width="8"
                 /></svg
-              ><span style="padding-left: 24px">ONE</span
-              ><span style="padding-left: 52px">FILE</span>
+              ><span
+                id="hl3-head"
+                data-layout-allow-overlap
+                data-layout-allow-occlusion
+                style="padding-left: 24px"
+                >ONE</span
+              ><span
+                id="hl3-tail"
+                data-layout-allow-overlap
+                data-layout-allow-occlusion
+                style="padding-left: 52px"
+                >FILE</span
+              >
             </div>
 
             <div class="cl-label" style="left: 74px; top: 1073px">WRITE</div>
@@ -662,16 +688,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
                 data-layout-allow-overlap
                 data-layout-allow-occlusion
                 style="top: 283px"
-              >
-                <span class="ch" id="ch-0-0">m</span><span class="ch" id="ch-0-1">y</span
-                ><span class="ch" id="ch-0-2"> </span><span class="ch" id="ch-0-3">v</span
-                ><span class="ch" id="ch-0-4">i</span><span class="ch" id="ch-0-5">d</span
-                ><span class="ch" id="ch-0-6">e</span><span class="ch" id="ch-0-7">o</span
-                ><span class="ch" id="ch-0-8">s</span><span class="ch" id="ch-0-9"> </span
-                ><span class="ch" id="ch-0-10">s</span><span class="ch" id="ch-0-11">u</span
-                ><span class="ch" id="ch-0-12">c</span><span class="ch" id="ch-0-13">k</span
-                ><span class="ch" id="ch-0-14">e</span><span class="ch" id="ch-0-15">d</span>
-              </div>
+              ></div>
               <div
                 class="bodyline"
                 id="line-1"
@@ -679,17 +696,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
                 data-layout-allow-overlap
                 data-layout-allow-occlusion
                 style="top: 433px"
-              >
-                <span class="ch" id="ch-1-0">m</span><span class="ch" id="ch-1-1">y</span
-                ><span class="ch" id="ch-1-2"> </span><span class="ch" id="ch-1-3">t</span
-                ><span class="ch" id="ch-1-4">o</span><span class="ch" id="ch-1-5">o</span
-                ><span class="ch" id="ch-1-6">l</span><span class="ch" id="ch-1-7">s</span
-                ><span class="ch" id="ch-1-8"> </span><span class="ch" id="ch-1-9">c</span
-                ><span class="ch" id="ch-1-10">o</span><span class="ch" id="ch-1-11">s</span
-                ><span class="ch" id="ch-1-12">t</span><span class="ch" id="ch-1-13"> </span
-                ><span class="ch" id="ch-1-14">$</span><span class="ch" id="ch-1-15">$</span
-                ><span class="ch" id="ch-1-16">$</span>
-              </div>
+              ></div>
               <div
                 class="bodyline"
                 id="line-2"
@@ -697,20 +704,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
                 data-layout-allow-overlap
                 data-layout-allow-occlusion
                 style="top: 583px"
-              >
-                <span class="ch" id="ch-2-0">a</span><span class="ch" id="ch-2-1">n</span
-                ><span class="ch" id="ch-2-2">d</span><span class="ch" id="ch-2-3"> </span
-                ><span class="ch" id="ch-2-4">r</span><span class="ch" id="ch-2-5">e</span
-                ><span class="ch" id="ch-2-6">-</span><span class="ch" id="ch-2-7">e</span
-                ><span class="ch" id="ch-2-8">d</span><span class="ch" id="ch-2-9">i</span
-                ><span class="ch" id="ch-2-10">t</span><span class="ch" id="ch-2-11">s</span
-                ><span class="ch" id="ch-2-12"> </span><span class="ch" id="ch-2-13">n</span
-                ><span class="ch" id="ch-2-14">e</span><span class="ch" id="ch-2-15">v</span
-                ><span class="ch" id="ch-2-16">e</span><span class="ch" id="ch-2-17">r</span
-                ><span class="ch" id="ch-2-18"> </span><span class="ch" id="ch-2-19">e</span
-                ><span class="ch" id="ch-2-20">n</span><span class="ch" id="ch-2-21">d</span
-                ><span class="ch" id="ch-2-22">.</span>
-              </div>
+              ></div>
               <div
                 class="bodyline"
                 id="line-3"
@@ -718,23 +712,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
                 data-layout-allow-overlap
                 data-layout-allow-occlusion
                 style="top: 733px"
-              >
-                <span class="ch" id="ch-3-0">t</span><span class="ch" id="ch-3-1">h</span
-                ><span class="ch" id="ch-3-2">e</span><span class="ch" id="ch-3-3">n</span
-                ><span class="ch" id="ch-3-4"> </span><span class="ch" id="ch-3-5">i</span
-                ><span class="ch" id="ch-3-6"> </span><span class="ch" id="ch-3-7">t</span
-                ><span class="ch" id="ch-3-8">r</span><span class="ch" id="ch-3-9">i</span
-                ><span class="ch" id="ch-3-10">e</span><span class="ch" id="ch-3-11">d</span
-                ><span class="ch" id="ch-3-12"> </span><span class="ch" id="ch-3-13">w</span
-                ><span class="ch" id="ch-3-14">r</span><span class="ch" id="ch-3-15">i</span
-                ><span class="ch" id="ch-3-16">t</span><span class="ch" id="ch-3-17">i</span
-                ><span class="ch" id="ch-3-18">n</span><span class="ch" id="ch-3-19">g</span
-                ><span class="ch" id="ch-3-20"> </span><span class="ch" id="ch-3-21">h</span
-                ><span class="ch" id="ch-3-22">t</span><span class="ch" id="ch-3-23">m</span
-                ><span class="ch" id="ch-3-24">l</span><span class="ch" id="ch-3-25"> </span
-                ><span class="ch" id="ch-3-26">o</span><span class="ch" id="ch-3-27">n</span
-                ><span class="ch" id="ch-3-28">l</span><span class="ch" id="ch-3-29">y</span>
-              </div>
+              ></div>
               <div
                 class="bodyline"
                 id="line-4"
@@ -742,26 +720,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
                 data-layout-allow-overlap
                 data-layout-allow-occlusion
                 style="top: 883px"
-              >
-                <span class="ch" id="ch-4-0">s</span><span class="ch" id="ch-4-1">t</span
-                ><span class="ch" id="ch-4-2">a</span><span class="ch" id="ch-4-3">r</span
-                ><span class="ch" id="ch-4-4">t</span><span class="ch" id="ch-4-5">e</span
-                ><span class="ch" id="ch-4-6">d</span><span class="ch" id="ch-4-7"> </span
-                ><span class="ch" id="ch-4-8">H</span><span class="ch" id="ch-4-9">y</span
-                ><span class="ch" id="ch-4-10">p</span><span class="ch" id="ch-4-11">e</span
-                ><span class="ch" id="ch-4-12">r</span><span class="ch" id="ch-4-13">F</span
-                ><span class="ch" id="ch-4-14">r</span><span class="ch" id="ch-4-15">a</span
-                ><span class="ch" id="ch-4-16">m</span><span class="ch" id="ch-4-17">e</span
-                ><span class="ch" id="ch-4-18">s</span><span class="ch" id="ch-4-19"> </span
-                ><span class="ch" id="ch-4-20">t</span><span class="ch" id="ch-4-21">h</span
-                ><span class="ch" id="ch-4-22">r</span><span class="ch" id="ch-4-23">e</span
-                ><span class="ch" id="ch-4-24">e</span><span class="ch" id="ch-4-25"> </span
-                ><span class="ch" id="ch-4-26">w</span><span class="ch" id="ch-4-27">e</span
-                ><span class="ch" id="ch-4-28">e</span><span class="ch" id="ch-4-29">k</span
-                ><span class="ch" id="ch-4-30">s</span><span class="ch" id="ch-4-31"> </span
-                ><span class="ch" id="ch-4-32">a</span><span class="ch" id="ch-4-33">g</span
-                ><span class="ch" id="ch-4-34">o</span>
-              </div>
+              ></div>
               <div
                 class="bodyline"
                 id="line-5"
@@ -769,28 +728,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
                 data-layout-allow-overlap
                 data-layout-allow-occlusion
                 style="top: 1033px"
-              >
-                <span class="ch" id="ch-5-0">t</span><span class="ch" id="ch-5-1">h</span
-                ><span class="ch" id="ch-5-2">e</span><span class="ch" id="ch-5-3"> </span
-                ><span class="ch" id="ch-5-4">g</span><span class="ch" id="ch-5-5">r</span
-                ><span class="ch" id="ch-5-6">i</span><span class="ch" id="ch-5-7">n</span
-                ><span class="ch" id="ch-5-8">d</span><span class="ch" id="ch-5-9"> </span
-                ><span class="ch" id="ch-5-10">i</span><span class="ch" id="ch-5-11">s</span
-                ><span class="ch" id="ch-5-12"> </span><span class="ch" id="ch-5-13">g</span
-                ><span class="ch" id="ch-5-14">o</span><span class="ch" id="ch-5-15">n</span
-                ><span class="ch" id="ch-5-16">e</span><span class="ch" id="ch-5-17">,</span
-                ><span class="ch" id="ch-5-18"> </span><span class="ch" id="ch-5-19">b</span
-                ><span class="ch" id="ch-5-20">u</span><span class="ch" id="ch-5-21">t</span
-                ><span class="ch" id="ch-5-22"> </span><span class="ch" id="ch-5-23">m</span
-                ><span class="ch" id="ch-5-24">o</span><span class="ch" id="ch-5-25">r</span
-                ><span class="ch" id="ch-5-26">e</span><span class="ch" id="ch-5-27"> </span
-                ><span class="ch" id="ch-5-28">t</span><span class="ch" id="ch-5-29">h</span
-                ><span class="ch" id="ch-5-30">a</span><span class="ch" id="ch-5-31">n</span
-                ><span class="ch" id="ch-5-32"> </span><span class="ch" id="ch-5-33">t</span
-                ><span class="ch" id="ch-5-34">h</span><span class="ch" id="ch-5-35">a</span
-                ><span class="ch" id="ch-5-36">t</span><span class="ch" id="ch-5-37"> </span
-                ><span class="ch" id="ch-5-38">—</span>
-              </div>
+              ></div>
               <div
                 class="bodyline"
                 id="line-6"
@@ -798,19 +736,7 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
                 data-layout-allow-overlap
                 data-layout-allow-occlusion
                 style="top: 1183px"
-              >
-                <span class="ch" id="ch-6-0">I</span><span class="ch" id="ch-6-1"> </span
-                ><span class="ch" id="ch-6-2">s</span><span class="ch" id="ch-6-3">h</span
-                ><span class="ch" id="ch-6-4">i</span><span class="ch" id="ch-6-5">p</span
-                ><span class="ch" id="ch-6-6"> </span><span class="ch" id="ch-6-7">v</span
-                ><span class="ch" id="ch-6-8">i</span><span class="ch" id="ch-6-9">d</span
-                ><span class="ch" id="ch-6-10">e</span><span class="ch" id="ch-6-11">o</span
-                ><span class="ch" id="ch-6-12">s</span><span class="ch" id="ch-6-13"> </span
-                ><span class="ch" id="ch-6-14">w</span><span class="ch" id="ch-6-15">e</span
-                ><span class="ch" id="ch-6-16">e</span><span class="ch" id="ch-6-17">k</span
-                ><span class="ch" id="ch-6-18">l</span><span class="ch" id="ch-6-19">y</span
-                ><span class="ch" id="ch-6-20">.</span>
-              </div>
+              ></div>
               <div id="caret"></div>
             </div>
           </div>
@@ -1089,12 +1015,19 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <script>
+      // The text every slot resolved to, kept for the timeline: the typewriter has to know how
+      // many characters each body line ended up with.
+      const NOTE_LINES = [];
+
       // variables: every override falls back to its declared default
       (function () {
         var vars =
           window.__hyperframes && typeof window.__hyperframes.getVariables === "function"
             ? window.__hyperframes.getVariables()
             : {};
+        // `mx` is a backstop, not the layout rule. Every text slot below is width-fitted at
+        // build time, so the cap only has to be low enough that the fit floor can still hold
+        // the string inside its box -- it is not what keeps the design intact.
         function t(v, fb, mx) {
           if (typeof v !== "string") return fb;
           var s = v.trim();
@@ -1104,18 +1037,61 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
         document.getElementById("title-l1").textContent = t(
           vars.titleL1,
           "Things nobody told me",
-          26,
+          34,
         );
-        document.getElementById("title-l2").textContent = t(vars.titleL2, "about video.", 26);
-        document.getElementById("hl1").textContent = t(vars.cardTop, "THE POWER", 12);
+        document.getElementById("title-l2").textContent = t(vars.titleL2, "about video.", 34);
+
+        // Body: build the per-character spans the reveal animation addresses by id, instead of
+        // shipping them pre-split. Pre-split spans made the note's seven lines -- 46% of the
+        // running time, and the only place the note says anything -- permanently unwritable,
+        // so every remix of this template kept HyperFrames' own copy about making videos.
+        var BODY_DEFAULTS = [
+          "my videos sucked",
+          "my tools cost $$$",
+          "and re-edits never end.",
+          "then i tried writing html only",
+          "started HyperFrames three weeks ago",
+          "the grind is gone, but more than that —",
+          "I ship videos weekly.",
+        ];
+        BODY_DEFAULTS.forEach(function (fallback, li) {
+          var text = t(vars["noteLine" + (li + 1)], fallback, 52);
+          NOTE_LINES.push(text);
+          var host = document.getElementById("line-" + li);
+          host.textContent = "";
+          for (var ri = 0; ri < text.length; ri++) {
+            var ch = document.createElement("span");
+            ch.className = "ch";
+            ch.id = "ch-" + li + "-" + ri;
+            ch.textContent = text.charAt(ri);
+            host.appendChild(ch);
+          }
+        });
+
+        // Card headline. `cardMid` and `cardBottom` were literals until now, which is why a
+        // remix could only ever change the first of the three lines.
+        document.getElementById("hl1").textContent = t(vars.cardTop, "THE POWER", 16);
+        document.getElementById("hl2").textContent = t(vars.cardMid, "OF", 6);
+        // The ring is a sibling of the text, so the words go in their own spans: the first one
+        // is what the ring is drawn around.
+        var bottom = t(vars.cardBottom, "ONE FILE", 16);
+        var cut = bottom.indexOf(" ");
+        var head = cut === -1 ? bottom : bottom.slice(0, cut);
+        var tail = cut === -1 ? "" : bottom.slice(cut + 1);
+        var hl3Head = document.getElementById("hl3-head");
+        var hl3Tail = document.getElementById("hl3-tail");
+        hl3Head.textContent = head;
+        hl3Tail.textContent = tail;
+        hl3Tail.style.display = tail ? "" : "none";
+
         var labels = document.querySelectorAll(".cl-label");
         var values = document.querySelectorAll(".cl-value");
-        labels[0].textContent = t(vars.check1Label, "WRITE", 8);
-        values[0].textContent = t(vars.check1Value, "HTML", 8);
-        labels[1].textContent = t(vars.check2Label, "RENDER", 8);
-        values[1].textContent = t(vars.check2Value, "IN 4K", 8);
-        labels[2].textContent = t(vars.check3Label, "SHIP", 8);
-        values[2].textContent = t(vars.check3Value, "TODAY", 8);
+        labels[0].textContent = t(vars.check1Label, "WRITE", 18);
+        values[0].textContent = t(vars.check1Value, "HTML", 18);
+        labels[1].textContent = t(vars.check2Label, "RENDER", 18);
+        values[1].textContent = t(vars.check2Value, "IN 4K", 18);
+        labels[2].textContent = t(vars.check3Label, "SHIP", 18);
+        values[2].textContent = t(vars.check3Value, "TODAY", 18);
         document.getElementById("brand-domain").textContent = t(
           vars.brandDomain,
           "hyperframes.heygen.com",
@@ -1445,6 +1421,196 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
       const TEXT_X = 62,
         VIEW_TOP = 272;
 
+      // ---------- width fitting ----------
+      // Every text slot sits at a fixed left edge with `white-space` holding it on one line, so
+      // a value one word longer than the packaged default simply runs off its box. The only
+      // protection used to be a character cap, which is the wrong unit: `cardTop` allowed 12
+      // characters, "THE POWER" (9) fits, and "CREATE DECKS" (12) does not -- so both reported
+      // gamma remixes shipped with the closing headline over the edge of the card.
+      // Fitting shrinks the type until it fits and never grows it past the designed size, so a
+      // value the length of the default renders exactly as drawn.
+      //
+      // The card headlines also carried `data-layout-allow-overflow`, which switched off the one
+      // check that would have caught this; those waivers are gone. `#hl1`/`#hl2`/`#hl3` are
+      // fixed on a card that never moves, so any overflow there is a defect. The note's title
+      // and body lines keep theirs: `#note-body` is translated upward across the whole scene, so
+      // they leave the canvas vertically by design. Note that `hyperframes check` only ever sees
+      // the declared defaults -- it takes no variable values -- so the checker guards the
+      // template and the fit is what guards a remix.
+      // The floor and the character caps have to agree: a cap that admits a string still too wide
+      // at the floor size puts the text back outside its box, which is the bug this whole pass is
+      // about. Measured against the packaged copy -- "Things nobody told me" is 21 characters and
+      // 900px at 88px, so 42.9px per character -- 0.45 leaves every declared cap satisfiable with
+      // room to spare, and only absurd input ever gets near it.
+      const FIT_FLOOR = 0.45;
+
+      // Measure with `offset*`, never `getBoundingClientRect()`. The card is rotated -3.03deg, so
+      // a rect is the axis-aligned box of the rotated element and overstates the width by about
+      // 7px -- enough to push the packaged "THE POWER" past its own limit and shrink a headline
+      // that was already correct. `offsetWidth`/`offsetLeft` are layout values: no transform, no
+      // render scale, and `offsetLeft` on a child is relative to the positioned ancestor, which
+      // is exactly the coordinate space the baked-in decoration positions were authored in.
+      function fitWidth(el, maxWidth, basePx) {
+        el.style.fontSize = basePx + "px";
+        const floor = Math.max(8, basePx * FIT_FLOOR);
+        let px = basePx;
+        // Integer steps: the renderer screenshots frames, so the result has to be identical on
+        // every pass rather than converge to a fractional size.
+        while (px > floor && el.offsetWidth > maxWidth) {
+          px -= 1;
+          el.style.fontSize = px + "px";
+        }
+        return px;
+      }
+
+      // Room each slot has before it leaves its box. The card is 840 wide and each headline keeps
+      // its own left inset; the note is 1080 wide behind an overflow-hidden viewport.
+      const HL1_MAX = 840 - 116 - 24,
+        HL2_MAX = 840 - 48,
+        HL3_MAX = 840 - 155 - 24,
+        NOTE_MAX = 1080 - TEXT_X - 40;
+      // Checklist columns, read off the authored markup: the label sits at x=72-74 under a
+      // scaleX(0.86), the marker value at x=389-390, and the tick at x=715.
+      const CL_LABEL_X = 74,
+        CL_VALUE_X = 389,
+        CL_CHECK_X = 715,
+        CL_GAP = 16,
+        CL_LABEL_SCALE = 0.86;
+
+      function markSpan(id, text) {
+        const el = document.createElement("span");
+        el.id = id;
+        el.textContent = text;
+        el.setAttribute("data-layout-allow-overlap", "");
+        el.setAttribute("data-layout-allow-occlusion", "");
+        return el;
+      }
+
+      function fitAll() {
+        fitWidth(document.getElementById("title-l1"), NOTE_MAX, 88);
+        fitWidth(document.getElementById("title-l2"), NOTE_MAX, 88);
+        for (let li = 0; li < 7; li++) {
+          fitWidth(document.getElementById("line-" + li), NOTE_MAX, 52.5);
+        }
+
+        // The checklist cells had no fit, so their character cap was the only thing keeping a
+        // value inside its column -- and a cap counts characters where the column measures
+        // pixels. A gamma.com remix delivered "DIRECT MEE" and the cap of 8 rendered "DIRECT M".
+        // Fit them like every other text slot so the cap can go back to being a backstop.
+        // A label is scaleX(0.86), so its column has to be divided back out of the visual gap
+        // before comparing against the untransformed offsetWidth fitWidth measures.
+        const CL_LABEL_MAX = (CL_VALUE_X - CL_LABEL_X - CL_GAP) / CL_LABEL_SCALE;
+        const CL_VALUE_MAX = CL_CHECK_X - CL_VALUE_X - CL_GAP;
+        document.querySelectorAll(".cl-label").forEach((el) => fitWidth(el, CL_LABEL_MAX, 44));
+        document.querySelectorAll(".cl-value").forEach((el) => fitWidth(el, CL_VALUE_MAX, 50));
+
+        // hl1: split into leading words and the last word, because the underline is drawn under
+        // the last word. Rebuilt from the stored text each pass, so this is idempotent.
+        const hl1 = document.getElementById("hl1");
+        const hl1Text = hl1.dataset.text || hl1.textContent.trim();
+        hl1.dataset.text = hl1Text;
+        const lastSpace = hl1Text.lastIndexOf(" ");
+        hl1.textContent = "";
+        // The card and the note both exist during the 21.375-21.66s crossfade, so the headline
+        // legitimately overlaps the note text there. hl1 carries the waiver for that; its child
+        // spans have to carry it too, or the checker reports the crossfade as a defect.
+        const hl1Head = markSpan(
+          "hl1-head",
+          lastSpace === -1 ? "" : hl1Text.slice(0, lastSpace + 1),
+        );
+        const hl1Tail = markSpan(
+          "hl1-tail",
+          lastSpace === -1 ? hl1Text : hl1Text.slice(lastSpace + 1),
+        );
+        hl1.appendChild(hl1Head);
+        hl1.appendChild(hl1Tail);
+        fitWidth(hl1, HL1_MAX, 110);
+
+        // Underline: follow the last word instead of sitting at a baked-in x. Every constant
+        // below is read off the packaged geometry -- underline left 333, width 415, top 196,
+        // under a 110px "THE POWER" whose box is left 116, top 72, height 160 and whose last
+        // word measures left 261, width 411 inside it. Written this way the packaged copy lands
+        // on exactly its authored pixels, and any other copy keeps the same relationship.
+        // The stroke leads into the word rather than starting at it, which is why LEAD is large
+        // and TAIL is not.
+        const UL_LEAD = 44 / 110; // per em, before the word starts
+        const UL_TAIL = 4 / 110; // per em, past where the word ends
+        const UL_DROP = 124 / 160; // down the line box
+        const ul = document.getElementById("hl-ul");
+        const hl1Px = parseFloat(hl1.style.fontSize);
+        ul.style.left = hl1.offsetLeft + hl1Tail.offsetLeft - UL_LEAD * hl1Px + "px";
+        ul.style.width = Math.max(24, hl1Tail.offsetWidth + UL_TAIL * hl1Px) + "px";
+        ul.style.top = hl1.offsetTop + UL_DROP * hl1.offsetHeight + "px";
+
+        // hl2 is a connector word, so centre it rather than trusting a baked-in left. The card
+        // is rotated -3.03deg, which puts the optical centre a couple of pixels right of the
+        // geometric one -- the packaged "OF" sits at 356 where geometry alone would say 354.
+        const hl2 = document.getElementById("hl2");
+        fitWidth(hl2, HL2_MAX, 100);
+        hl2.style.left = Math.round((840 - hl2.offsetWidth) / 2) + 2 + "px";
+
+        // hl3: fit, then ring its first word. The ring is an SVG element and has no offset*
+        // metrics, so it is placed from the head span's -- minus that span's padding, which is
+        // leading space rather than glyph. Constants again reproduce the packaged ring: 220x150
+        // at left -20, top -8, around a 110px "ONE" whose glyphs measure 226 wide, 157 tall.
+        const hl3 = document.getElementById("hl3");
+        fitWidth(hl3, HL3_MAX, 110);
+        const head = document.getElementById("hl3-head");
+        const headPad = parseFloat(getComputedStyle(head).paddingLeft) || 0;
+        const glyphW = head.offsetWidth - headPad;
+        const hl3Px = parseFloat(hl3.style.fontSize);
+        const ringW = Math.max(40, glyphW - (6 / 110) * hl3Px);
+        const ringH = Math.max(40, head.offsetHeight * (150 / 157));
+        const ring = document.getElementById("hl-circle");
+        ring.setAttribute("width", ringW);
+        ring.setAttribute("height", ringH);
+        ring.setAttribute("viewBox", "0 0 " + ringW + " " + ringH);
+        ring.style.left = head.offsetLeft + headPad - (44 / 110) * hl3Px + "px";
+        ring.style.top = head.offsetTop - (9 / 110) * hl3Px + "px";
+        const ellipse = ring.querySelector("ellipse");
+        ellipse.setAttribute("cx", ringW / 2 - (5 / 110) * hl3Px);
+        ellipse.setAttribute("cy", ringH / 2 - (3 / 110) * hl3Px);
+        ellipse.setAttribute("rx", ringW / 2 - (8 / 110) * hl3Px);
+        ellipse.setAttribute("ry", ringH / 2 - (14 / 110) * hl3Px);
+      }
+
+      // ---------- typewriter timing ----------
+      // EV is the packaged per-character rhythm. Its per-line first/last frames are the window
+      // JUMPS and SCROLLS were hand-tuned against, so the actual characters are distributed
+      // across each line's own window rather than the table being regenerated: a line of any
+      // length finishes before the caret jumps, and the composition's 24.867s and every scroll
+      // curve stay exactly as designed.
+      // EV is ordered line-major, so a per-line slice keeps its frames in typing order.
+      const LINE_FRAMES = (() => {
+        const byLine = [];
+        EV.forEach(([li, , f]) => (byLine[li] = byLine[li] || []).push(f));
+        return byLine;
+      })();
+
+      function typingEvents(lines) {
+        const out = [];
+        lines.forEach((text, li) => {
+          const packaged = LINE_FRAMES[li];
+          if (!packaged || !packaged.length || !text.length) return;
+          if (text.length === packaged.length) {
+            // A line the same length as the packaged copy keeps its hand-tuned rhythm frame for
+            // frame, so the template with its own defaults still renders bit-identically.
+            for (let ri = 0; ri < text.length; ri++) out.push([li, ri, packaged[ri]]);
+            return;
+          }
+          const f0 = packaged[0];
+          const f1 = packaged[packaged.length - 1];
+          const span = Math.max(1, f1 - f0);
+          for (let ri = 0; ri < text.length; ri++) {
+            const f = text.length === 1 ? f0 : f0 + Math.round((span * ri) / (text.length - 1));
+            out.push([li, ri, f]);
+          }
+        });
+        return out;
+      }
+
+      const EVENTS = typingEvents(NOTE_LINES);
+
       const tl = gsap.timeline({ paused: true });
       const body = document.getElementById("note-body");
       const caret = document.getElementById("caret");
@@ -1458,6 +1624,9 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
       // gate-scale corrected (bodyRect.width / 1080) per renderer-traps.
       function build() {
         tl.clear();
+        // Fit first: the caret rides each character's measured right edge, so the type has to be
+        // at its final size before anything is measured.
+        fitAll();
         const bodyRect = body.getBoundingClientRect();
         const scale = bodyRect.width / 1080;
 
@@ -1466,8 +1635,9 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
         document.querySelectorAll(".ch").forEach((el) => tl.set(el, { autoAlpha: 0 }, 0));
 
         // typing reveals + caret rides the revealed span's right edge
-        EV.forEach(([li, ri, f]) => {
+        EVENTS.forEach(([li, ri, f]) => {
           const el = document.getElementById(`ch-${li}-${ri}`);
+          if (!el) return;
           const r = el.getBoundingClientRect();
           const cx = (r.right - bodyRect.left) / scale + CARET_GAP;
           const cy = LINE_TOPS[li] - 8;
@@ -1515,12 +1685,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add notes-reveal" item="notes-reveal" />
-
-That writes `compositions/notes-reveal.html`, plus 5 supporting files under `assets/`.
-
 ## Add it to your video
 
 It runs for 24.85 seconds at 1080×1920. Paste this into your composition:
@@ -1549,7 +1713,16 @@ want to change on the element:
 | --- | --- | --- | --- |
 | `titleL1` | `Things nobody told me` | string | First line of the note title. |
 | `titleL2` | `about video.` | string | Second line of the note title. |
-| `cardTop` | `THE POWER` | string | First marker line on the closing card. |
+| `noteLine1` | `my videos sucked` | string | First typed line of the note. The seven body lines are the bulk of the video: they must be about the brand this video promotes, not about video-making. |
+| `noteLine2` | `my tools cost $$$` | string | Second typed line of the note. |
+| `noteLine3` | `and re-edits never end.` | string | Third typed line of the note. |
+| `noteLine4` | `then i tried writing html only` | string | Fourth typed line of the note — the turn, where the brand enters. |
+| `noteLine5` | `started HyperFrames three weeks ago` | string | Fifth typed line of the note — name the brand here. |
+| `noteLine6` | `the grind is gone, but more than that —` | string | Sixth typed line of the note. |
+| `noteLine7` | `I ship videos weekly.` | string | Last typed line of the note — the payoff. |
+| `cardTop` | `THE POWER` | string | First marker line on the closing card. The underline follows its last word. |
+| `cardMid` | `OF` | string | Short connector line between the two headline lines, centred on the card. |
+| `cardBottom` | `ONE FILE` | string | Last marker line on the closing card. Its first word is ringed. |
 | `check1Label` | `WRITE` | string | Typewriter label of the first checklist row. |
 | `check1Value` | `HTML` | string | Marker value of the first checklist row. |
 | `check2Label` | `RENDER` | string | Typewriter label of the second checklist row. |
@@ -1566,7 +1739,7 @@ defaults, so this behaves exactly like the preview above until you change one:
 <div
   data-composition-id="notes-reveal"
   data-composition-src="compositions/notes-reveal.html"
-  data-variable-values='{"titleL1":"Things nobody told me","titleL2":"about video.","cardTop":"THE POWER","check1Label":"WRITE","check1Value":"HTML","check2Label":"RENDER","check2Value":"IN 4K","check3Label":"SHIP","check3Value":"TODAY","brandLogo":"assets/hyperframes-logo-black.svg","brandDomain":"hyperframes.heygen.com"}'
+  data-variable-values='{"titleL1":"Things nobody told me","titleL2":"about video.","noteLine1":"my videos sucked","noteLine2":"my tools cost $$$","noteLine3":"and re-edits never end.","noteLine4":"then i tried writing html only","noteLine5":"started HyperFrames three weeks ago","noteLine6":"the grind is gone, but more than that —","noteLine7":"I ship videos weekly.","cardTop":"THE POWER","cardMid":"OF","cardBottom":"ONE FILE","check1Label":"WRITE","check1Value":"HTML","check2Label":"RENDER","check2Value":"IN 4K","check3Label":"SHIP","check3Value":"TODAY","brandLogo":"assets/hyperframes-logo-black.svg","brandDomain":"hyperframes.heygen.com"}'
 ></div>
 ```
 
@@ -1581,7 +1754,16 @@ defaults, so this behaves exactly like the preview above until you change one:
   data-composition-variables='[
     { "id": "titleL1", "type": "string", "role": "content", "label": "Note title line 1", "description": "First line of the note title.", "default": "Things nobody told me" },
     { "id": "titleL2", "type": "string", "role": "content", "label": "Note title line 2", "description": "Second line of the note title.", "default": "about video." },
-    { "id": "cardTop", "type": "string", "role": "content", "label": "Card headline top", "description": "First marker line on the closing card.", "default": "THE POWER" },
+    { "id": "noteLine1", "type": "string", "role": "content", "label": "Note body line 1", "description": "First typed line of the note. The seven body lines are the bulk of the video: they must be about the brand this video promotes, not about video-making.", "default": "my videos sucked" },
+    { "id": "noteLine2", "type": "string", "role": "content", "label": "Note body line 2", "description": "Second typed line of the note.", "default": "my tools cost $$$" },
+    { "id": "noteLine3", "type": "string", "role": "content", "label": "Note body line 3", "description": "Third typed line of the note.", "default": "and re-edits never end." },
+    { "id": "noteLine4", "type": "string", "role": "content", "label": "Note body line 4", "description": "Fourth typed line of the note — the turn, where the brand enters.", "default": "then i tried writing html only" },
+    { "id": "noteLine5", "type": "string", "role": "content", "label": "Note body line 5", "description": "Fifth typed line of the note — name the brand here.", "default": "started HyperFrames three weeks ago" },
+    { "id": "noteLine6", "type": "string", "role": "content", "label": "Note body line 6", "description": "Sixth typed line of the note.", "default": "the grind is gone, but more than that —" },
+    { "id": "noteLine7", "type": "string", "role": "content", "label": "Note body line 7", "description": "Last typed line of the note — the payoff.", "default": "I ship videos weekly." },
+    { "id": "cardTop", "type": "string", "role": "content", "label": "Card headline top", "description": "First marker line on the closing card. The underline follows its last word.", "default": "THE POWER" },
+    { "id": "cardMid", "type": "string", "role": "content", "label": "Card headline middle", "description": "Short connector line between the two headline lines, centred on the card.", "default": "OF" },
+    { "id": "cardBottom", "type": "string", "role": "content", "label": "Card headline bottom", "description": "Last marker line on the closing card. Its first word is ringed.", "default": "ONE FILE" },
     { "id": "check1Label", "type": "string", "role": "content", "label": "Checklist 1 label", "description": "Typewriter label of the first checklist row.", "default": "WRITE" },
     { "id": "check1Value", "type": "string", "role": "content", "label": "Checklist 1 value", "description": "Marker value of the first checklist row.", "default": "HTML" },
     { "id": "check2Label", "type": "string", "role": "content", "label": "Checklist 2 label", "description": "Typewriter label of the second checklist row.", "default": "RENDER" },
@@ -1842,7 +2024,10 @@ defaults, so this behaves exactly like the preview above until you change one:
         font-weight: 400;
         letter-spacing: 0em;
         color: #191919;
-        white-space: nowrap;
+        /* `pre`, not `nowrap`: the per-character spans are built at runtime from the line
+           variables, and a leading or trailing space in a supplied line would collapse under
+           `nowrap` — the caret then stalls on a zero-width span. */
+        white-space: pre;
       }
       #caret {
         position: absolute;
@@ -1937,7 +2122,6 @@ defaults, so this behaves exactly like the preview above until you change one:
             <div
               class="mk"
               id="hl1"
-              data-layout-allow-overflow
               data-layout-allow-overlap
               data-layout-allow-occlusion
               style="left: 116px; top: 72px"
@@ -1948,7 +2132,6 @@ defaults, so this behaves exactly like the preview above until you change one:
             <div
               class="mk"
               id="hl2"
-              data-layout-allow-overflow
               data-layout-allow-overlap
               data-layout-allow-occlusion
               style="left: 356px; top: 181px"
@@ -1958,7 +2141,6 @@ defaults, so this behaves exactly like the preview above until you change one:
             <div
               class="mk"
               id="hl3"
-              data-layout-allow-overflow
               data-layout-allow-overlap
               data-layout-allow-occlusion
               style="left: 155px; top: 329px"
@@ -1979,8 +2161,19 @@ defaults, so this behaves exactly like the preview above until you change one:
                   stroke="#602640"
                   stroke-width="8"
                 /></svg
-              ><span style="padding-left: 24px">ONE</span
-              ><span style="padding-left: 52px">FILE</span>
+              ><span
+                id="hl3-head"
+                data-layout-allow-overlap
+                data-layout-allow-occlusion
+                style="padding-left: 24px"
+                >ONE</span
+              ><span
+                id="hl3-tail"
+                data-layout-allow-overlap
+                data-layout-allow-occlusion
+                style="padding-left: 52px"
+                >FILE</span
+              >
             </div>
 
             <div class="cl-label" style="left: 74px; top: 1073px">WRITE</div>
@@ -2223,16 +2416,7 @@ defaults, so this behaves exactly like the preview above until you change one:
                 data-layout-allow-overlap
                 data-layout-allow-occlusion
                 style="top: 283px"
-              >
-                <span class="ch" id="ch-0-0">m</span><span class="ch" id="ch-0-1">y</span
-                ><span class="ch" id="ch-0-2"> </span><span class="ch" id="ch-0-3">v</span
-                ><span class="ch" id="ch-0-4">i</span><span class="ch" id="ch-0-5">d</span
-                ><span class="ch" id="ch-0-6">e</span><span class="ch" id="ch-0-7">o</span
-                ><span class="ch" id="ch-0-8">s</span><span class="ch" id="ch-0-9"> </span
-                ><span class="ch" id="ch-0-10">s</span><span class="ch" id="ch-0-11">u</span
-                ><span class="ch" id="ch-0-12">c</span><span class="ch" id="ch-0-13">k</span
-                ><span class="ch" id="ch-0-14">e</span><span class="ch" id="ch-0-15">d</span>
-              </div>
+              ></div>
               <div
                 class="bodyline"
                 id="line-1"
@@ -2240,17 +2424,7 @@ defaults, so this behaves exactly like the preview above until you change one:
                 data-layout-allow-overlap
                 data-layout-allow-occlusion
                 style="top: 433px"
-              >
-                <span class="ch" id="ch-1-0">m</span><span class="ch" id="ch-1-1">y</span
-                ><span class="ch" id="ch-1-2"> </span><span class="ch" id="ch-1-3">t</span
-                ><span class="ch" id="ch-1-4">o</span><span class="ch" id="ch-1-5">o</span
-                ><span class="ch" id="ch-1-6">l</span><span class="ch" id="ch-1-7">s</span
-                ><span class="ch" id="ch-1-8"> </span><span class="ch" id="ch-1-9">c</span
-                ><span class="ch" id="ch-1-10">o</span><span class="ch" id="ch-1-11">s</span
-                ><span class="ch" id="ch-1-12">t</span><span class="ch" id="ch-1-13"> </span
-                ><span class="ch" id="ch-1-14">$</span><span class="ch" id="ch-1-15">$</span
-                ><span class="ch" id="ch-1-16">$</span>
-              </div>
+              ></div>
               <div
                 class="bodyline"
                 id="line-2"
@@ -2258,20 +2432,7 @@ defaults, so this behaves exactly like the preview above until you change one:
                 data-layout-allow-overlap
                 data-layout-allow-occlusion
                 style="top: 583px"
-              >
-                <span class="ch" id="ch-2-0">a</span><span class="ch" id="ch-2-1">n</span
-                ><span class="ch" id="ch-2-2">d</span><span class="ch" id="ch-2-3"> </span
-                ><span class="ch" id="ch-2-4">r</span><span class="ch" id="ch-2-5">e</span
-                ><span class="ch" id="ch-2-6">-</span><span class="ch" id="ch-2-7">e</span
-                ><span class="ch" id="ch-2-8">d</span><span class="ch" id="ch-2-9">i</span
-                ><span class="ch" id="ch-2-10">t</span><span class="ch" id="ch-2-11">s</span
-                ><span class="ch" id="ch-2-12"> </span><span class="ch" id="ch-2-13">n</span
-                ><span class="ch" id="ch-2-14">e</span><span class="ch" id="ch-2-15">v</span
-                ><span class="ch" id="ch-2-16">e</span><span class="ch" id="ch-2-17">r</span
-                ><span class="ch" id="ch-2-18"> </span><span class="ch" id="ch-2-19">e</span
-                ><span class="ch" id="ch-2-20">n</span><span class="ch" id="ch-2-21">d</span
-                ><span class="ch" id="ch-2-22">.</span>
-              </div>
+              ></div>
               <div
                 class="bodyline"
                 id="line-3"
@@ -2279,23 +2440,7 @@ defaults, so this behaves exactly like the preview above until you change one:
                 data-layout-allow-overlap
                 data-layout-allow-occlusion
                 style="top: 733px"
-              >
-                <span class="ch" id="ch-3-0">t</span><span class="ch" id="ch-3-1">h</span
-                ><span class="ch" id="ch-3-2">e</span><span class="ch" id="ch-3-3">n</span
-                ><span class="ch" id="ch-3-4"> </span><span class="ch" id="ch-3-5">i</span
-                ><span class="ch" id="ch-3-6"> </span><span class="ch" id="ch-3-7">t</span
-                ><span class="ch" id="ch-3-8">r</span><span class="ch" id="ch-3-9">i</span
-                ><span class="ch" id="ch-3-10">e</span><span class="ch" id="ch-3-11">d</span
-                ><span class="ch" id="ch-3-12"> </span><span class="ch" id="ch-3-13">w</span
-                ><span class="ch" id="ch-3-14">r</span><span class="ch" id="ch-3-15">i</span
-                ><span class="ch" id="ch-3-16">t</span><span class="ch" id="ch-3-17">i</span
-                ><span class="ch" id="ch-3-18">n</span><span class="ch" id="ch-3-19">g</span
-                ><span class="ch" id="ch-3-20"> </span><span class="ch" id="ch-3-21">h</span
-                ><span class="ch" id="ch-3-22">t</span><span class="ch" id="ch-3-23">m</span
-                ><span class="ch" id="ch-3-24">l</span><span class="ch" id="ch-3-25"> </span
-                ><span class="ch" id="ch-3-26">o</span><span class="ch" id="ch-3-27">n</span
-                ><span class="ch" id="ch-3-28">l</span><span class="ch" id="ch-3-29">y</span>
-              </div>
+              ></div>
               <div
                 class="bodyline"
                 id="line-4"
@@ -2303,26 +2448,7 @@ defaults, so this behaves exactly like the preview above until you change one:
                 data-layout-allow-overlap
                 data-layout-allow-occlusion
                 style="top: 883px"
-              >
-                <span class="ch" id="ch-4-0">s</span><span class="ch" id="ch-4-1">t</span
-                ><span class="ch" id="ch-4-2">a</span><span class="ch" id="ch-4-3">r</span
-                ><span class="ch" id="ch-4-4">t</span><span class="ch" id="ch-4-5">e</span
-                ><span class="ch" id="ch-4-6">d</span><span class="ch" id="ch-4-7"> </span
-                ><span class="ch" id="ch-4-8">H</span><span class="ch" id="ch-4-9">y</span
-                ><span class="ch" id="ch-4-10">p</span><span class="ch" id="ch-4-11">e</span
-                ><span class="ch" id="ch-4-12">r</span><span class="ch" id="ch-4-13">F</span
-                ><span class="ch" id="ch-4-14">r</span><span class="ch" id="ch-4-15">a</span
-                ><span class="ch" id="ch-4-16">m</span><span class="ch" id="ch-4-17">e</span
-                ><span class="ch" id="ch-4-18">s</span><span class="ch" id="ch-4-19"> </span
-                ><span class="ch" id="ch-4-20">t</span><span class="ch" id="ch-4-21">h</span
-                ><span class="ch" id="ch-4-22">r</span><span class="ch" id="ch-4-23">e</span
-                ><span class="ch" id="ch-4-24">e</span><span class="ch" id="ch-4-25"> </span
-                ><span class="ch" id="ch-4-26">w</span><span class="ch" id="ch-4-27">e</span
-                ><span class="ch" id="ch-4-28">e</span><span class="ch" id="ch-4-29">k</span
-                ><span class="ch" id="ch-4-30">s</span><span class="ch" id="ch-4-31"> </span
-                ><span class="ch" id="ch-4-32">a</span><span class="ch" id="ch-4-33">g</span
-                ><span class="ch" id="ch-4-34">o</span>
-              </div>
+              ></div>
               <div
                 class="bodyline"
                 id="line-5"
@@ -2330,28 +2456,7 @@ defaults, so this behaves exactly like the preview above until you change one:
                 data-layout-allow-overlap
                 data-layout-allow-occlusion
                 style="top: 1033px"
-              >
-                <span class="ch" id="ch-5-0">t</span><span class="ch" id="ch-5-1">h</span
-                ><span class="ch" id="ch-5-2">e</span><span class="ch" id="ch-5-3"> </span
-                ><span class="ch" id="ch-5-4">g</span><span class="ch" id="ch-5-5">r</span
-                ><span class="ch" id="ch-5-6">i</span><span class="ch" id="ch-5-7">n</span
-                ><span class="ch" id="ch-5-8">d</span><span class="ch" id="ch-5-9"> </span
-                ><span class="ch" id="ch-5-10">i</span><span class="ch" id="ch-5-11">s</span
-                ><span class="ch" id="ch-5-12"> </span><span class="ch" id="ch-5-13">g</span
-                ><span class="ch" id="ch-5-14">o</span><span class="ch" id="ch-5-15">n</span
-                ><span class="ch" id="ch-5-16">e</span><span class="ch" id="ch-5-17">,</span
-                ><span class="ch" id="ch-5-18"> </span><span class="ch" id="ch-5-19">b</span
-                ><span class="ch" id="ch-5-20">u</span><span class="ch" id="ch-5-21">t</span
-                ><span class="ch" id="ch-5-22"> </span><span class="ch" id="ch-5-23">m</span
-                ><span class="ch" id="ch-5-24">o</span><span class="ch" id="ch-5-25">r</span
-                ><span class="ch" id="ch-5-26">e</span><span class="ch" id="ch-5-27"> </span
-                ><span class="ch" id="ch-5-28">t</span><span class="ch" id="ch-5-29">h</span
-                ><span class="ch" id="ch-5-30">a</span><span class="ch" id="ch-5-31">n</span
-                ><span class="ch" id="ch-5-32"> </span><span class="ch" id="ch-5-33">t</span
-                ><span class="ch" id="ch-5-34">h</span><span class="ch" id="ch-5-35">a</span
-                ><span class="ch" id="ch-5-36">t</span><span class="ch" id="ch-5-37"> </span
-                ><span class="ch" id="ch-5-38">—</span>
-              </div>
+              ></div>
               <div
                 class="bodyline"
                 id="line-6"
@@ -2359,19 +2464,7 @@ defaults, so this behaves exactly like the preview above until you change one:
                 data-layout-allow-overlap
                 data-layout-allow-occlusion
                 style="top: 1183px"
-              >
-                <span class="ch" id="ch-6-0">I</span><span class="ch" id="ch-6-1"> </span
-                ><span class="ch" id="ch-6-2">s</span><span class="ch" id="ch-6-3">h</span
-                ><span class="ch" id="ch-6-4">i</span><span class="ch" id="ch-6-5">p</span
-                ><span class="ch" id="ch-6-6"> </span><span class="ch" id="ch-6-7">v</span
-                ><span class="ch" id="ch-6-8">i</span><span class="ch" id="ch-6-9">d</span
-                ><span class="ch" id="ch-6-10">e</span><span class="ch" id="ch-6-11">o</span
-                ><span class="ch" id="ch-6-12">s</span><span class="ch" id="ch-6-13"> </span
-                ><span class="ch" id="ch-6-14">w</span><span class="ch" id="ch-6-15">e</span
-                ><span class="ch" id="ch-6-16">e</span><span class="ch" id="ch-6-17">k</span
-                ><span class="ch" id="ch-6-18">l</span><span class="ch" id="ch-6-19">y</span
-                ><span class="ch" id="ch-6-20">.</span>
-              </div>
+              ></div>
               <div id="caret"></div>
             </div>
           </div>
@@ -2650,12 +2743,19 @@ defaults, so this behaves exactly like the preview above until you change one:
 
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
     <script>
+      // The text every slot resolved to, kept for the timeline: the typewriter has to know how
+      // many characters each body line ended up with.
+      const NOTE_LINES = [];
+
       // variables: every override falls back to its declared default
       (function () {
         var vars =
           window.__hyperframes && typeof window.__hyperframes.getVariables === "function"
             ? window.__hyperframes.getVariables()
             : {};
+        // `mx` is a backstop, not the layout rule. Every text slot below is width-fitted at
+        // build time, so the cap only has to be low enough that the fit floor can still hold
+        // the string inside its box -- it is not what keeps the design intact.
         function t(v, fb, mx) {
           if (typeof v !== "string") return fb;
           var s = v.trim();
@@ -2665,18 +2765,61 @@ defaults, so this behaves exactly like the preview above until you change one:
         document.getElementById("title-l1").textContent = t(
           vars.titleL1,
           "Things nobody told me",
-          26,
+          34,
         );
-        document.getElementById("title-l2").textContent = t(vars.titleL2, "about video.", 26);
-        document.getElementById("hl1").textContent = t(vars.cardTop, "THE POWER", 12);
+        document.getElementById("title-l2").textContent = t(vars.titleL2, "about video.", 34);
+
+        // Body: build the per-character spans the reveal animation addresses by id, instead of
+        // shipping them pre-split. Pre-split spans made the note's seven lines -- 46% of the
+        // running time, and the only place the note says anything -- permanently unwritable,
+        // so every remix of this template kept HyperFrames' own copy about making videos.
+        var BODY_DEFAULTS = [
+          "my videos sucked",
+          "my tools cost $$$",
+          "and re-edits never end.",
+          "then i tried writing html only",
+          "started HyperFrames three weeks ago",
+          "the grind is gone, but more than that —",
+          "I ship videos weekly.",
+        ];
+        BODY_DEFAULTS.forEach(function (fallback, li) {
+          var text = t(vars["noteLine" + (li + 1)], fallback, 52);
+          NOTE_LINES.push(text);
+          var host = document.getElementById("line-" + li);
+          host.textContent = "";
+          for (var ri = 0; ri < text.length; ri++) {
+            var ch = document.createElement("span");
+            ch.className = "ch";
+            ch.id = "ch-" + li + "-" + ri;
+            ch.textContent = text.charAt(ri);
+            host.appendChild(ch);
+          }
+        });
+
+        // Card headline. `cardMid` and `cardBottom` were literals until now, which is why a
+        // remix could only ever change the first of the three lines.
+        document.getElementById("hl1").textContent = t(vars.cardTop, "THE POWER", 16);
+        document.getElementById("hl2").textContent = t(vars.cardMid, "OF", 6);
+        // The ring is a sibling of the text, so the words go in their own spans: the first one
+        // is what the ring is drawn around.
+        var bottom = t(vars.cardBottom, "ONE FILE", 16);
+        var cut = bottom.indexOf(" ");
+        var head = cut === -1 ? bottom : bottom.slice(0, cut);
+        var tail = cut === -1 ? "" : bottom.slice(cut + 1);
+        var hl3Head = document.getElementById("hl3-head");
+        var hl3Tail = document.getElementById("hl3-tail");
+        hl3Head.textContent = head;
+        hl3Tail.textContent = tail;
+        hl3Tail.style.display = tail ? "" : "none";
+
         var labels = document.querySelectorAll(".cl-label");
         var values = document.querySelectorAll(".cl-value");
-        labels[0].textContent = t(vars.check1Label, "WRITE", 8);
-        values[0].textContent = t(vars.check1Value, "HTML", 8);
-        labels[1].textContent = t(vars.check2Label, "RENDER", 8);
-        values[1].textContent = t(vars.check2Value, "IN 4K", 8);
-        labels[2].textContent = t(vars.check3Label, "SHIP", 8);
-        values[2].textContent = t(vars.check3Value, "TODAY", 8);
+        labels[0].textContent = t(vars.check1Label, "WRITE", 18);
+        values[0].textContent = t(vars.check1Value, "HTML", 18);
+        labels[1].textContent = t(vars.check2Label, "RENDER", 18);
+        values[1].textContent = t(vars.check2Value, "IN 4K", 18);
+        labels[2].textContent = t(vars.check3Label, "SHIP", 18);
+        values[2].textContent = t(vars.check3Value, "TODAY", 18);
         document.getElementById("brand-domain").textContent = t(
           vars.brandDomain,
           "hyperframes.heygen.com",
@@ -3006,6 +3149,196 @@ defaults, so this behaves exactly like the preview above until you change one:
       const TEXT_X = 62,
         VIEW_TOP = 272;
 
+      // ---------- width fitting ----------
+      // Every text slot sits at a fixed left edge with `white-space` holding it on one line, so
+      // a value one word longer than the packaged default simply runs off its box. The only
+      // protection used to be a character cap, which is the wrong unit: `cardTop` allowed 12
+      // characters, "THE POWER" (9) fits, and "CREATE DECKS" (12) does not -- so both reported
+      // gamma remixes shipped with the closing headline over the edge of the card.
+      // Fitting shrinks the type until it fits and never grows it past the designed size, so a
+      // value the length of the default renders exactly as drawn.
+      //
+      // The card headlines also carried `data-layout-allow-overflow`, which switched off the one
+      // check that would have caught this; those waivers are gone. `#hl1`/`#hl2`/`#hl3` are
+      // fixed on a card that never moves, so any overflow there is a defect. The note's title
+      // and body lines keep theirs: `#note-body` is translated upward across the whole scene, so
+      // they leave the canvas vertically by design. Note that `hyperframes check` only ever sees
+      // the declared defaults -- it takes no variable values -- so the checker guards the
+      // template and the fit is what guards a remix.
+      // The floor and the character caps have to agree: a cap that admits a string still too wide
+      // at the floor size puts the text back outside its box, which is the bug this whole pass is
+      // about. Measured against the packaged copy -- "Things nobody told me" is 21 characters and
+      // 900px at 88px, so 42.9px per character -- 0.45 leaves every declared cap satisfiable with
+      // room to spare, and only absurd input ever gets near it.
+      const FIT_FLOOR = 0.45;
+
+      // Measure with `offset*`, never `getBoundingClientRect()`. The card is rotated -3.03deg, so
+      // a rect is the axis-aligned box of the rotated element and overstates the width by about
+      // 7px -- enough to push the packaged "THE POWER" past its own limit and shrink a headline
+      // that was already correct. `offsetWidth`/`offsetLeft` are layout values: no transform, no
+      // render scale, and `offsetLeft` on a child is relative to the positioned ancestor, which
+      // is exactly the coordinate space the baked-in decoration positions were authored in.
+      function fitWidth(el, maxWidth, basePx) {
+        el.style.fontSize = basePx + "px";
+        const floor = Math.max(8, basePx * FIT_FLOOR);
+        let px = basePx;
+        // Integer steps: the renderer screenshots frames, so the result has to be identical on
+        // every pass rather than converge to a fractional size.
+        while (px > floor && el.offsetWidth > maxWidth) {
+          px -= 1;
+          el.style.fontSize = px + "px";
+        }
+        return px;
+      }
+
+      // Room each slot has before it leaves its box. The card is 840 wide and each headline keeps
+      // its own left inset; the note is 1080 wide behind an overflow-hidden viewport.
+      const HL1_MAX = 840 - 116 - 24,
+        HL2_MAX = 840 - 48,
+        HL3_MAX = 840 - 155 - 24,
+        NOTE_MAX = 1080 - TEXT_X - 40;
+      // Checklist columns, read off the authored markup: the label sits at x=72-74 under a
+      // scaleX(0.86), the marker value at x=389-390, and the tick at x=715.
+      const CL_LABEL_X = 74,
+        CL_VALUE_X = 389,
+        CL_CHECK_X = 715,
+        CL_GAP = 16,
+        CL_LABEL_SCALE = 0.86;
+
+      function markSpan(id, text) {
+        const el = document.createElement("span");
+        el.id = id;
+        el.textContent = text;
+        el.setAttribute("data-layout-allow-overlap", "");
+        el.setAttribute("data-layout-allow-occlusion", "");
+        return el;
+      }
+
+      function fitAll() {
+        fitWidth(document.getElementById("title-l1"), NOTE_MAX, 88);
+        fitWidth(document.getElementById("title-l2"), NOTE_MAX, 88);
+        for (let li = 0; li < 7; li++) {
+          fitWidth(document.getElementById("line-" + li), NOTE_MAX, 52.5);
+        }
+
+        // The checklist cells had no fit, so their character cap was the only thing keeping a
+        // value inside its column -- and a cap counts characters where the column measures
+        // pixels. A gamma.com remix delivered "DIRECT MEE" and the cap of 8 rendered "DIRECT M".
+        // Fit them like every other text slot so the cap can go back to being a backstop.
+        // A label is scaleX(0.86), so its column has to be divided back out of the visual gap
+        // before comparing against the untransformed offsetWidth fitWidth measures.
+        const CL_LABEL_MAX = (CL_VALUE_X - CL_LABEL_X - CL_GAP) / CL_LABEL_SCALE;
+        const CL_VALUE_MAX = CL_CHECK_X - CL_VALUE_X - CL_GAP;
+        document.querySelectorAll(".cl-label").forEach((el) => fitWidth(el, CL_LABEL_MAX, 44));
+        document.querySelectorAll(".cl-value").forEach((el) => fitWidth(el, CL_VALUE_MAX, 50));
+
+        // hl1: split into leading words and the last word, because the underline is drawn under
+        // the last word. Rebuilt from the stored text each pass, so this is idempotent.
+        const hl1 = document.getElementById("hl1");
+        const hl1Text = hl1.dataset.text || hl1.textContent.trim();
+        hl1.dataset.text = hl1Text;
+        const lastSpace = hl1Text.lastIndexOf(" ");
+        hl1.textContent = "";
+        // The card and the note both exist during the 21.375-21.66s crossfade, so the headline
+        // legitimately overlaps the note text there. hl1 carries the waiver for that; its child
+        // spans have to carry it too, or the checker reports the crossfade as a defect.
+        const hl1Head = markSpan(
+          "hl1-head",
+          lastSpace === -1 ? "" : hl1Text.slice(0, lastSpace + 1),
+        );
+        const hl1Tail = markSpan(
+          "hl1-tail",
+          lastSpace === -1 ? hl1Text : hl1Text.slice(lastSpace + 1),
+        );
+        hl1.appendChild(hl1Head);
+        hl1.appendChild(hl1Tail);
+        fitWidth(hl1, HL1_MAX, 110);
+
+        // Underline: follow the last word instead of sitting at a baked-in x. Every constant
+        // below is read off the packaged geometry -- underline left 333, width 415, top 196,
+        // under a 110px "THE POWER" whose box is left 116, top 72, height 160 and whose last
+        // word measures left 261, width 411 inside it. Written this way the packaged copy lands
+        // on exactly its authored pixels, and any other copy keeps the same relationship.
+        // The stroke leads into the word rather than starting at it, which is why LEAD is large
+        // and TAIL is not.
+        const UL_LEAD = 44 / 110; // per em, before the word starts
+        const UL_TAIL = 4 / 110; // per em, past where the word ends
+        const UL_DROP = 124 / 160; // down the line box
+        const ul = document.getElementById("hl-ul");
+        const hl1Px = parseFloat(hl1.style.fontSize);
+        ul.style.left = hl1.offsetLeft + hl1Tail.offsetLeft - UL_LEAD * hl1Px + "px";
+        ul.style.width = Math.max(24, hl1Tail.offsetWidth + UL_TAIL * hl1Px) + "px";
+        ul.style.top = hl1.offsetTop + UL_DROP * hl1.offsetHeight + "px";
+
+        // hl2 is a connector word, so centre it rather than trusting a baked-in left. The card
+        // is rotated -3.03deg, which puts the optical centre a couple of pixels right of the
+        // geometric one -- the packaged "OF" sits at 356 where geometry alone would say 354.
+        const hl2 = document.getElementById("hl2");
+        fitWidth(hl2, HL2_MAX, 100);
+        hl2.style.left = Math.round((840 - hl2.offsetWidth) / 2) + 2 + "px";
+
+        // hl3: fit, then ring its first word. The ring is an SVG element and has no offset*
+        // metrics, so it is placed from the head span's -- minus that span's padding, which is
+        // leading space rather than glyph. Constants again reproduce the packaged ring: 220x150
+        // at left -20, top -8, around a 110px "ONE" whose glyphs measure 226 wide, 157 tall.
+        const hl3 = document.getElementById("hl3");
+        fitWidth(hl3, HL3_MAX, 110);
+        const head = document.getElementById("hl3-head");
+        const headPad = parseFloat(getComputedStyle(head).paddingLeft) || 0;
+        const glyphW = head.offsetWidth - headPad;
+        const hl3Px = parseFloat(hl3.style.fontSize);
+        const ringW = Math.max(40, glyphW - (6 / 110) * hl3Px);
+        const ringH = Math.max(40, head.offsetHeight * (150 / 157));
+        const ring = document.getElementById("hl-circle");
+        ring.setAttribute("width", ringW);
+        ring.setAttribute("height", ringH);
+        ring.setAttribute("viewBox", "0 0 " + ringW + " " + ringH);
+        ring.style.left = head.offsetLeft + headPad - (44 / 110) * hl3Px + "px";
+        ring.style.top = head.offsetTop - (9 / 110) * hl3Px + "px";
+        const ellipse = ring.querySelector("ellipse");
+        ellipse.setAttribute("cx", ringW / 2 - (5 / 110) * hl3Px);
+        ellipse.setAttribute("cy", ringH / 2 - (3 / 110) * hl3Px);
+        ellipse.setAttribute("rx", ringW / 2 - (8 / 110) * hl3Px);
+        ellipse.setAttribute("ry", ringH / 2 - (14 / 110) * hl3Px);
+      }
+
+      // ---------- typewriter timing ----------
+      // EV is the packaged per-character rhythm. Its per-line first/last frames are the window
+      // JUMPS and SCROLLS were hand-tuned against, so the actual characters are distributed
+      // across each line's own window rather than the table being regenerated: a line of any
+      // length finishes before the caret jumps, and the composition's 24.867s and every scroll
+      // curve stay exactly as designed.
+      // EV is ordered line-major, so a per-line slice keeps its frames in typing order.
+      const LINE_FRAMES = (() => {
+        const byLine = [];
+        EV.forEach(([li, , f]) => (byLine[li] = byLine[li] || []).push(f));
+        return byLine;
+      })();
+
+      function typingEvents(lines) {
+        const out = [];
+        lines.forEach((text, li) => {
+          const packaged = LINE_FRAMES[li];
+          if (!packaged || !packaged.length || !text.length) return;
+          if (text.length === packaged.length) {
+            // A line the same length as the packaged copy keeps its hand-tuned rhythm frame for
+            // frame, so the template with its own defaults still renders bit-identically.
+            for (let ri = 0; ri < text.length; ri++) out.push([li, ri, packaged[ri]]);
+            return;
+          }
+          const f0 = packaged[0];
+          const f1 = packaged[packaged.length - 1];
+          const span = Math.max(1, f1 - f0);
+          for (let ri = 0; ri < text.length; ri++) {
+            const f = text.length === 1 ? f0 : f0 + Math.round((span * ri) / (text.length - 1));
+            out.push([li, ri, f]);
+          }
+        });
+        return out;
+      }
+
+      const EVENTS = typingEvents(NOTE_LINES);
+
       const tl = gsap.timeline({ paused: true });
       const body = document.getElementById("note-body");
       const caret = document.getElementById("caret");
@@ -3019,6 +3352,9 @@ defaults, so this behaves exactly like the preview above until you change one:
       // gate-scale corrected (bodyRect.width / 1080) per renderer-traps.
       function build() {
         tl.clear();
+        // Fit first: the caret rides each character's measured right edge, so the type has to be
+        // at its final size before anything is measured.
+        fitAll();
         const bodyRect = body.getBoundingClientRect();
         const scale = bodyRect.width / 1080;
 
@@ -3027,8 +3363,9 @@ defaults, so this behaves exactly like the preview above until you change one:
         document.querySelectorAll(".ch").forEach((el) => tl.set(el, { autoAlpha: 0 }, 0));
 
         // typing reveals + caret rides the revealed span's right edge
-        EV.forEach(([li, ri, f]) => {
+        EVENTS.forEach(([li, ri, f]) => {
           const el = document.getElementById(`ch-${li}-${ri}`);
+          if (!el) return;
           const r = el.getBoundingClientRect();
           const cx = (r.right - bodyRect.left) / scale + CARET_GAP;
           const cy = LINE_TOPS[li] - 8;
diff --git a/docs/catalog/blocks/notification-cascade.mdx b/docs/catalog/blocks/notification-cascade.mdx
index 9129470678..e6111bb4d6 100644
--- a/docs/catalog/blocks/notification-cascade.mdx
+++ b/docs/catalog/blocks/notification-cascade.mdx
@@ -6,6 +6,12 @@ description: "Phone notifications land one after another and stack up the screen
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add notification-cascade" item="notification-cascade" />
+
+That writes `compositions/notification-cascade.html`, plus 3 supporting files under `assets/`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/notification-cascade.json"
   compositionId="notification-cascade"
@@ -538,12 +544,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add notification-cascade" item="notification-cascade" />
-
-That writes `compositions/notification-cascade.html`, plus 3 supporting files under `assets/`.
-
 ## Add it to your video
 
 It runs for 14 seconds at 1080×1920. Paste this into your composition:
diff --git a/docs/catalog/blocks/nyc-paris-flight.mdx b/docs/catalog/blocks/nyc-paris-flight.mdx
index 9bf3a248b0..ec0aabbc10 100644
--- a/docs/catalog/blocks/nyc-paris-flight.mdx
+++ b/docs/catalog/blocks/nyc-paris-flight.mdx
@@ -5,6 +5,12 @@ description: "Apple-style realistic map animation with a plane flying from New Y
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add nyc-paris-flight" item="nyc-paris-flight" />
+
+That writes `compositions/nyc-paris-flight.html`, plus 2 supporting files under `assets/`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="nyc-paris-flight preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/nyc-paris-flight.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add nyc-paris-flight" item="nyc-paris-flight" />
-
-That writes `compositions/nyc-paris-flight.html`, plus 2 supporting files under `assets/`.
-
 ## Source
 
 <Accordion title={`nyc-paris-flight.html`}>
diff --git a/docs/catalog/blocks/organic-light-leak-overlay.mdx b/docs/catalog/blocks/organic-light-leak-overlay.mdx
index c88a0f5d60..faaf51af30 100644
--- a/docs/catalog/blocks/organic-light-leak-overlay.mdx
+++ b/docs/catalog/blocks/organic-light-leak-overlay.mdx
@@ -5,6 +5,12 @@ description: "Finite CSS light-leak overlay for memory beats and motivated trans
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add organic-light-leak-overlay" item="organic-light-leak-overlay" />
+
+That writes one file: `compositions/organic-light-leak-overlay.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="organic-light-leak-overlay preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/organic-light-leak-overlay.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/organic-light-leak-overlay.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add organic-light-leak-overlay" item="organic-light-leak-overlay" />
-
-That writes one file: `compositions/organic-light-leak-overlay.html`.
-
 ## Add it to your video
 
 It runs for 4 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/oscilloscope-trace.mdx b/docs/catalog/blocks/oscilloscope-trace.mdx
index 8465bda66e..2b55154985 100644
--- a/docs/catalog/blocks/oscilloscope-trace.mdx
+++ b/docs/catalog/blocks/oscilloscope-trace.mdx
@@ -6,6 +6,12 @@ description: "CRT oscilloscope beam sweeping a waveform across a 10x8 graticule,
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add oscilloscope-trace" item="oscilloscope-trace" />
+
+That writes one file: `compositions/oscilloscope-trace.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/oscilloscope-trace.json"
   compositionId="oscilloscope-trace"
@@ -538,12 +544,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add oscilloscope-trace" item="oscilloscope-trace" />
-
-That writes one file: `compositions/oscilloscope-trace.html`.
-
 ## Add it to your video
 
 It runs for 6 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/rack-focus.mdx b/docs/catalog/blocks/rack-focus.mdx
index 146fc09ccf..55c044fd2e 100644
--- a/docs/catalog/blocks/rack-focus.mdx
+++ b/docs/catalog/blocks/rack-focus.mdx
@@ -6,6 +6,12 @@ description: "A focus pull with real aperture bokeh: the focal plane travels fro
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add rack-focus" item="rack-focus" />
+
+That writes one file: `compositions/rack-focus.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/rack-focus.json"
   compositionId="rack-focus"
@@ -623,12 +629,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add rack-focus" item="rack-focus" />
-
-That writes one file: `compositions/rack-focus.html`.
-
 ## Add it to your video
 
 It runs for 6 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/reddit-post.mdx b/docs/catalog/blocks/reddit-post.mdx
index a601576f44..e2dd377110 100644
--- a/docs/catalog/blocks/reddit-post.mdx
+++ b/docs/catalog/blocks/reddit-post.mdx
@@ -5,6 +5,12 @@ description: "Animated Reddit post card overlay with upvotes and comments"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add reddit-post" item="reddit-post" />
+
+That writes one file: `compositions/reddit-post.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="reddit-post preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/reddit-post.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/reddit-post.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add reddit-post" item="reddit-post" />
-
-That writes one file: `compositions/reddit-post.html`.
-
 ## Source
 
 <Accordion title={`reddit-post.html`}>
diff --git a/docs/catalog/blocks/ridged-burn.mdx b/docs/catalog/blocks/ridged-burn.mdx
index 8c2987d5d7..9bbafa5355 100644
--- a/docs/catalog/blocks/ridged-burn.mdx
+++ b/docs/catalog/blocks/ridged-burn.mdx
@@ -5,6 +5,12 @@ description: "Shader transition with ridged turbulence burn effect"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add ridged-burn" item="ridged-burn" />
+
+That writes one file: `compositions/ridged-burn.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="ridged-burn preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/ridged-burn.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ridged-burn.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add ridged-burn" item="ridged-burn" />
-
-That writes one file: `compositions/ridged-burn.html`.
-
 ## Source
 
 <Accordion title={`ridged-burn.html`}>
diff --git a/docs/catalog/blocks/ripple-waves.mdx b/docs/catalog/blocks/ripple-waves.mdx
index 8b433afb2c..91e334c8a5 100644
--- a/docs/catalog/blocks/ripple-waves.mdx
+++ b/docs/catalog/blocks/ripple-waves.mdx
@@ -5,6 +5,12 @@ description: "Shader transition with concentric ripple wave distortion"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add ripple-waves" item="ripple-waves" />
+
+That writes one file: `compositions/ripple-waves.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="ripple-waves preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/ripple-waves.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ripple-waves.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add ripple-waves" item="ripple-waves" />
-
-That writes one file: `compositions/ripple-waves.html`.
-
 ## Source
 
 <Accordion title={`ripple-waves.html`}>
diff --git a/docs/catalog/blocks/sdf-iris.mdx b/docs/catalog/blocks/sdf-iris.mdx
index e36b43bcde..cb43a1e9a8 100644
--- a/docs/catalog/blocks/sdf-iris.mdx
+++ b/docs/catalog/blocks/sdf-iris.mdx
@@ -5,6 +5,12 @@ description: "Shader transition with signed distance field iris reveal"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add sdf-iris" item="sdf-iris" />
+
+That writes one file: `compositions/sdf-iris.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="sdf-iris preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/sdf-iris.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/sdf-iris.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add sdf-iris" item="sdf-iris" />
-
-That writes one file: `compositions/sdf-iris.html`.
-
 ## Source
 
 <Accordion title={`sdf-iris.html`}>
diff --git a/docs/catalog/blocks/share-sheet-carousel.mdx b/docs/catalog/blocks/share-sheet-carousel.mdx
index 1894b70367..5e504e6eed 100644
--- a/docs/catalog/blocks/share-sheet-carousel.mdx
+++ b/docs/catalog/blocks/share-sheet-carousel.mdx
@@ -6,6 +6,12 @@ description: "A share sheet springs up from the bottom of the phone and cycles p
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add share-sheet-carousel" item="share-sheet-carousel" />
+
+That writes `compositions/share-sheet-carousel.html`, plus 6 supporting files under `assets/`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/share-sheet-carousel.json"
   compositionId="share-sheet-carousel"
@@ -410,12 +416,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add share-sheet-carousel" item="share-sheet-carousel" />
-
-That writes `compositions/share-sheet-carousel.html`, plus 6 supporting files under `assets/`.
-
 ## Add it to your video
 
 It runs for 7.2333 seconds at 1080×1920. Paste this into your composition:
diff --git a/docs/catalog/blocks/slack-notification-ad.mdx b/docs/catalog/blocks/slack-notification-ad.mdx
index 4df9d1bade..85cb0c9b3b 100644
--- a/docs/catalog/blocks/slack-notification-ad.mdx
+++ b/docs/catalog/blocks/slack-notification-ad.mdx
@@ -5,14 +5,14 @@ description: "A portrait lock screen fills with escalating Slack video requests
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/slack-notification-ad.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/slack-notification-ad.png" autoPlay muted loop playsInline />
-
 ## Install
 
 <InstallCommand command="npx hyperframes add slack-notification-ad" item="slack-notification-ad" />
 
 That writes `compositions/slack-notification-ad.html`, plus 7 supporting files under `assets/img/` and `assets/fonts/`.
 
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/slack-notification-ad.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/slack-notification-ad.png" autoPlay muted loop playsInline />
+
 ## Add it to your video
 
 It runs for 12 seconds at 1080×1920. Paste this into your composition:
diff --git a/docs/catalog/blocks/spain-map.mdx b/docs/catalog/blocks/spain-map.mdx
index 07756ffdc1..6452d82fe9 100644
--- a/docs/catalog/blocks/spain-map.mdx
+++ b/docs/catalog/blocks/spain-map.mdx
@@ -5,6 +5,12 @@ description: "Animated Spain choropleth by autonomous community with staggered r
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add spain-map" item="spain-map" />
+
+That writes one file: `compositions/spain-map.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="spain-map preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/spain-map.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spain-map.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add spain-map" item="spain-map" />
-
-That writes one file: `compositions/spain-map.html`.
-
 ## Source
 
 <Accordion title={`spain-map.html`}>
diff --git a/docs/catalog/blocks/spiral-galaxy.mdx b/docs/catalog/blocks/spiral-galaxy.mdx
index 3b3bce57b0..7cdf319e96 100644
--- a/docs/catalog/blocks/spiral-galaxy.mdx
+++ b/docs/catalog/blocks/spiral-galaxy.mdx
@@ -6,6 +6,12 @@ description: "A spiral galaxy seen from outside, turning with real differential
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add spiral-galaxy" item="spiral-galaxy" />
+
+That writes one file: `compositions/spiral-galaxy.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/spiral-galaxy.json"
   compositionId="spiral-galaxy"
@@ -330,12 +336,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add spiral-galaxy" item="spiral-galaxy" />
-
-That writes one file: `compositions/spiral-galaxy.html`.
-
 ## Add it to your video
 
 It runs for 10 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/split-flap-board.mdx b/docs/catalog/blocks/split-flap-board.mdx
index 93b5172c1a..49640fdbcb 100644
--- a/docs/catalog/blocks/split-flap-board.mdx
+++ b/docs/catalog/blocks/split-flap-board.mdx
@@ -6,6 +6,12 @@ description: "Solari-style departure board: every cell walks its drum forward th
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add split-flap-board" item="split-flap-board" />
+
+That writes one file: `compositions/split-flap-board.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/split-flap-board.json"
   compositionId="split-flap-board"
@@ -364,12 +370,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add split-flap-board" item="split-flap-board" />
-
-That writes one file: `compositions/split-flap-board.html`.
-
 ## Add it to your video
 
 It runs for 3.5 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/spotify-card.mdx b/docs/catalog/blocks/spotify-card.mdx
index ef64855a8d..53c1aaa93a 100644
--- a/docs/catalog/blocks/spotify-card.mdx
+++ b/docs/catalog/blocks/spotify-card.mdx
@@ -5,6 +5,12 @@ description: "Animated Spotify now-playing card with album art and progress bar"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add spotify-card" item="spotify-card" />
+
+That writes one file: `compositions/spotify-card.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="spotify-card preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/spotify-card.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spotify-card.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add spotify-card" item="spotify-card" />
-
-That writes one file: `compositions/spotify-card.html`.
-
 ## Source
 
 <Accordion title={`spotify-card.html`}>
diff --git a/docs/catalog/blocks/swirl-vortex.mdx b/docs/catalog/blocks/swirl-vortex.mdx
index 4a245b3a51..75c11fb06c 100644
--- a/docs/catalog/blocks/swirl-vortex.mdx
+++ b/docs/catalog/blocks/swirl-vortex.mdx
@@ -5,6 +5,12 @@ description: "Shader transition with swirling vortex distortion"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add swirl-vortex" item="swirl-vortex" />
+
+That writes one file: `compositions/swirl-vortex.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="swirl-vortex preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/swirl-vortex.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/swirl-vortex.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add swirl-vortex" item="swirl-vortex" />
-
-That writes one file: `compositions/swirl-vortex.html`.
-
 ## Source
 
 <Accordion title={`swirl-vortex.html`}>
diff --git a/docs/catalog/blocks/thermal-distortion.mdx b/docs/catalog/blocks/thermal-distortion.mdx
index ebc7e97fd0..1cfe766e94 100644
--- a/docs/catalog/blocks/thermal-distortion.mdx
+++ b/docs/catalog/blocks/thermal-distortion.mdx
@@ -5,6 +5,12 @@ description: "Shader transition with heat haze thermal distortion"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add thermal-distortion" item="thermal-distortion" />
+
+That writes one file: `compositions/thermal-distortion.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="thermal-distortion preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/thermal-distortion.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/thermal-distortion.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add thermal-distortion" item="thermal-distortion" />
-
-That writes one file: `compositions/thermal-distortion.html`.
-
 ## Source
 
 <Accordion title={`thermal-distortion.html`}>
diff --git a/docs/catalog/blocks/thread-message-stack.mdx b/docs/catalog/blocks/thread-message-stack.mdx
index 10ff31843e..29d46130b1 100644
--- a/docs/catalog/blocks/thread-message-stack.mdx
+++ b/docs/catalog/blocks/thread-message-stack.mdx
@@ -5,6 +5,12 @@ description: "A source-owned editable conversation stack with arbitrary incoming
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add thread-message-stack" item="thread-message-stack" />
+
+That writes one file: `compositions/thread-message-stack.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="thread-message-stack preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/thread-message-stack.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/thread-message-stack.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add thread-message-stack" item="thread-message-stack" />
-
-That writes one file: `compositions/thread-message-stack.html`.
-
 ## Add it to your video
 
 It runs for 8 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/tiktok-follow.mdx b/docs/catalog/blocks/tiktok-follow.mdx
index d0b0ccdc0f..509103f6bd 100644
--- a/docs/catalog/blocks/tiktok-follow.mdx
+++ b/docs/catalog/blocks/tiktok-follow.mdx
@@ -5,6 +5,12 @@ description: "Animated TikTok follow overlay with profile card and follow button
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add tiktok-follow" item="tiktok-follow" />
+
+That writes `compositions/tiktok-follow.html`, plus 1 supporting file under `assets/`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="tiktok-follow preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/tiktok-follow.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add tiktok-follow" item="tiktok-follow" />
-
-That writes `compositions/tiktok-follow.html`, plus 1 supporting file under `assets/`.
-
 ## Source
 
 <Accordion title={`tiktok-follow.html`}>
diff --git a/docs/catalog/blocks/transitions-3d.mdx b/docs/catalog/blocks/transitions-3d.mdx
index 597bef8320..04ddada8d9 100644
--- a/docs/catalog/blocks/transitions-3d.mdx
+++ b/docs/catalog/blocks/transitions-3d.mdx
@@ -5,6 +5,12 @@ description: "Showcase of 3D perspective flip and rotate transitions"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add transitions-3d" item="transitions-3d" />
+
+That writes one file: `compositions/transitions-3d.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="transitions-3d preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/transitions-3d.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-3d.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add transitions-3d" item="transitions-3d" />
-
-That writes one file: `compositions/transitions-3d.html`.
-
 ## Source
 
 <Accordion title={`transitions-3d.html`}>
diff --git a/docs/catalog/blocks/transitions-blur.mdx b/docs/catalog/blocks/transitions-blur.mdx
index 077d6172d3..f5e34882ce 100644
--- a/docs/catalog/blocks/transitions-blur.mdx
+++ b/docs/catalog/blocks/transitions-blur.mdx
@@ -5,6 +5,12 @@ description: "Showcase of blur-based transitions between scenes"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add transitions-blur" item="transitions-blur" />
+
+That writes one file: `compositions/transitions-blur.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="transitions-blur preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/transitions-blur.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-blur.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add transitions-blur" item="transitions-blur" />
-
-That writes one file: `compositions/transitions-blur.html`.
-
 ## Source
 
 <Accordion title={`transitions-blur.html`}>
diff --git a/docs/catalog/blocks/transitions-cover.mdx b/docs/catalog/blocks/transitions-cover.mdx
index 1ff4f8d3b3..b1fbee5b62 100644
--- a/docs/catalog/blocks/transitions-cover.mdx
+++ b/docs/catalog/blocks/transitions-cover.mdx
@@ -5,6 +5,12 @@ description: "Showcase of cover/uncover slide transitions"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add transitions-cover" item="transitions-cover" />
+
+That writes one file: `compositions/transitions-cover.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="transitions-cover preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/transitions-cover.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-cover.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add transitions-cover" item="transitions-cover" />
-
-That writes one file: `compositions/transitions-cover.html`.
-
 ## Source
 
 <Accordion title={`transitions-cover.html`}>
diff --git a/docs/catalog/blocks/transitions-destruction.mdx b/docs/catalog/blocks/transitions-destruction.mdx
index eeb5e3e2ec..62270884e7 100644
--- a/docs/catalog/blocks/transitions-destruction.mdx
+++ b/docs/catalog/blocks/transitions-destruction.mdx
@@ -5,6 +5,12 @@ description: "Showcase of destructive break-apart transitions"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add transitions-destruction" item="transitions-destruction" />
+
+That writes one file: `compositions/transitions-destruction.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="transitions-destruction preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/transitions-destruction.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-destruction.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add transitions-destruction" item="transitions-destruction" />
-
-That writes one file: `compositions/transitions-destruction.html`.
-
 ## Source
 
 <Accordion title={`transitions-destruction.html`}>
diff --git a/docs/catalog/blocks/transitions-dissolve.mdx b/docs/catalog/blocks/transitions-dissolve.mdx
index d7e0fa2ea4..4cf8fb8706 100644
--- a/docs/catalog/blocks/transitions-dissolve.mdx
+++ b/docs/catalog/blocks/transitions-dissolve.mdx
@@ -5,6 +5,12 @@ description: "Showcase of dissolve and fade transitions"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add transitions-dissolve" item="transitions-dissolve" />
+
+That writes one file: `compositions/transitions-dissolve.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="transitions-dissolve preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/transitions-dissolve.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-dissolve.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add transitions-dissolve" item="transitions-dissolve" />
-
-That writes one file: `compositions/transitions-dissolve.html`.
-
 ## Source
 
 <Accordion title={`transitions-dissolve.html`}>
diff --git a/docs/catalog/blocks/transitions-distortion.mdx b/docs/catalog/blocks/transitions-distortion.mdx
index f5d3328ddb..09c2091c5a 100644
--- a/docs/catalog/blocks/transitions-distortion.mdx
+++ b/docs/catalog/blocks/transitions-distortion.mdx
@@ -5,6 +5,12 @@ description: "Showcase of warp and distortion transitions"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add transitions-distortion" item="transitions-distortion" />
+
+That writes one file: `compositions/transitions-distortion.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="transitions-distortion preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/transitions-distortion.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-distortion.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add transitions-distortion" item="transitions-distortion" />
-
-That writes one file: `compositions/transitions-distortion.html`.
-
 ## Source
 
 <Accordion title={`transitions-distortion.html`}>
diff --git a/docs/catalog/blocks/transitions-grid.mdx b/docs/catalog/blocks/transitions-grid.mdx
index f884da3a3b..1f78f916a0 100644
--- a/docs/catalog/blocks/transitions-grid.mdx
+++ b/docs/catalog/blocks/transitions-grid.mdx
@@ -5,6 +5,12 @@ description: "Showcase of grid-based tile transitions"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add transitions-grid" item="transitions-grid" />
+
+That writes one file: `compositions/transitions-grid.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="transitions-grid preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/transitions-grid.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-grid.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add transitions-grid" item="transitions-grid" />
-
-That writes one file: `compositions/transitions-grid.html`.
-
 ## Source
 
 <Accordion title={`transitions-grid.html`}>
diff --git a/docs/catalog/blocks/transitions-light.mdx b/docs/catalog/blocks/transitions-light.mdx
index 52216e6930..b337d0636f 100644
--- a/docs/catalog/blocks/transitions-light.mdx
+++ b/docs/catalog/blocks/transitions-light.mdx
@@ -5,6 +5,12 @@ description: "Showcase of light-based glow and flash transitions"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add transitions-light" item="transitions-light" />
+
+That writes one file: `compositions/transitions-light.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="transitions-light preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/transitions-light.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-light.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add transitions-light" item="transitions-light" />
-
-That writes one file: `compositions/transitions-light.html`.
-
 ## Source
 
 <Accordion title={`transitions-light.html`}>
diff --git a/docs/catalog/blocks/transitions-mechanical.mdx b/docs/catalog/blocks/transitions-mechanical.mdx
index e675627356..41cfdc91db 100644
--- a/docs/catalog/blocks/transitions-mechanical.mdx
+++ b/docs/catalog/blocks/transitions-mechanical.mdx
@@ -5,6 +5,12 @@ description: "Showcase of mechanical shutter and iris transitions"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add transitions-mechanical" item="transitions-mechanical" />
+
+That writes one file: `compositions/transitions-mechanical.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="transitions-mechanical preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/transitions-mechanical.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-mechanical.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add transitions-mechanical" item="transitions-mechanical" />
-
-That writes one file: `compositions/transitions-mechanical.html`.
-
 ## Source
 
 <Accordion title={`transitions-mechanical.html`}>
diff --git a/docs/catalog/blocks/transitions-other.mdx b/docs/catalog/blocks/transitions-other.mdx
index 3c274d30af..88ac800b89 100644
--- a/docs/catalog/blocks/transitions-other.mdx
+++ b/docs/catalog/blocks/transitions-other.mdx
@@ -5,6 +5,12 @@ description: "Showcase of miscellaneous creative transitions"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add transitions-other" item="transitions-other" />
+
+That writes one file: `compositions/transitions-other.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="transitions-other preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/transitions-other.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-other.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add transitions-other" item="transitions-other" />
-
-That writes one file: `compositions/transitions-other.html`.
-
 ## Source
 
 <Accordion title={`transitions-other.html`}>
diff --git a/docs/catalog/blocks/transitions-push.mdx b/docs/catalog/blocks/transitions-push.mdx
index a18ac1b6ad..6fd6d5be3b 100644
--- a/docs/catalog/blocks/transitions-push.mdx
+++ b/docs/catalog/blocks/transitions-push.mdx
@@ -5,6 +5,12 @@ description: "Showcase of push and slide transitions"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add transitions-push" item="transitions-push" />
+
+That writes one file: `compositions/transitions-push.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="transitions-push preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/transitions-push.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-push.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add transitions-push" item="transitions-push" />
-
-That writes one file: `compositions/transitions-push.html`.
-
 ## Source
 
 <Accordion title={`transitions-push.html`}>
diff --git a/docs/catalog/blocks/transitions-radial.mdx b/docs/catalog/blocks/transitions-radial.mdx
index 14763fb4cf..d373563106 100644
--- a/docs/catalog/blocks/transitions-radial.mdx
+++ b/docs/catalog/blocks/transitions-radial.mdx
@@ -5,6 +5,12 @@ description: "Showcase of radial wipe and reveal transitions"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add transitions-radial" item="transitions-radial" />
+
+That writes one file: `compositions/transitions-radial.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="transitions-radial preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/transitions-radial.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-radial.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add transitions-radial" item="transitions-radial" />
-
-That writes one file: `compositions/transitions-radial.html`.
-
 ## Source
 
 <Accordion title={`transitions-radial.html`}>
diff --git a/docs/catalog/blocks/transitions-scale.mdx b/docs/catalog/blocks/transitions-scale.mdx
index 04eb841e06..acce7f69c6 100644
--- a/docs/catalog/blocks/transitions-scale.mdx
+++ b/docs/catalog/blocks/transitions-scale.mdx
@@ -5,6 +5,12 @@ description: "Showcase of scale and zoom transitions"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add transitions-scale" item="transitions-scale" />
+
+That writes one file: `compositions/transitions-scale.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="transitions-scale preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/transitions-scale.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-scale.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add transitions-scale" item="transitions-scale" />
-
-That writes one file: `compositions/transitions-scale.html`.
-
 ## Source
 
 <Accordion title={`transitions-scale.html`}>
diff --git a/docs/catalog/blocks/ui-3d-reveal.mdx b/docs/catalog/blocks/ui-3d-reveal.mdx
index 89ed6ab560..401a347174 100644
--- a/docs/catalog/blocks/ui-3d-reveal.mdx
+++ b/docs/catalog/blocks/ui-3d-reveal.mdx
@@ -5,6 +5,12 @@ description: "Perspective 3D reveal animation for UI elements"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add ui-3d-reveal" item="ui-3d-reveal" />
+
+That writes one file: `compositions/ui-3d-reveal.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="ui-3d-reveal preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/ui-3d-reveal.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ui-3d-reveal.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add ui-3d-reveal" item="ui-3d-reveal" />
-
-That writes one file: `compositions/ui-3d-reveal.html`.
-
 ## Source
 
 <Accordion title={`ui-3d-reveal.html`}>
diff --git a/docs/catalog/blocks/us-map-bubble.mdx b/docs/catalog/blocks/us-map-bubble.mdx
index e50266368d..aade03398d 100644
--- a/docs/catalog/blocks/us-map-bubble.mdx
+++ b/docs/catalog/blocks/us-map-bubble.mdx
@@ -5,6 +5,12 @@ description: "Animated US bubble map with proportional city markers, value callo
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add us-map-bubble" item="us-map-bubble" />
+
+That writes one file: `compositions/us-map-bubble.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="us-map-bubble preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/us-map-bubble.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-bubble.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add us-map-bubble" item="us-map-bubble" />
-
-That writes one file: `compositions/us-map-bubble.html`.
-
 ## Source
 
 <Accordion title={`us-map-bubble.html`}>
diff --git a/docs/catalog/blocks/us-map-flow.mdx b/docs/catalog/blocks/us-map-flow.mdx
index 7ff3a547d9..3d52dbb37d 100644
--- a/docs/catalog/blocks/us-map-flow.mdx
+++ b/docs/catalog/blocks/us-map-flow.mdx
@@ -5,6 +5,12 @@ description: "Animated connection arcs between US cities over a base map — com
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add us-map-flow" item="us-map-flow" />
+
+That writes one file: `compositions/us-map-flow.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="us-map-flow preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/us-map-flow.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-flow.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add us-map-flow" item="us-map-flow" />
-
-That writes one file: `compositions/us-map-flow.html`.
-
 ## Source
 
 <Accordion title={`us-map-flow.html`}>
diff --git a/docs/catalog/blocks/us-map-hex.mdx b/docs/catalog/blocks/us-map-hex.mdx
index 65843d4624..afc2bf2f98 100644
--- a/docs/catalog/blocks/us-map-hex.mdx
+++ b/docs/catalog/blocks/us-map-hex.mdx
@@ -5,6 +5,12 @@ description: "Animated hexagonal tile grid map — each state as an equal-weight
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add us-map-hex" item="us-map-hex" />
+
+That writes one file: `compositions/us-map-hex.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="us-map-hex preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/us-map-hex.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-hex.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add us-map-hex" item="us-map-hex" />
-
-That writes one file: `compositions/us-map-hex.html`.
-
 ## Source
 
 <Accordion title={`us-map-hex.html`}>
diff --git a/docs/catalog/blocks/us-map.mdx b/docs/catalog/blocks/us-map.mdx
index 83e6d5ef12..17b011fc7f 100644
--- a/docs/catalog/blocks/us-map.mdx
+++ b/docs/catalog/blocks/us-map.mdx
@@ -5,6 +5,12 @@ description: "Animated US choropleth map with staggered state reveals, value lab
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add us-map" item="us-map" />
+
+That writes one file: `compositions/us-map.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="us-map preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/us-map.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add us-map" item="us-map" />
-
-That writes one file: `compositions/us-map.html`.
-
 ## Source
 
 <Accordion title={`us-map.html`}>
diff --git a/docs/catalog/blocks/vfx-anamorphic-flare.mdx b/docs/catalog/blocks/vfx-anamorphic-flare.mdx
index bdec5e0e56..26e47c5247 100644
--- a/docs/catalog/blocks/vfx-anamorphic-flare.mdx
+++ b/docs/catalog/blocks/vfx-anamorphic-flare.mdx
@@ -6,6 +6,12 @@ description: "A drifting field of bright points, each one throwing the long hori
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add vfx-anamorphic-flare" item="vfx-anamorphic-flare" />
+
+That writes one file: `compositions/vfx-anamorphic-flare.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/vfx-anamorphic-flare.json"
   compositionId="vfx-anamorphic-flare"
@@ -390,12 +396,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add vfx-anamorphic-flare" item="vfx-anamorphic-flare" />
-
-That writes one file: `compositions/vfx-anamorphic-flare.html`.
-
 ## Add it to your video
 
 It runs for 10 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/vfx-iphone-device.mdx b/docs/catalog/blocks/vfx-iphone-device.mdx
index d0eab14bc2..db5516c009 100644
--- a/docs/catalog/blocks/vfx-iphone-device.mdx
+++ b/docs/catalog/blocks/vfx-iphone-device.mdx
@@ -5,14 +5,14 @@ description: "Real GLTF iPhone 15 Pro Max and MacBook Pro models with live HTML-
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-iphone-device.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-iphone-device.png" autoPlay muted loop playsInline />
-
 ## Install
 
 <InstallCommand command="npx hyperframes add vfx-iphone-device" item="vfx-iphone-device" />
 
 That writes `compositions/vfx-iphone-device.html`, plus 4 supporting files under `models/`.
 
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-iphone-device.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-iphone-device.png" autoPlay muted loop playsInline />
+
 <Danger>
   Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
   Without it this item's screen renders black. Rendering from the CLI switches
diff --git a/docs/catalog/blocks/vfx-liquid-background.mdx b/docs/catalog/blocks/vfx-liquid-background.mdx
index b7722915db..2a3e341dcf 100644
--- a/docs/catalog/blocks/vfx-liquid-background.mdx
+++ b/docs/catalog/blocks/vfx-liquid-background.mdx
@@ -5,14 +5,14 @@ description: "Organic liquid simulation with vertex displacement on a subdivided
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-background.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-background.png" autoPlay muted loop playsInline />
-
 ## Install
 
 <InstallCommand command="npx hyperframes add vfx-liquid-background" item="vfx-liquid-background" />
 
 That writes one file: `compositions/vfx-liquid-background.html`.
 
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-background.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-background.png" autoPlay muted loop playsInline />
+
 <Danger>
   Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
   Without it this item's screen renders black. Rendering from the CLI switches
diff --git a/docs/catalog/blocks/vfx-liquid-glass.mdx b/docs/catalog/blocks/vfx-liquid-glass.mdx
index 6348b1a4ea..d7e40da5c9 100644
--- a/docs/catalog/blocks/vfx-liquid-glass.mdx
+++ b/docs/catalog/blocks/vfx-liquid-glass.mdx
@@ -5,14 +5,14 @@ description: "VFX composition block"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-glass.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-glass.png" autoPlay muted loop playsInline />
-
 ## Install
 
 <InstallCommand command="npx hyperframes add vfx-liquid-glass" item="vfx-liquid-glass" />
 
 That writes one file: `compositions/vfx-liquid-glass.html`.
 
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-glass.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-glass.png" autoPlay muted loop playsInline />
+
 <Danger>
   Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
   Without it this item's screen renders black. Rendering from the CLI switches
diff --git a/docs/catalog/blocks/vfx-magnetic.mdx b/docs/catalog/blocks/vfx-magnetic.mdx
index f7f6d14ed0..aab84ef791 100644
--- a/docs/catalog/blocks/vfx-magnetic.mdx
+++ b/docs/catalog/blocks/vfx-magnetic.mdx
@@ -5,14 +5,14 @@ description: "VFX composition block"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-magnetic.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-magnetic.png" autoPlay muted loop playsInline />
-
 ## Install
 
 <InstallCommand command="npx hyperframes add vfx-magnetic" item="vfx-magnetic" />
 
 That writes one file: `compositions/vfx-magnetic.html`.
 
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-magnetic.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-magnetic.png" autoPlay muted loop playsInline />
+
 <Danger>
   Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
   Without it this item's screen renders black. Rendering from the CLI switches
diff --git a/docs/catalog/blocks/vfx-portal.mdx b/docs/catalog/blocks/vfx-portal.mdx
index b3919b4413..e9e6ba5e09 100644
--- a/docs/catalog/blocks/vfx-portal.mdx
+++ b/docs/catalog/blocks/vfx-portal.mdx
@@ -5,14 +5,14 @@ description: "VFX composition block"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-portal.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-portal.png" autoPlay muted loop playsInline />
-
 ## Install
 
 <InstallCommand command="npx hyperframes add vfx-portal" item="vfx-portal" />
 
 That writes one file: `compositions/vfx-portal.html`.
 
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-portal.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-portal.png" autoPlay muted loop playsInline />
+
 <Danger>
   Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
   Without it this item's screen renders black. Rendering from the CLI switches
diff --git a/docs/catalog/blocks/vfx-shatter.mdx b/docs/catalog/blocks/vfx-shatter.mdx
index b02803b24c..5fb9263893 100644
--- a/docs/catalog/blocks/vfx-shatter.mdx
+++ b/docs/catalog/blocks/vfx-shatter.mdx
@@ -5,14 +5,14 @@ description: "VFX composition block"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-shatter.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-shatter.png" autoPlay muted loop playsInline />
-
 ## Install
 
 <InstallCommand command="npx hyperframes add vfx-shatter" item="vfx-shatter" />
 
 That writes one file: `compositions/vfx-shatter.html`.
 
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-shatter.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-shatter.png" autoPlay muted loop playsInline />
+
 <Danger>
   Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
   Without it this item's screen renders black. Rendering from the CLI switches
diff --git a/docs/catalog/blocks/vfx-text-cursor.mdx b/docs/catalog/blocks/vfx-text-cursor.mdx
index 65f89de0ee..e7179c79b8 100644
--- a/docs/catalog/blocks/vfx-text-cursor.mdx
+++ b/docs/catalog/blocks/vfx-text-cursor.mdx
@@ -5,6 +5,12 @@ description: "Dramatic text reveal with cursor glow, chromatic shadow rays, and
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add vfx-text-cursor" item="vfx-text-cursor" />
+
+That writes one file: `compositions/vfx-text-cursor.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="vfx-text-cursor preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/vfx-text-cursor.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-text-cursor.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add vfx-text-cursor" item="vfx-text-cursor" />
-
-That writes one file: `compositions/vfx-text-cursor.html`.
-
 <Danger>
   Live preview needs the `chrome://flags/#canvas-draw-element` flag switched on.
   Without it this item's screen renders black. Rendering from the CLI switches
diff --git a/docs/catalog/blocks/vpn-youtube-spot.mdx b/docs/catalog/blocks/vpn-youtube-spot.mdx
index d7a52b6f54..458e053eda 100644
--- a/docs/catalog/blocks/vpn-youtube-spot.mdx
+++ b/docs/catalog/blocks/vpn-youtube-spot.mdx
@@ -5,6 +5,12 @@ description: "Snappy Apple-style YouTube insert showing a phone finding and inst
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add vpn-youtube-spot" item="vpn-youtube-spot" />
+
+That writes `compositions/vpn-youtube-spot.html`, plus 1 supporting file under `assets/`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="vpn-youtube-spot preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/vpn-youtube-spot.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vpn-youtube-spot.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add vpn-youtube-spot" item="vpn-youtube-spot" />
-
-That writes `compositions/vpn-youtube-spot.html`, plus 1 supporting file under `assets/`.
-
 ## Source
 
 <Accordion title={`vpn-youtube-spot.html`}>
diff --git a/docs/catalog/blocks/weight-wave.mdx b/docs/catalog/blocks/weight-wave.mdx
index 4fceeb4fad..d2fae9dca6 100644
--- a/docs/catalog/blocks/weight-wave.mdx
+++ b/docs/catalog/blocks/weight-wave.mdx
@@ -6,6 +6,12 @@ description: "A crest of thickness travels along a headline: each character swel
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add weight-wave" item="weight-wave" />
+
+That writes `compositions/weight-wave.html`, plus 2 supporting files under `compositions/assets/fonts/`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/blocks/weight-wave.json"
   compositionId="weight-wave"
@@ -317,12 +323,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add weight-wave" item="weight-wave" />
-
-That writes `compositions/weight-wave.html`, plus 2 supporting files under `compositions/assets/fonts/`.
-
 ## Add it to your video
 
 It runs for 6 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/whip-pan.mdx b/docs/catalog/blocks/whip-pan.mdx
index 0ffde7e000..61074f92c3 100644
--- a/docs/catalog/blocks/whip-pan.mdx
+++ b/docs/catalog/blocks/whip-pan.mdx
@@ -5,6 +5,12 @@ description: "Shader transition simulating a fast camera whip pan"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add whip-pan" item="whip-pan" />
+
+That writes one file: `compositions/whip-pan.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="whip-pan preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/whip-pan.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/whip-pan.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add whip-pan" item="whip-pan" />
-
-That writes one file: `compositions/whip-pan.html`.
-
 ## Source
 
 <Accordion title={`whip-pan.html`}>
diff --git a/docs/catalog/blocks/world-map.mdx b/docs/catalog/blocks/world-map.mdx
index ab55cb3b2c..be4a858c60 100644
--- a/docs/catalog/blocks/world-map.mdx
+++ b/docs/catalog/blocks/world-map.mdx
@@ -5,6 +5,12 @@ description: "Animated world choropleth with country-by-country reveal, tooltip
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add world-map" item="world-map" />
+
+That writes one file: `compositions/world-map.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="world-map preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/world-map.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/world-map.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add world-map" item="world-map" />
-
-That writes one file: `compositions/world-map.html`.
-
 ## Source
 
 <Accordion title={`world-map.html`}>
diff --git a/docs/catalog/blocks/x-post.mdx b/docs/catalog/blocks/x-post.mdx
index 6dfd7822c1..734d30caa1 100644
--- a/docs/catalog/blocks/x-post.mdx
+++ b/docs/catalog/blocks/x-post.mdx
@@ -5,6 +5,12 @@ description: "Animated X/Twitter post card overlay with engagement metrics"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add x-post" item="x-post" />
+
+That writes one file: `compositions/x-post.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="x-post preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/x-post.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/x-post.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add x-post" item="x-post" />
-
-That writes one file: `compositions/x-post.html`.
-
 ## Source
 
 <Accordion title={`x-post.html`}>
diff --git a/docs/catalog/blocks/yt-comment-card.mdx b/docs/catalog/blocks/yt-comment-card.mdx
index d7b84f518f..57f466a3f1 100644
--- a/docs/catalog/blocks/yt-comment-card.mdx
+++ b/docs/catalog/blocks/yt-comment-card.mdx
@@ -5,6 +5,12 @@ description: "Social comments typing on over footage: avatar pop, username and t
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add yt-comment-card" item="yt-comment-card" />
+
+That writes one file: `compositions/yt-comment-card.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="yt-comment-card preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/yt-comment-card.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-comment-card.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add yt-comment-card" item="yt-comment-card" />
-
-That writes one file: `compositions/yt-comment-card.html`.
-
 ## Add it to your video
 
 It runs for 8 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/yt-lcd-background.mdx b/docs/catalog/blocks/yt-lcd-background.mdx
index e4c945323d..e1d22fb5e5 100644
--- a/docs/catalog/blocks/yt-lcd-background.mdx
+++ b/docs/catalog/blocks/yt-lcd-background.mdx
@@ -5,6 +5,12 @@ description: "Textured paper board: scanlines with slow drift, optional pixel gr
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add yt-lcd-background" item="yt-lcd-background" />
+
+That writes one file: `compositions/yt-lcd-background.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="yt-lcd-background preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/yt-lcd-background.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lcd-background.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add yt-lcd-background" item="yt-lcd-background" />
-
-That writes one file: `compositions/yt-lcd-background.html`.
-
 ## Add it to your video
 
 It runs for 10 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/yt-logo-intro.mdx b/docs/catalog/blocks/yt-logo-intro.mdx
index c0f5f49402..c3b0023a1d 100644
--- a/docs/catalog/blocks/yt-logo-intro.mdx
+++ b/docs/catalog/blocks/yt-logo-intro.mdx
@@ -5,6 +5,12 @@ description: "Logo stamp pops on a lined board, a kicker line gives way to the t
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add yt-logo-intro" item="yt-logo-intro" />
+
+That writes one file: `compositions/yt-logo-intro.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="yt-logo-intro preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/yt-logo-intro.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-logo-intro.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add yt-logo-intro" item="yt-logo-intro" />
-
-That writes one file: `compositions/yt-logo-intro.html`.
-
 ## Add it to your video
 
 It runs for 6 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/yt-lower-third.mdx b/docs/catalog/blocks/yt-lower-third.mdx
index b5b55f6df0..cc99de45b8 100644
--- a/docs/catalog/blocks/yt-lower-third.mdx
+++ b/docs/catalog/blocks/yt-lower-third.mdx
@@ -5,6 +5,12 @@ description: "Animated YouTube subscribe lower third with avatar and channel inf
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add yt-lower-third" item="yt-lower-third" />
+
+That writes `compositions/yt-lower-third.html`, plus 1 supporting file under `assets/`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="yt-lower-third preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/yt-lower-third.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lower-third.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add yt-lower-third" item="yt-lower-third" />
-
-That writes `compositions/yt-lower-third.html`, plus 1 supporting file under `assets/`.
-
 ## Source
 
 <Accordion title={`yt-lower-third.html`}>
diff --git a/docs/catalog/blocks/yt-prism-title.mdx b/docs/catalog/blocks/yt-prism-title.mdx
index 79f4fc5096..d5b7674f8e 100644
--- a/docs/catalog/blocks/yt-prism-title.mdx
+++ b/docs/catalog/blocks/yt-prism-title.mdx
@@ -5,6 +5,12 @@ description: "Display title on a transparent root: blur-focus entrance, red/blue
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add yt-prism-title" item="yt-prism-title" />
+
+That writes one file: `compositions/yt-prism-title.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="yt-prism-title preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/yt-prism-title.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-prism-title.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add yt-prism-title" item="yt-prism-title" />
-
-That writes one file: `compositions/yt-prism-title.html`.
-
 ## Add it to your video
 
 It runs for 6 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/blocks/yt-vertical-fill.mdx b/docs/catalog/blocks/yt-vertical-fill.mdx
index b11ef78eef..614d8d9411 100644
--- a/docs/catalog/blocks/yt-vertical-fill.mdx
+++ b/docs/catalog/blocks/yt-vertical-fill.mdx
@@ -5,6 +5,12 @@ description: "Portrait media filling a widescreen frame via blurred-scale, mirro
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add yt-vertical-fill" item="yt-vertical-fill" />
+
+That writes one file: `compositions/yt-vertical-fill.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="yt-vertical-fill preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/yt-vertical-fill.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-vertical-fill.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add yt-vertical-fill" item="yt-vertical-fill" />
-
-That writes one file: `compositions/yt-vertical-fill.html`.
-
 ## Add it to your video
 
 It runs for 8 seconds at 1920×1080. Paste this into your composition:
diff --git a/docs/catalog/components/animated-bar-chart.mdx b/docs/catalog/components/animated-bar-chart.mdx
index 5aa7c9c35d..80f58ccd61 100644
--- a/docs/catalog/components/animated-bar-chart.mdx
+++ b/docs/catalog/components/animated-bar-chart.mdx
@@ -5,6 +5,12 @@ description: "A compact data card with deterministic bar growth and value callou
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add animated-bar-chart" item="animated-bar-chart" />
+
+That writes one file: `compositions/components/animated-bar-chart.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="animated-bar-chart preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/animated-bar-chart.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/animated-bar-chart.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add animated-bar-chart" item="animated-bar-chart" />
-
-That writes one file: `compositions/components/animated-bar-chart.html`.
-
 ## Source
 
 <Accordion title={`animated-bar-chart.html`}>
diff --git a/docs/catalog/components/arc-motion-path.mdx b/docs/catalog/components/arc-motion-path.mdx
index 1bdfa255e0..369e0b7c3e 100644
--- a/docs/catalog/components/arc-motion-path.mdx
+++ b/docs/catalog/components/arc-motion-path.mdx
@@ -5,6 +5,12 @@ description: "A GSAP MotionPath primitive that flies a callout along a curved ar
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add arc-motion-path" item="arc-motion-path" />
+
+That writes one file: `compositions/components/arc-motion-path.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="arc-motion-path preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/arc-motion-path.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/arc-motion-path.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add arc-motion-path" item="arc-motion-path" />
-
-That writes one file: `compositions/components/arc-motion-path.html`.
-
 ## Source
 
 <Accordion title={`arc-motion-path.html`}>
diff --git a/docs/catalog/components/ascii-render-pass.mdx b/docs/catalog/components/ascii-render-pass.mdx
index 7f2b8a401f..83cc073026 100644
--- a/docs/catalog/components/ascii-render-pass.mdx
+++ b/docs/catalog/components/ascii-render-pass.mdx
@@ -6,6 +6,12 @@ description: "A slotted scene renders as live ASCII: a canvas samples the source
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add ascii-render-pass" item="ascii-render-pass" />
+
+That writes one file: `compositions/components/ascii-render-pass.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/ascii-render-pass.json"
   compositionId="ascii-render-pass"
@@ -503,12 +509,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add ascii-render-pass" item="ascii-render-pass" />
-
-That writes one file: `compositions/components/ascii-render-pass.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/ascii-render-pass.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/ascii-trail-reveal.mdx b/docs/catalog/components/ascii-trail-reveal.mdx
index 547b361287..bdf27257a5 100644
--- a/docs/catalog/components/ascii-trail-reveal.mdx
+++ b/docs/catalog/components/ascii-trail-reveal.mdx
@@ -6,6 +6,12 @@ description: "An authored S-curve sweeps through a deterministic ASCII grid, fli
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add ascii-trail-reveal" item="ascii-trail-reveal" />
+
+That writes one file: `compositions/components/ascii-trail-reveal.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/ascii-trail-reveal.json"
   compositionId="ascii-trail-reveal"
@@ -398,12 +404,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add ascii-trail-reveal" item="ascii-trail-reveal" />
-
-That writes one file: `compositions/components/ascii-trail-reveal.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/ascii-trail-reveal.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/aurora-drift.mdx b/docs/catalog/components/aurora-drift.mdx
index 9e2d6e8135..051cc70925 100644
--- a/docs/catalog/components/aurora-drift.mdx
+++ b/docs/catalog/components/aurora-drift.mdx
@@ -6,6 +6,12 @@ description: "Three soft accent-derived aurora fields drift in an exact ambient
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add aurora-drift" item="aurora-drift" />
+
+That writes one file: `compositions/components/aurora-drift.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/aurora-drift.json"
   compositionId="aurora-drift"
@@ -253,12 +259,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add aurora-drift" item="aurora-drift" />
-
-That writes one file: `compositions/components/aurora-drift.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/aurora-drift.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/avatar-cloud.mdx b/docs/catalog/components/avatar-cloud.mdx
index 8bbc99bda6..a3acd3ca48 100644
--- a/docs/catalog/components/avatar-cloud.mdx
+++ b/docs/catalog/components/avatar-cloud.mdx
@@ -6,6 +6,12 @@ description: "Lettermark avatars populate a loose elliptical cloud while fine SV
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add avatar-cloud" item="avatar-cloud" />
+
+That writes one file: `compositions/components/avatar-cloud.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/avatar-cloud.json"
   compositionId="avatar-cloud"
@@ -488,12 +494,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add avatar-cloud" item="avatar-cloud" />
-
-That writes one file: `compositions/components/avatar-cloud.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/avatar-cloud.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/avatar-group-hover.mdx b/docs/catalog/components/avatar-group-hover.mdx
index 69103c689c..3acf509da7 100644
--- a/docs/catalog/components/avatar-group-hover.mdx
+++ b/docs/catalog/components/avatar-group-hover.mdx
@@ -6,6 +6,12 @@ description: "A distance-falloff avatar group lift with bouncy hover return"
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add avatar-group-hover" item="avatar-group-hover" />
+
+That writes one file: `compositions/components/avatar-group-hover.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/avatar-group-hover.json"
   compositionId="avatar-group-hover"
@@ -117,12 +123,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add avatar-group-hover" item="avatar-group-hover" />
-
-That writes one file: `compositions/components/avatar-group-hover.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/badge-pop.mdx b/docs/catalog/components/badge-pop.mdx
index b91ea7c437..c376a1745e 100644
--- a/docs/catalog/components/badge-pop.mdx
+++ b/docs/catalog/components/badge-pop.mdx
@@ -6,6 +6,12 @@ description: "A transitions.dev-inspired notification badge pop with elastic sca
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add badge-pop" item="badge-pop" />
+
+That writes one file: `compositions/components/badge-pop.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/badge-pop.json"
   compositionId="badge-pop"
@@ -166,12 +172,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add badge-pop" item="badge-pop" />
-
-That writes one file: `compositions/components/badge-pop.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/beat-accent.mdx b/docs/catalog/components/beat-accent.mdx
index 9b8edb2ea4..13b83184f3 100644
--- a/docs/catalog/components/beat-accent.mdx
+++ b/docs/catalog/components/beat-accent.mdx
@@ -6,6 +6,12 @@ description: "A single music-hit sting: impact flash, micro scale-pulse on the s
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add beat-accent" item="beat-accent" />
+
+That writes one file: `compositions/components/beat-accent.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/beat-accent.json"
   compositionId="beat-accent"
@@ -342,12 +348,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add beat-accent" item="beat-accent" />
-
-That writes one file: `compositions/components/beat-accent.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/beat-accent.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/beat-pulse-background.mdx b/docs/catalog/components/beat-pulse-background.mdx
index d84674676e..c8773debf6 100644
--- a/docs/catalog/components/beat-pulse-background.mdx
+++ b/docs/catalog/components/beat-pulse-background.mdx
@@ -6,6 +6,12 @@ description: "An accent-derived backdrop pulses its glow intensity and saturatio
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add beat-pulse-background" item="beat-pulse-background" />
+
+That writes one file: `compositions/components/beat-pulse-background.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/beat-pulse-background.json"
   compositionId="beat-pulse-background"
@@ -226,12 +232,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add beat-pulse-background" item="beat-pulse-background" />
-
-That writes one file: `compositions/components/beat-pulse-background.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/beat-pulse-background.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/beat-timeline.mdx b/docs/catalog/components/beat-timeline.mdx
index ec52e5902f..c61fcafb8e 100644
--- a/docs/catalog/components/beat-timeline.mdx
+++ b/docs/catalog/components/beat-timeline.mdx
@@ -6,6 +6,12 @@ description: "A paused master-timeline orchestration spine that pins titled beat
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add beat-timeline" item="beat-timeline" />
+
+That writes one file: `compositions/components/beat-timeline.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/beat-timeline.json"
   compositionId="beat-timeline"
@@ -306,12 +312,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add beat-timeline" item="beat-timeline" />
-
-That writes one file: `compositions/components/beat-timeline.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/beat-timeline.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/before-after-wipe.mdx b/docs/catalog/components/before-after-wipe.mdx
index 1aace7db9b..06125b7702 100644
--- a/docs/catalog/components/before-after-wipe.mdx
+++ b/docs/catalog/components/before-after-wipe.mdx
@@ -6,6 +6,12 @@ description: "Two full-bleed content slots compare before and after states as a
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add before-after-wipe" item="before-after-wipe" />
+
+That writes one file: `compositions/components/before-after-wipe.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/before-after-wipe.json"
   compositionId="before-after-wipe"
@@ -496,12 +502,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add before-after-wipe" item="before-after-wipe" />
-
-That writes one file: `compositions/components/before-after-wipe.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/before-after-wipe.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/blur-in.mdx b/docs/catalog/components/blur-in.mdx
index c8a98e9bae..509bd55037 100644
--- a/docs/catalog/components/blur-in.mdx
+++ b/docs/catalog/components/blur-in.mdx
@@ -6,6 +6,12 @@ description: "An Operator Black word-level content reveal that resolves its own
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add blur-in" item="blur-in" />
+
+That writes one file: `compositions/components/blur-in.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/blur-in.json"
   compositionId="blur-in"
@@ -257,12 +263,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add blur-in" item="blur-in" />
-
-That writes one file: `compositions/components/blur-in.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/blur-in.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/blur-out-up.mdx b/docs/catalog/components/blur-out-up.mdx
index 35c1247e47..7c27e2712b 100644
--- a/docs/catalog/components/blur-out-up.mdx
+++ b/docs/catalog/components/blur-out-up.mdx
@@ -6,6 +6,12 @@ description: "Words arrive clean and depart upward with increasing blur for airy
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add blur-out-up" item="blur-out-up" />
+
+That writes one file: `compositions/components/blur-out-up.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/blur-out-up.json"
   compositionId="blur-out-up"
@@ -128,12 +134,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add blur-out-up" item="blur-out-up" />
-
-That writes one file: `compositions/components/blur-out-up.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/bottom-up-letters.mdx b/docs/catalog/components/bottom-up-letters.mdx
index 9f211bb618..a951d0f908 100644
--- a/docs/catalog/components/bottom-up-letters.mdx
+++ b/docs/catalog/components/bottom-up-letters.mdx
@@ -6,6 +6,12 @@ description: "Splits text into letters and reveals each glyph from below with de
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add bottom-up-letters" item="bottom-up-letters" />
+
+That writes one file: `compositions/components/bottom-up-letters.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/bottom-up-letters.json"
   compositionId="bottom-up-letters"
@@ -123,12 +129,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add bottom-up-letters" item="bottom-up-letters" />
-
-That writes one file: `compositions/components/bottom-up-letters.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/browser-device-stage.mdx b/docs/catalog/components/browser-device-stage.mdx
index 5d8ffc43d2..eae86726d2 100644
--- a/docs/catalog/components/browser-device-stage.mdx
+++ b/docs/catalog/components/browser-device-stage.mdx
@@ -6,6 +6,12 @@ description: "A generic app surface in token-native device chrome (browser, wind
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add browser-device-stage" item="browser-device-stage" />
+
+That writes one file: `compositions/components/browser-device-stage.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/browser-device-stage.json"
   compositionId="browser-device-stage"
@@ -666,12 +672,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add browser-device-stage" item="browser-device-stage" />
-
-That writes one file: `compositions/components/browser-device-stage.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/browser-device-stage.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/camera-rig-depth-stack.mdx b/docs/catalog/components/camera-rig-depth-stack.mdx
index d3d7f9987d..ce35ecb236 100644
--- a/docs/catalog/components/camera-rig-depth-stack.mdx
+++ b/docs/catalog/components/camera-rig-depth-stack.mdx
@@ -5,6 +5,12 @@ description: "A 3D camera-rig-style card stack with depth, parallax, and focus s
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add camera-rig-depth-stack" item="camera-rig-depth-stack" />
+
+That writes one file: `compositions/components/camera-rig-depth-stack.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="camera-rig-depth-stack preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/camera-rig-depth-stack.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/camera-rig-depth-stack.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add camera-rig-depth-stack" item="camera-rig-depth-stack" />
-
-That writes one file: `compositions/components/camera-rig-depth-stack.html`.
-
 ## Source
 
 <Accordion title={`camera-rig-depth-stack.html`}>
diff --git a/docs/catalog/components/camera-scan-gate.mdx b/docs/catalog/components/camera-scan-gate.mdx
index 38be97338e..40c0bf50a6 100644
--- a/docs/catalog/components/camera-scan-gate.mdx
+++ b/docs/catalog/components/camera-scan-gate.mdx
@@ -6,6 +6,12 @@ description: "A camera and QR recognition moment with a viewfinder sweep, bracke
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add camera-scan-gate" item="camera-scan-gate" />
+
+That writes one file: `compositions/components/camera-scan-gate.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/camera-scan-gate.json"
   compositionId="camera-scan-gate"
@@ -540,12 +546,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add camera-scan-gate" item="camera-scan-gate" />
-
-That writes one file: `compositions/components/camera-scan-gate.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/camera-scan-gate.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/camera-shake.mdx b/docs/catalog/components/camera-shake.mdx
index 2bea243469..0ab86e56e0 100644
--- a/docs/catalog/components/camera-shake.mdx
+++ b/docs/catalog/components/camera-shake.mdx
@@ -6,6 +6,12 @@ description: "Procedural handheld, telephoto and rig camera shake for any wrappe
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add camera-shake" item="camera-shake" />
+
+That writes one file: `compositions/components/camera-shake.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/camera-shake.json"
   compositionId="camera-shake"
@@ -827,12 +833,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add camera-shake" item="camera-shake" />
-
-That writes one file: `compositions/components/camera-shake.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/camera-shake.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/caption-blend-difference.mdx b/docs/catalog/components/caption-blend-difference.mdx
index d5b87bbd92..283b2d02d3 100644
--- a/docs/catalog/components/caption-blend-difference.mdx
+++ b/docs/catalog/components/caption-blend-difference.mdx
@@ -5,14 +5,14 @@ description: "Auto-inverting text using mix-blend-mode: difference — flips bet
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-blend-difference.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-blend-difference.png" autoPlay muted loop playsInline />
-
 ## Install
 
 <InstallCommand command="npx hyperframes add caption-blend-difference" item="caption-blend-difference" />
 
 That writes one file: `compositions/components/caption-blend-difference.html`.
 
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-blend-difference.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-blend-difference.png" autoPlay muted loop playsInline />
+
 ## Source
 
 <Accordion title={`caption-blend-difference.html`}>
diff --git a/docs/catalog/components/caption-camera-follow.mdx b/docs/catalog/components/caption-camera-follow.mdx
index d8846672be..f4dd1b27dc 100644
--- a/docs/catalog/components/caption-camera-follow.mdx
+++ b/docs/catalog/components/caption-camera-follow.mdx
@@ -6,6 +6,12 @@ description: "One sentence written across a world far larger than the frame. Eac
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add caption-camera-follow" item="caption-camera-follow" />
+
+That writes one file: `compositions/components/caption-camera-follow.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/caption-camera-follow.json"
   compositionId="caption-camera-follow"
@@ -449,12 +455,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add caption-camera-follow" item="caption-camera-follow" />
-
-That writes one file: `compositions/components/caption-camera-follow.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/caption-camera-follow.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/caption-clip-wipe.mdx b/docs/catalog/components/caption-clip-wipe.mdx
index 634d2264b2..0467dd0f51 100644
--- a/docs/catalog/components/caption-clip-wipe.mdx
+++ b/docs/catalog/components/caption-clip-wipe.mdx
@@ -5,6 +5,12 @@ description: "Left-to-right clip-path wipe reveal per word"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add caption-clip-wipe" item="caption-clip-wipe" />
+
+That writes one file: `compositions/components/caption-clip-wipe.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="caption-clip-wipe preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/caption-clip-wipe.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-clip-wipe.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add caption-clip-wipe" item="caption-clip-wipe" />
-
-That writes one file: `compositions/components/caption-clip-wipe.html`.
-
 ## Source
 
 <Accordion title={`caption-clip-wipe.html`}>
diff --git a/docs/catalog/components/caption-editorial-emphasis.mdx b/docs/catalog/components/caption-editorial-emphasis.mdx
index 193100e1d6..c0fae29440 100644
--- a/docs/catalog/components/caption-editorial-emphasis.mdx
+++ b/docs/catalog/components/caption-editorial-emphasis.mdx
@@ -5,6 +5,12 @@ description: "Dual-font system with dramatic size contrast for emphasis words"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add caption-editorial-emphasis" item="caption-editorial-emphasis" />
+
+That writes one file: `compositions/components/caption-editorial-emphasis.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="caption-editorial-emphasis preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/caption-editorial-emphasis.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-editorial-emphasis.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add caption-editorial-emphasis" item="caption-editorial-emphasis" />
-
-That writes one file: `compositions/components/caption-editorial-emphasis.html`.
-
 ## Source
 
 <Accordion title={`caption-editorial-emphasis.html`}>
diff --git a/docs/catalog/components/caption-emoji-pop.mdx b/docs/catalog/components/caption-emoji-pop.mdx
index 924be4baae..bd4796350e 100644
--- a/docs/catalog/components/caption-emoji-pop.mdx
+++ b/docs/catalog/components/caption-emoji-pop.mdx
@@ -5,6 +5,12 @@ description: "Emoji integration with stroked text and horizontal squeeze entranc
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add caption-emoji-pop" item="caption-emoji-pop" />
+
+That writes one file: `compositions/components/caption-emoji-pop.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="caption-emoji-pop preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/caption-emoji-pop.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-emoji-pop.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add caption-emoji-pop" item="caption-emoji-pop" />
-
-That writes one file: `compositions/components/caption-emoji-pop.html`.
-
 ## Source
 
 <Accordion title={`caption-emoji-pop.html`}>
diff --git a/docs/catalog/components/caption-glitch-rgb.mdx b/docs/catalog/components/caption-glitch-rgb.mdx
index d38b037920..c4f2b20591 100644
--- a/docs/catalog/components/caption-glitch-rgb.mdx
+++ b/docs/catalog/components/caption-glitch-rgb.mdx
@@ -5,6 +5,12 @@ description: "RGB chromatic aberration with CRT scanline overlay"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add caption-glitch-rgb" item="caption-glitch-rgb" />
+
+That writes one file: `compositions/components/caption-glitch-rgb.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="caption-glitch-rgb preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/caption-glitch-rgb.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-glitch-rgb.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add caption-glitch-rgb" item="caption-glitch-rgb" />
-
-That writes one file: `compositions/components/caption-glitch-rgb.html`.
-
 ## Source
 
 <Accordion title={`caption-glitch-rgb.html`}>
diff --git a/docs/catalog/components/caption-gradient-fill.mdx b/docs/catalog/components/caption-gradient-fill.mdx
index 05cf326d21..3d726fb556 100644
--- a/docs/catalog/components/caption-gradient-fill.mdx
+++ b/docs/catalog/components/caption-gradient-fill.mdx
@@ -5,6 +5,12 @@ description: "Gradient-clipped text with elastic bounce entrance"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add caption-gradient-fill" item="caption-gradient-fill" />
+
+That writes one file: `compositions/components/caption-gradient-fill.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="caption-gradient-fill preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/caption-gradient-fill.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-gradient-fill.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add caption-gradient-fill" item="caption-gradient-fill" />
-
-That writes one file: `compositions/components/caption-gradient-fill.html`.
-
 ## Source
 
 <Accordion title={`caption-gradient-fill.html`}>
diff --git a/docs/catalog/components/caption-highlight.mdx b/docs/catalog/components/caption-highlight.mdx
index 134522a627..09d05a4594 100644
--- a/docs/catalog/components/caption-highlight.mdx
+++ b/docs/catalog/components/caption-highlight.mdx
@@ -5,6 +5,12 @@ description: "Red background sweep behind each active word, TikTok-style"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add caption-highlight" item="caption-highlight" />
+
+That writes one file: `compositions/components/caption-highlight.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="caption-highlight preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/caption-highlight.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-highlight.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add caption-highlight" item="caption-highlight" />
-
-That writes one file: `compositions/components/caption-highlight.html`.
-
 ## Source
 
 <Accordion title={`caption-highlight.html`}>
diff --git a/docs/catalog/components/caption-kinetic-slam.mdx b/docs/catalog/components/caption-kinetic-slam.mdx
index aa4466718b..bfc75b4e4a 100644
--- a/docs/catalog/components/caption-kinetic-slam.mdx
+++ b/docs/catalog/components/caption-kinetic-slam.mdx
@@ -5,6 +5,12 @@ description: "Full-screen single-word display with alternating entrance directio
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add caption-kinetic-slam" item="caption-kinetic-slam" />
+
+That writes one file: `compositions/components/caption-kinetic-slam.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="caption-kinetic-slam preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/caption-kinetic-slam.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-kinetic-slam.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add caption-kinetic-slam" item="caption-kinetic-slam" />
-
-That writes one file: `compositions/components/caption-kinetic-slam.html`.
-
 ## Source
 
 <Accordion title={`caption-kinetic-slam.html`}>
diff --git a/docs/catalog/components/caption-matrix-decode.mdx b/docs/catalog/components/caption-matrix-decode.mdx
index e3d24e9f7d..4a8426e0f1 100644
--- a/docs/catalog/components/caption-matrix-decode.mdx
+++ b/docs/catalog/components/caption-matrix-decode.mdx
@@ -5,6 +5,12 @@ description: "Character scramble animation before text reveal"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add caption-matrix-decode" item="caption-matrix-decode" />
+
+That writes one file: `compositions/components/caption-matrix-decode.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="caption-matrix-decode preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/caption-matrix-decode.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-matrix-decode.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add caption-matrix-decode" item="caption-matrix-decode" />
-
-That writes one file: `compositions/components/caption-matrix-decode.html`.
-
 ## Source
 
 <Accordion title={`caption-matrix-decode.html`}>
diff --git a/docs/catalog/components/caption-neon-accent.mdx b/docs/catalog/components/caption-neon-accent.mdx
index 95cf2992f5..4c3dd96b7d 100644
--- a/docs/catalog/components/caption-neon-accent.mdx
+++ b/docs/catalog/components/caption-neon-accent.mdx
@@ -5,6 +5,12 @@ description: "Multi-color neon glow accents with wiggle drift animation"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add caption-neon-accent" item="caption-neon-accent" />
+
+That writes one file: `compositions/components/caption-neon-accent.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="caption-neon-accent preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/caption-neon-accent.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-accent.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add caption-neon-accent" item="caption-neon-accent" />
-
-That writes one file: `compositions/components/caption-neon-accent.html`.
-
 ## Source
 
 <Accordion title={`caption-neon-accent.html`}>
diff --git a/docs/catalog/components/caption-neon-glow.mdx b/docs/catalog/components/caption-neon-glow.mdx
index 96d41e9470..e04935b414 100644
--- a/docs/catalog/components/caption-neon-glow.mdx
+++ b/docs/catalog/components/caption-neon-glow.mdx
@@ -5,6 +5,12 @@ description: "Cyan and magenta neon glow with keyword accent colors"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add caption-neon-glow" item="caption-neon-glow" />
+
+That writes one file: `compositions/components/caption-neon-glow.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="caption-neon-glow preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/caption-neon-glow.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-glow.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add caption-neon-glow" item="caption-neon-glow" />
-
-That writes one file: `compositions/components/caption-neon-glow.html`.
-
 ## Source
 
 <Accordion title={`caption-neon-glow.html`}>
diff --git a/docs/catalog/components/caption-parallax-layers.mdx b/docs/catalog/components/caption-parallax-layers.mdx
index 99597c9f24..8354fb9379 100644
--- a/docs/catalog/components/caption-parallax-layers.mdx
+++ b/docs/catalog/components/caption-parallax-layers.mdx
@@ -5,6 +5,12 @@ description: "Behind-subject 3D text layering with vertical stretch effect"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add caption-parallax-layers" item="caption-parallax-layers" />
+
+That writes one file: `compositions/components/caption-parallax-layers.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="caption-parallax-layers preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/caption-parallax-layers.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-parallax-layers.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add caption-parallax-layers" item="caption-parallax-layers" />
-
-That writes one file: `compositions/components/caption-parallax-layers.html`.
-
 ## Source
 
 <Accordion title={`caption-parallax-layers.html`}>
diff --git a/docs/catalog/components/caption-particle-burst.mdx b/docs/catalog/components/caption-particle-burst.mdx
index cc62cf6be0..64136ebd36 100644
--- a/docs/catalog/components/caption-particle-burst.mdx
+++ b/docs/catalog/components/caption-particle-burst.mdx
@@ -5,6 +5,12 @@ description: "Keyword words trigger colored particle explosions"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add caption-particle-burst" item="caption-particle-burst" />
+
+That writes one file: `compositions/components/caption-particle-burst.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="caption-particle-burst preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/caption-particle-burst.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-particle-burst.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add caption-particle-burst" item="caption-particle-burst" />
-
-That writes one file: `compositions/components/caption-particle-burst.html`.
-
 ## Source
 
 <Accordion title={`caption-particle-burst.html`}>
diff --git a/docs/catalog/components/caption-pill-karaoke.mdx b/docs/catalog/components/caption-pill-karaoke.mdx
index dd794e847b..047c3de73c 100644
--- a/docs/catalog/components/caption-pill-karaoke.mdx
+++ b/docs/catalog/components/caption-pill-karaoke.mdx
@@ -5,6 +5,12 @@ description: "Pill-shaped container with per-word karaoke color highlight"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add caption-pill-karaoke" item="caption-pill-karaoke" />
+
+That writes one file: `compositions/components/caption-pill-karaoke.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="caption-pill-karaoke preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/caption-pill-karaoke.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-pill-karaoke.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add caption-pill-karaoke" item="caption-pill-karaoke" />
-
-That writes one file: `compositions/components/caption-pill-karaoke.html`.
-
 ## Source
 
 <Accordion title={`caption-pill-karaoke.html`}>
diff --git a/docs/catalog/components/caption-texture.mdx b/docs/catalog/components/caption-texture.mdx
index f048a3d16c..717bd28848 100644
--- a/docs/catalog/components/caption-texture.mdx
+++ b/docs/catalog/components/caption-texture.mdx
@@ -6,6 +6,12 @@ description: "Flowing texture mask over large uppercase text — ships with 6 te
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add caption-texture" item="caption-texture" />
+
+That writes `compositions/components/caption-texture.html`, plus 6 supporting files under `compositions/components/`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/caption-texture.json"
   compositionId="caption-texture"
@@ -228,12 +234,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add caption-texture" item="caption-texture" />
-
-That writes `compositions/components/caption-texture.html`, plus 6 supporting files under `compositions/components/`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/caption-weight-shift.mdx b/docs/catalog/components/caption-weight-shift.mdx
index 90ab65f003..3ca2608a4f 100644
--- a/docs/catalog/components/caption-weight-shift.mdx
+++ b/docs/catalog/components/caption-weight-shift.mdx
@@ -5,6 +5,12 @@ description: "Elegant font-weight transition between caption lines"
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add caption-weight-shift" item="caption-weight-shift" />
+
+That writes one file: `compositions/components/caption-weight-shift.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="caption-weight-shift preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/caption-weight-shift.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-weight-shift.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add caption-weight-shift" item="caption-weight-shift" />
-
-That writes one file: `compositions/components/caption-weight-shift.html`.
-
 ## Source
 
 <Accordion title={`caption-weight-shift.html`}>
diff --git a/docs/catalog/components/card-resize.mdx b/docs/catalog/components/card-resize.mdx
index 05d164a67a..49e848fc50 100644
--- a/docs/catalog/components/card-resize.mdx
+++ b/docs/catalog/components/card-resize.mdx
@@ -6,6 +6,12 @@ description: "A transitions.dev-inspired card resize primitive that expands a co
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add card-resize" item="card-resize" />
+
+That writes one file: `compositions/components/card-resize.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/card-resize.json"
   compositionId="card-resize"
@@ -194,12 +200,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add card-resize" item="card-resize" />
-
-That writes one file: `compositions/components/card-resize.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/char-slam-explode.mdx b/docs/catalog/components/char-slam-explode.mdx
index 4bd63deee8..4ff7abc961 100644
--- a/docs/catalog/components/char-slam-explode.mdx
+++ b/docs/catalog/components/char-slam-explode.mdx
@@ -6,6 +6,12 @@ description: "Headline glyphs hold in a deterministic scatter, then reassemble w
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add char-slam-explode" item="char-slam-explode" />
+
+That writes one file: `compositions/components/char-slam-explode.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/char-slam-explode.json"
   compositionId="char-slam-explode"
@@ -356,12 +362,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add char-slam-explode" item="char-slam-explode" />
-
-That writes one file: `compositions/components/char-slam-explode.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/char-slam-explode.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/chart-story.mdx b/docs/catalog/components/chart-story.mdx
index 329cc2dcd0..db104eb768 100644
--- a/docs/catalog/components/chart-story.mdx
+++ b/docs/catalog/components/chart-story.mdx
@@ -6,6 +6,12 @@ description: "One chart builds from data in reading order and lands the exact su
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add chart-story" item="chart-story" />
+
+That writes one file: `compositions/components/chart-story.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/chart-story.json"
   compositionId="chart-story"
@@ -757,12 +763,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add chart-story" item="chart-story" />
-
-That writes one file: `compositions/components/chart-story.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/chart-story.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/chat-message.mdx b/docs/catalog/components/chat-message.mdx
index dd60bdff8e..4242eb4060 100644
--- a/docs/catalog/components/chat-message.mdx
+++ b/docs/catalog/components/chat-message.mdx
@@ -6,6 +6,12 @@ description: "One message arrives on the measured entry - scale 0.75, 0.12s, gro
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add chat-message" item="chat-message" />
+
+That writes one file: `compositions/components/chat-message.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/chat-message.json"
   compositionId="chat-message"
@@ -322,12 +328,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add chat-message" item="chat-message" />
-
-That writes one file: `compositions/components/chat-message.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/chat-message.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/chat-thread.mdx b/docs/catalog/components/chat-thread.mdx
index ab4efb4c41..a9ae27d9c5 100644
--- a/docs/catalog/components/chat-thread.mdx
+++ b/docs/catalog/components/chat-thread.mdx
@@ -6,6 +6,12 @@ description: "The measured conversation as one mountable scene at full fidelity:
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add chat-thread" item="chat-thread" />
+
+That writes one file: `compositions/components/chat-thread.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/chat-thread.json"
   compositionId="chat-thread"
@@ -680,12 +686,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add chat-thread" item="chat-thread" />
-
-That writes one file: `compositions/components/chat-thread.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/chat-thread.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/chromatic-aberration-wipe.mdx b/docs/catalog/components/chromatic-aberration-wipe.mdx
index 4643257761..1dc536f002 100644
--- a/docs/catalog/components/chromatic-aberration-wipe.mdx
+++ b/docs/catalog/components/chromatic-aberration-wipe.mdx
@@ -6,6 +6,12 @@ description: "A fast slide wipe with RGB channel split on peak frames."
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add chromatic-aberration-wipe" item="chromatic-aberration-wipe" />
+
+That writes one file: `compositions/components/chromatic-aberration-wipe.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/chromatic-aberration-wipe.json"
   compositionId="chromatic-aberration-wipe"
@@ -183,12 +189,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add chromatic-aberration-wipe" item="chromatic-aberration-wipe" />
-
-That writes one file: `compositions/components/chromatic-aberration-wipe.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/code-terminal-run.mdx b/docs/catalog/components/code-terminal-run.mdx
index b5fba501d3..500f6da501 100644
--- a/docs/catalog/components/code-terminal-run.mdx
+++ b/docs/catalog/components/code-terminal-run.mdx
@@ -6,6 +6,12 @@ description: "A token-chrome terminal panel runs one command: the prompt line ty
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add code-terminal-run" item="code-terminal-run" />
+
+That writes one file: `compositions/components/code-terminal-run.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/code-terminal-run.json"
   compositionId="code-terminal-run"
@@ -578,12 +584,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add code-terminal-run" item="code-terminal-run" />
-
-That writes one file: `compositions/components/code-terminal-run.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/code-terminal-run.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/comparison-split.mdx b/docs/catalog/components/comparison-split.mdx
index 5ca61beb58..41e9ac9490 100644
--- a/docs/catalog/components/comparison-split.mdx
+++ b/docs/catalog/components/comparison-split.mdx
@@ -6,6 +6,12 @@ description: "Two full-bleed panels compare before and after states as a persist
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add comparison-split" item="comparison-split" />
+
+That writes one file: `compositions/components/comparison-split.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/comparison-split.json"
   compositionId="comparison-split"
@@ -467,12 +473,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add comparison-split" item="comparison-split" />
-
-That writes one file: `compositions/components/comparison-split.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/comparison-split.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/confetti.mdx b/docs/catalog/components/confetti.mdx
index 2da1e0c7cf..5958570b0b 100644
--- a/docs/catalog/components/confetti.mdx
+++ b/docs/catalog/components/confetti.mdx
@@ -5,6 +5,12 @@ description: "A deterministic celebration burst with seeded particles and gravit
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add confetti" item="confetti" />
+
+That writes one file: `compositions/components/confetti.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="confetti preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/confetti.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/confetti.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add confetti" item="confetti" />
-
-That writes one file: `compositions/components/confetti.html`.
-
 ## Source
 
 <Accordion title={`confetti.html`}>
diff --git a/docs/catalog/components/conic-progress-ring.mdx b/docs/catalog/components/conic-progress-ring.mdx
index b8df6e0b9a..8ea3c3dc57 100644
--- a/docs/catalog/components/conic-progress-ring.mdx
+++ b/docs/catalog/components/conic-progress-ring.mdx
@@ -6,6 +6,12 @@ description: "A token-driven conic progress ring whose angular fill and center c
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add conic-progress-ring" item="conic-progress-ring" />
+
+That writes one file: `compositions/components/conic-progress-ring.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/conic-progress-ring.json"
   compositionId="conic-progress-ring"
@@ -253,12 +259,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add conic-progress-ring" item="conic-progress-ring" />
-
-That writes one file: `compositions/components/conic-progress-ring.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/conic-progress-ring.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/constellation-hub.mdx b/docs/catalog/components/constellation-hub.mdx
index eab9583b4c..fc1ccb0a2d 100644
--- a/docs/catalog/components/constellation-hub.mdx
+++ b/docs/catalog/components/constellation-hub.mdx
@@ -6,6 +6,12 @@ description: "Feature nodes brighten in narration order as real-length SVG conne
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add constellation-hub" item="constellation-hub" />
+
+That writes one file: `compositions/components/constellation-hub.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/constellation-hub.json"
   compositionId="constellation-hub"
@@ -445,12 +451,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add constellation-hub" item="constellation-hub" />
-
-That writes one file: `compositions/components/constellation-hub.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/constellation-hub.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/count-up.mdx b/docs/catalog/components/count-up.mdx
index 8b3c95a22f..169a4091b5 100644
--- a/docs/catalog/components/count-up.mdx
+++ b/docs/catalog/components/count-up.mdx
@@ -6,6 +6,12 @@ description: "A token-native stat counter that eases between values and lands wi
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add count-up" item="count-up" />
+
+That writes one file: `compositions/components/count-up.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/count-up.json"
   compositionId="count-up"
@@ -315,12 +321,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add count-up" item="count-up" />
-
-That writes one file: `compositions/components/count-up.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/count-up.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/cta-close.mdx b/docs/catalog/components/cta-close.mdx
index 06375449e9..c90a0ea257 100644
--- a/docs/catalog/components/cta-close.mdx
+++ b/docs/catalog/components/cta-close.mdx
@@ -6,6 +6,12 @@ description: "A display-scale action line lands per word and fills the frame wit
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add cta-close" item="cta-close" />
+
+That writes one file: `compositions/components/cta-close.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/cta-close.json"
   compositionId="cta-close"
@@ -282,12 +288,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add cta-close" item="cta-close" />
-
-That writes one file: `compositions/components/cta-close.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/cta-close.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/cta-lockup.mdx b/docs/catalog/components/cta-lockup.mdx
index 3ee741c9b7..21a7d93bc3 100644
--- a/docs/catalog/components/cta-lockup.mdx
+++ b/docs/catalog/components/cta-lockup.mdx
@@ -6,6 +6,12 @@ description: "A canonical closing lockup that reveals an action line, pops in an
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add cta-lockup" item="cta-lockup" />
+
+That writes one file: `compositions/components/cta-lockup.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/cta-lockup.json"
   compositionId="cta-lockup"
@@ -276,12 +282,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add cta-lockup" item="cta-lockup" />
-
-That writes one file: `compositions/components/cta-lockup.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/cta-lockup.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/cursor-glyph-trail.mdx b/docs/catalog/components/cursor-glyph-trail.mdx
index 7544ad46ba..bcd8c536b5 100644
--- a/docs/catalog/components/cursor-glyph-trail.mdx
+++ b/docs/catalog/components/cursor-glyph-trail.mdx
@@ -6,6 +6,12 @@ description: "An actor travels an authored path depositing small dithered glyphs
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add cursor-glyph-trail" item="cursor-glyph-trail" />
+
+That writes one file: `compositions/components/cursor-glyph-trail.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/cursor-glyph-trail.json"
   compositionId="cursor-glyph-trail"
@@ -408,12 +414,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add cursor-glyph-trail" item="cursor-glyph-trail" />
-
-That writes one file: `compositions/components/cursor-glyph-trail.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/cursor-glyph-trail.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/cut-the-curve.mdx b/docs/catalog/components/cut-the-curve.mdx
index af163fc991..bdc4b0fb18 100644
--- a/docs/catalog/components/cut-the-curve.mdx
+++ b/docs/catalog/components/cut-the-curve.mdx
@@ -6,6 +6,12 @@ description: "A velocity-matched directional hard cut: the outgoing subject acce
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add cut-the-curve" item="cut-the-curve" />
+
+That writes one file: `compositions/components/cut-the-curve.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/cut-the-curve.json"
   compositionId="cut-the-curve"
@@ -518,12 +524,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add cut-the-curve" item="cut-the-curve" />
-
-That writes one file: `compositions/components/cut-the-curve.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/cut-the-curve.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/decline-chart.mdx b/docs/catalog/components/decline-chart.mdx
index 287c1f2e19..6a8a61a2c7 100644
--- a/docs/catalog/components/decline-chart.mdx
+++ b/docs/catalog/components/decline-chart.mdx
@@ -6,6 +6,12 @@ description: "A metric line draws downward as its value counts down and the ambi
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add decline-chart" item="decline-chart" />
+
+That writes one file: `compositions/components/decline-chart.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/decline-chart.json"
   compositionId="decline-chart"
@@ -294,12 +300,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add decline-chart" item="decline-chart" />
-
-That writes one file: `compositions/components/decline-chart.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/decline-chart.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/device-frame-stage.mdx b/docs/catalog/components/device-frame-stage.mdx
index b5b059979e..d7cedb0efc 100644
--- a/docs/catalog/components/device-frame-stage.mdx
+++ b/docs/catalog/components/device-frame-stage.mdx
@@ -6,6 +6,12 @@ description: "A phone or tablet mockup staged as a physical scene prop with a sc
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add device-frame-stage" item="device-frame-stage" />
+
+That writes one file: `compositions/components/device-frame-stage.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/device-frame-stage.json"
   compositionId="device-frame-stage"
@@ -484,12 +490,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add device-frame-stage" item="device-frame-stage" />
-
-That writes one file: `compositions/components/device-frame-stage.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/device-frame-stage.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/directional-wipe.mdx b/docs/catalog/components/directional-wipe.mdx
index b25d9020ff..5624baf032 100644
--- a/docs/catalog/components/directional-wipe.mdx
+++ b/docs/catalog/components/directional-wipe.mdx
@@ -6,6 +6,12 @@ description: "A directional scene push that slides one panel over another."
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add directional-wipe" item="directional-wipe" />
+
+That writes one file: `compositions/components/directional-wipe.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/directional-wipe.json"
   compositionId="directional-wipe"
@@ -164,12 +170,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add directional-wipe" item="directional-wipe" />
-
-That writes one file: `compositions/components/directional-wipe.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/drift-hold.mdx b/docs/catalog/components/drift-hold.mdx
index 9c2b629e64..ded60f97aa 100644
--- a/docs/catalog/components/drift-hold.mdx
+++ b/docs/catalog/components/drift-hold.mdx
@@ -6,6 +6,12 @@ description: "A centered content card stays subtly alive through loop-exact rota
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add drift-hold" item="drift-hold" />
+
+That writes one file: `compositions/components/drift-hold.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/drift-hold.json"
   compositionId="drift-hold"
@@ -210,12 +216,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add drift-hold" item="drift-hold" />
-
-That writes one file: `compositions/components/drift-hold.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/drift-hold.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/dynamic-grid.mdx b/docs/catalog/components/dynamic-grid.mdx
index 3629102f68..9cef18cc14 100644
--- a/docs/catalog/components/dynamic-grid.mdx
+++ b/docs/catalog/components/dynamic-grid.mdx
@@ -6,6 +6,12 @@ description: "A responsive animated grid background driven by CSS variables for
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add dynamic-grid" item="dynamic-grid" />
+
+That writes one file: `compositions/components/dynamic-grid.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/dynamic-grid.json"
   compositionId="dynamic-grid"
@@ -122,12 +128,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add dynamic-grid" item="dynamic-grid" />
-
-That writes one file: `compositions/components/dynamic-grid.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/echo-trail.mdx b/docs/catalog/components/echo-trail.mdx
index 96d871d7cd..9ace9a4847 100644
--- a/docs/catalog/components/echo-trail.mdx
+++ b/docs/catalog/components/echo-trail.mdx
@@ -6,6 +6,12 @@ description: "A moving element renders with N ghosted copies of itself at t minu
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add echo-trail" item="echo-trail" />
+
+That writes one file: `compositions/components/echo-trail.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/echo-trail.json"
   compositionId="echo-trail"
@@ -371,12 +377,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add echo-trail" item="echo-trail" />
-
-That writes one file: `compositions/components/echo-trail.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/echo-trail.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/facet-morph.mdx b/docs/catalog/components/facet-morph.mdx
index 4230145dae..a6cc38e830 100644
--- a/docs/catalog/components/facet-morph.mdx
+++ b/docs/catalog/components/facet-morph.mdx
@@ -6,6 +6,12 @@ description: "A faceted low-poly mass of 36 triangles continuously reshapes betw
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add facet-morph" item="facet-morph" />
+
+That writes one file: `compositions/components/facet-morph.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/facet-morph.json"
   compositionId="facet-morph"
@@ -569,12 +575,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add facet-morph" item="facet-morph" />
-
-That writes one file: `compositions/components/facet-morph.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/facet-morph.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/fade-through.mdx b/docs/catalog/components/fade-through.mdx
index 39e30b7091..4381e752c6 100644
--- a/docs/catalog/components/fade-through.mdx
+++ b/docs/catalog/components/fade-through.mdx
@@ -6,6 +6,12 @@ description: "A calm transition primitive that fades one layer out, passes throu
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add fade-through" item="fade-through" />
+
+That writes one file: `compositions/components/fade-through.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/fade-through.json"
   compositionId="fade-through"
@@ -114,12 +120,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add fade-through" item="fade-through" />
-
-That writes one file: `compositions/components/fade-through.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/focus-blur-resolve.mdx b/docs/catalog/components/focus-blur-resolve.mdx
index c6720a1034..9291db3c9e 100644
--- a/docs/catalog/components/focus-blur-resolve.mdx
+++ b/docs/catalog/components/focus-blur-resolve.mdx
@@ -6,6 +6,12 @@ description: "A premium focus pull from heavy blur to crisp text, then a soft bl
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add focus-blur-resolve" item="focus-blur-resolve" />
+
+That writes one file: `compositions/components/focus-blur-resolve.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/focus-blur-resolve.json"
   compositionId="focus-blur-resolve"
@@ -109,12 +115,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add focus-blur-resolve" item="focus-blur-resolve" />
-
-That writes one file: `compositions/components/focus-blur-resolve.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/focus-rack.mdx b/docs/catalog/components/focus-rack.mdx
index 3a85f0d200..8e7bfdef2e 100644
--- a/docs/catalog/components/focus-rack.mdx
+++ b/docs/catalog/components/focus-rack.mdx
@@ -6,6 +6,12 @@ description: "Focus shifts once between two cards at different apparent depths t
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add focus-rack" item="focus-rack" />
+
+That writes one file: `compositions/components/focus-rack.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/focus-rack.json"
   compositionId="focus-rack"
@@ -348,12 +354,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add focus-rack" item="focus-rack" />
-
-That writes one file: `compositions/components/focus-rack.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/focus-rack.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/focus-swap.mdx b/docs/catalog/components/focus-swap.mdx
index 2884e133f5..5dd7f77f81 100644
--- a/docs/catalog/components/focus-swap.mdx
+++ b/docs/catalog/components/focus-swap.mdx
@@ -6,6 +6,12 @@ description: "Moves attention between two side-by-side cards as one recedes with
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add focus-swap" item="focus-swap" />
+
+That writes one file: `compositions/components/focus-swap.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/focus-swap.json"
   compositionId="focus-swap"
@@ -299,12 +305,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add focus-swap" item="focus-swap" />
-
-That writes one file: `compositions/components/focus-swap.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/focus-swap.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/gesture-tap.mdx b/docs/catalog/components/gesture-tap.mdx
index 56b37068fd..c364bc7365 100644
--- a/docs/catalog/components/gesture-tap.mdx
+++ b/docs/catalog/components/gesture-tap.mdx
@@ -6,6 +6,12 @@ description: "A contact circle taps a mobile pill button, releases it into a new
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add gesture-tap" item="gesture-tap" />
+
+That writes one file: `compositions/components/gesture-tap.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/gesture-tap.json"
   compositionId="gesture-tap"
@@ -422,12 +428,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add gesture-tap" item="gesture-tap" />
-
-That writes one file: `compositions/components/gesture-tap.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/gesture-tap.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/gloss-sweep.mdx b/docs/catalog/components/gloss-sweep.mdx
index 874ea36c4b..9c4ccac6b4 100644
--- a/docs/catalog/components/gloss-sweep.mdx
+++ b/docs/catalog/components/gloss-sweep.mdx
@@ -6,6 +6,12 @@ description: "A card lands with a restrained slam, catches one diagonal specular
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add gloss-sweep" item="gloss-sweep" />
+
+That writes one file: `compositions/components/gloss-sweep.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/gloss-sweep.json"
   compositionId="gloss-sweep"
@@ -231,12 +237,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add gloss-sweep" item="gloss-sweep" />
-
-That writes one file: `compositions/components/gloss-sweep.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/gloss-sweep.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/grade-split-reveal.mdx b/docs/catalog/components/grade-split-reveal.mdx
index 7185b4cdf1..03579ee668 100644
--- a/docs/catalog/components/grade-split-reveal.mdx
+++ b/docs/catalog/components/grade-split-reveal.mdx
@@ -6,6 +6,12 @@ description: "The same picture twice, one flat and one finished, with a hard edg
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add grade-split-reveal" item="grade-split-reveal" />
+
+That writes one file: `compositions/components/grade-split-reveal.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/grade-split-reveal.json"
   compositionId="grade-split-reveal"
@@ -464,12 +470,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add grade-split-reveal" item="grade-split-reveal" />
-
-That writes one file: `compositions/components/grade-split-reveal.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/grade-split-reveal.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/grain-field.mdx b/docs/catalog/components/grain-field.mdx
index 6085859bc2..6698d54a73 100644
--- a/docs/catalog/components/grain-field.mdx
+++ b/docs/catalog/components/grain-field.mdx
@@ -6,6 +6,12 @@ description: "A clearly visible accent-tinted dot field drifts over a subtle lum
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add grain-field" item="grain-field" />
+
+That writes one file: `compositions/components/grain-field.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/grain-field.json"
   compositionId="grain-field"
@@ -188,12 +194,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add grain-field" item="grain-field" />
-
-That writes one file: `compositions/components/grain-field.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/grain-field.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/grain-overlay.mdx b/docs/catalog/components/grain-overlay.mdx
index e79db74f87..1a74c5b4af 100644
--- a/docs/catalog/components/grain-overlay.mdx
+++ b/docs/catalog/components/grain-overlay.mdx
@@ -5,6 +5,12 @@ description: "Animated film grain texture overlay using CSS keyframes — adds w
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add grain-overlay" item="grain-overlay" />
+
+That writes one file: `compositions/components/grain-overlay.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="grain-overlay preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/grain-overlay.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grain-overlay.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add grain-overlay" item="grain-overlay" />
-
-That writes one file: `compositions/components/grain-overlay.html`.
-
 ## Source
 
 <Accordion title={`grain-overlay.html`}>
diff --git a/docs/catalog/components/grid-card-assemble.mdx b/docs/catalog/components/grid-card-assemble.mdx
index 0babf9762c..a4b12eef82 100644
--- a/docs/catalog/components/grid-card-assemble.mdx
+++ b/docs/catalog/components/grid-card-assemble.mdx
@@ -6,6 +6,12 @@ description: "N capability cards (thin-line icon that draws on, mono label, opti
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add grid-card-assemble" item="grid-card-assemble" />
+
+That writes one file: `compositions/components/grid-card-assemble.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/grid-card-assemble.json"
   compositionId="grid-card-assemble"
@@ -486,12 +492,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add grid-card-assemble" item="grid-card-assemble" />
-
-That writes one file: `compositions/components/grid-card-assemble.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/grid-card-assemble.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/grid-pixelate-wipe.mdx b/docs/catalog/components/grid-pixelate-wipe.mdx
index 84ec7fcaaa..8cdb69542c 100644
--- a/docs/catalog/components/grid-pixelate-wipe.mdx
+++ b/docs/catalog/components/grid-pixelate-wipe.mdx
@@ -5,6 +5,12 @@ description: "Transition effect where the screen dissolves into a grid of square
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add grid-pixelate-wipe" item="grid-pixelate-wipe" />
+
+That writes one file: `compositions/components/grid-pixelate-wipe.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="grid-pixelate-wipe preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/grid-pixelate-wipe.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grid-pixelate-wipe.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add grid-pixelate-wipe" item="grid-pixelate-wipe" />
-
-That writes one file: `compositions/components/grid-pixelate-wipe.html`.
-
 ## Source
 
 <Accordion title={`grid-pixelate-wipe.html`}>
diff --git a/docs/catalog/components/halftone-dissolve.mdx b/docs/catalog/components/halftone-dissolve.mdx
index 9e1165baac..8a48869dae 100644
--- a/docs/catalog/components/halftone-dissolve.mdx
+++ b/docs/catalog/components/halftone-dissolve.mdx
@@ -6,6 +6,12 @@ description: "Scene A dissolves into scene B through a growing halftone dot fiel
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add halftone-dissolve" item="halftone-dissolve" />
+
+That writes one file: `compositions/components/halftone-dissolve.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/halftone-dissolve.json"
   compositionId="halftone-dissolve"
@@ -438,12 +444,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add halftone-dissolve" item="halftone-dissolve" />
-
-That writes one file: `compositions/components/halftone-dissolve.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/halftone-dissolve.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/headline-slam.mdx b/docs/catalog/components/headline-slam.mdx
index 7709a2877a..189619656e 100644
--- a/docs/catalog/components/headline-slam.mdx
+++ b/docs/catalog/components/headline-slam.mdx
@@ -6,6 +6,12 @@ description: "A heavyweight headline scales down into frame, lands with a determ
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add headline-slam" item="headline-slam" />
+
+That writes one file: `compositions/components/headline-slam.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/headline-slam.json"
   compositionId="headline-slam"
@@ -255,12 +261,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add headline-slam" item="headline-slam" />
-
-That writes one file: `compositions/components/headline-slam.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/headline-slam.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/hw-arrow.mdx b/docs/catalog/components/hw-arrow.mdx
index 728d83accc..a6e64c6a34 100644
--- a/docs/catalog/components/hw-arrow.mdx
+++ b/docs/catalog/components/hw-arrow.mdx
@@ -5,6 +5,12 @@ description: "Wobbled draw-on arrow with straight, gentle, and swoop curve poses
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add hw-arrow" item="hw-arrow" />
+
+That writes `compositions/components/hw-arrow.html`, plus 1 supporting file under `assets/fonts/`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="hw-arrow preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/hw-arrow.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-arrow.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add hw-arrow" item="hw-arrow" />
-
-That writes `compositions/components/hw-arrow.html`, plus 1 supporting file under `assets/fonts/`.
-
 ## Paste it into your composition
 
 Open `compositions/components/hw-arrow.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/hw-boil.mdx b/docs/catalog/components/hw-boil.mdx
index a772d75971..d24d6852b9 100644
--- a/docs/catalog/components/hw-boil.mdx
+++ b/docs/catalog/components/hw-boil.mdx
@@ -5,6 +5,12 @@ description: "Hand-drawn jitter that re-poses every N frames, as seek-safe helpe
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add hw-boil" item="hw-boil" />
+
+That writes `compositions/components/hw-boil.html`, plus 1 supporting file under `assets/fonts/`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="hw-boil preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/hw-boil.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-boil.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add hw-boil" item="hw-boil" />
-
-That writes `compositions/components/hw-boil.html`, plus 1 supporting file under `assets/fonts/`.
-
 ## Paste it into your composition
 
 Open `compositions/components/hw-boil.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/hw-box-label.mdx b/docs/catalog/components/hw-box-label.mdx
index 9f55bf3c50..753f760e99 100644
--- a/docs/catalog/components/hw-box-label.mdx
+++ b/docs/catalog/components/hw-box-label.mdx
@@ -5,6 +5,12 @@ description: "Wobbled rounded rectangle draws on — across the authored stroke
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add hw-box-label" item="hw-box-label" />
+
+That writes `compositions/components/hw-box-label.html`, plus 1 supporting file under `assets/fonts/`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="hw-box-label preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/hw-box-label.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-box-label.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add hw-box-label" item="hw-box-label" />
-
-That writes `compositions/components/hw-box-label.html`, plus 1 supporting file under `assets/fonts/`.
-
 ## Paste it into your composition
 
 Open `compositions/components/hw-box-label.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/hw-callout-circle.mdx b/docs/catalog/components/hw-callout-circle.mdx
index 3dc6ed4dd0..a6f786d572 100644
--- a/docs/catalog/components/hw-callout-circle.mdx
+++ b/docs/catalog/components/hw-callout-circle.mdx
@@ -5,6 +5,12 @@ description: "Wobbled ellipse draws around a target with optional scribble fill
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add hw-callout-circle" item="hw-callout-circle" />
+
+That writes `compositions/components/hw-callout-circle.html`, plus 1 supporting file under `assets/fonts/`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="hw-callout-circle preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/hw-callout-circle.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-callout-circle.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add hw-callout-circle" item="hw-callout-circle" />
-
-That writes `compositions/components/hw-callout-circle.html`, plus 1 supporting file under `assets/fonts/`.
-
 ## Paste it into your composition
 
 Open `compositions/components/hw-callout-circle.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/hw-underline.mdx b/docs/catalog/components/hw-underline.mdx
index 14727c5615..288373b429 100644
--- a/docs/catalog/components/hw-underline.mdx
+++ b/docs/catalog/components/hw-underline.mdx
@@ -5,6 +5,12 @@ description: "Hand-drawn squiggle underline, double-pass strikethrough, and brac
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add hw-underline" item="hw-underline" />
+
+That writes `compositions/components/hw-underline.html`, plus 1 supporting file under `assets/fonts/`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="hw-underline preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/hw-underline.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-underline.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add hw-underline" item="hw-underline" />
-
-That writes `compositions/components/hw-underline.html`, plus 1 supporting file under `assets/fonts/`.
-
 ## Paste it into your composition
 
 Open `compositions/components/hw-underline.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/icon-morph-beat.mdx b/docs/catalog/components/icon-morph-beat.mdx
index d04821424f..2e4f413085 100644
--- a/docs/catalog/components/icon-morph-beat.mdx
+++ b/docs/catalog/components/icon-morph-beat.mdx
@@ -6,6 +6,12 @@ description: "An icon morphs between authored state silhouettes, shifts to an ac
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add icon-morph-beat" item="icon-morph-beat" />
+
+That writes one file: `compositions/components/icon-morph-beat.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/icon-morph-beat.json"
   compositionId="icon-morph-beat"
@@ -276,12 +282,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add icon-morph-beat" item="icon-morph-beat" />
-
-That writes one file: `compositions/components/icon-morph-beat.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/icon-morph-beat.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/icon-swap.mdx b/docs/catalog/components/icon-swap.mdx
index fcc10c1cfc..dd288eb3f9 100644
--- a/docs/catalog/components/icon-swap.mdx
+++ b/docs/catalog/components/icon-swap.mdx
@@ -6,6 +6,12 @@ description: "A scale-and-blur icon swap primitive for toolbar and action state
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add icon-swap" item="icon-swap" />
+
+That writes one file: `compositions/components/icon-swap.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/icon-swap.json"
   compositionId="icon-swap"
@@ -130,12 +136,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add icon-swap" item="icon-swap" />
-
-That writes one file: `compositions/components/icon-swap.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/ink-bleed-reveal.mdx b/docs/catalog/components/ink-bleed-reveal.mdx
index fd6184dbb0..d33de65c6e 100644
--- a/docs/catalog/components/ink-bleed-reveal.mdx
+++ b/docs/catalog/components/ink-bleed-reveal.mdx
@@ -6,6 +6,12 @@ description: "Liquid ink blooms through paper under a gooey blur-plus-threshold
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add ink-bleed-reveal" item="ink-bleed-reveal" />
+
+That writes one file: `compositions/components/ink-bleed-reveal.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/ink-bleed-reveal.json"
   compositionId="ink-bleed-reveal"
@@ -465,12 +471,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add ink-bleed-reveal" item="ink-bleed-reveal" />
-
-That writes one file: `compositions/components/ink-bleed-reveal.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/ink-bleed-reveal.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/inline-highlight.mdx b/docs/catalog/components/inline-highlight.mdx
index 14f6e512d3..252ad99467 100644
--- a/docs/catalog/components/inline-highlight.mdx
+++ b/docs/catalog/components/inline-highlight.mdx
@@ -6,6 +6,12 @@ description: "A clean marker-style inline highlight that animates behind text us
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add inline-highlight" item="inline-highlight" />
+
+That writes one file: `compositions/components/inline-highlight.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/inline-highlight.json"
   compositionId="inline-highlight"
@@ -110,12 +116,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add inline-highlight" item="inline-highlight" />
-
-That writes one file: `compositions/components/inline-highlight.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/input-feedback.mdx b/docs/catalog/components/input-feedback.mdx
index 319e99e406..31887ae7e1 100644
--- a/docs/catalog/components/input-feedback.mdx
+++ b/docs/catalog/components/input-feedback.mdx
@@ -6,6 +6,12 @@ description: "A transitions.dev-inspired input feedback primitive with shake, cl
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add input-feedback" item="input-feedback" />
+
+That writes one file: `compositions/components/input-feedback.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/input-feedback.json"
   compositionId="input-feedback"
@@ -173,12 +179,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add input-feedback" item="input-feedback" />
-
-That writes one file: `compositions/components/input-feedback.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/iris-reveal.mdx b/docs/catalog/components/iris-reveal.mdx
index 4b6c2f8174..777f1530b9 100644
--- a/docs/catalog/components/iris-reveal.mdx
+++ b/docs/catalog/components/iris-reveal.mdx
@@ -6,6 +6,12 @@ description: "A circle clip-path opens from an authored origin revealing state B
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add iris-reveal" item="iris-reveal" />
+
+That writes one file: `compositions/components/iris-reveal.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/iris-reveal.json"
   compositionId="iris-reveal"
@@ -496,12 +502,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add iris-reveal" item="iris-reveal" />
-
-That writes one file: `compositions/components/iris-reveal.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/iris-reveal.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/keyframe-scrub-stack.mdx b/docs/catalog/components/keyframe-scrub-stack.mdx
index a42dd6ddc4..3665b446cf 100644
--- a/docs/catalog/components/keyframe-scrub-stack.mdx
+++ b/docs/catalog/components/keyframe-scrub-stack.mdx
@@ -5,6 +5,12 @@ description: "A keyframe-sequenced stack of cards with offset timing and easing
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add keyframe-scrub-stack" item="keyframe-scrub-stack" />
+
+That writes one file: `compositions/components/keyframe-scrub-stack.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="keyframe-scrub-stack preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/keyframe-scrub-stack.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/keyframe-scrub-stack.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add keyframe-scrub-stack" item="keyframe-scrub-stack" />
-
-That writes one file: `compositions/components/keyframe-scrub-stack.html`.
-
 ## Source
 
 <Accordion title={`keyframe-scrub-stack.html`}>
diff --git a/docs/catalog/components/kinetic-center-build.mdx b/docs/catalog/components/kinetic-center-build.mdx
index 1a8d1e62d4..56fc3679f3 100644
--- a/docs/catalog/components/kinetic-center-build.mdx
+++ b/docs/catalog/components/kinetic-center-build.mdx
@@ -6,6 +6,12 @@ description: "Words enter from the right and push the growing phrase left until
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add kinetic-center-build" item="kinetic-center-build" />
+
+That writes one file: `compositions/components/kinetic-center-build.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/kinetic-center-build.json"
   compositionId="kinetic-center-build"
@@ -302,12 +308,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add kinetic-center-build" item="kinetic-center-build" />
-
-That writes one file: `compositions/components/kinetic-center-build.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/kinetic-center-build.html` and copy what is inside into your own composition.
@@ -320,13 +320,13 @@ you paste it into.
 Every one of these has a default, so the piece works untouched. Set the ones you
 want to change on the element:
 
-| Variable       | Default            | Accepts                    | What it does                                                                 |
-| -------------- | ------------------ | -------------------------- | ---------------------------------------------------------------------------- |
-| `text`         | `Words push left.` | string                     | Short phrase that builds one word at a time.                                 |
-| `font_size`    | `72`               | 36px to 160px, step 2px    | Maximum text size in pixels. Longer phrases shrink to stay inside the frame. |
-| `entry_offset` | `88`               | 20px to 160px, step 4px    | Horizontal distance each new word travels before it lands.                   |
-| `color`        | `#171717`          | color                      | Text color for the full phrase.                                              |
-| `font_weight`  | `600`              | `500`, `600`, `700`, `800` | Weight used by every word in the phrase.                                     |
+| Variable | Default | Accepts | What it does |
+| --- | --- | --- | --- |
+| `text` | `Words push left.` | string | Short phrase that builds one word at a time. |
+| `font_size` | `72` | 36px to 160px, step 2px | Maximum text size in pixels. Longer phrases shrink to stay inside the frame. |
+| `entry_offset` | `88` | 20px to 160px, step 4px | Horizontal distance each new word travels before it lands. |
+| `color` | `#171717` | color | Text color for the full phrase. |
+| `font_weight` | `600` | `500`, `600`, `700`, `800` | Weight used by every word in the phrase. |
 
 Set them with `data-variable-values` on the element that mounts it. These are the
 defaults, so this behaves exactly like the preview above until you change one:
diff --git a/docs/catalog/components/kinetic-type-swap.mdx b/docs/catalog/components/kinetic-type-swap.mdx
index abb5a25c5c..f6113943eb 100644
--- a/docs/catalog/components/kinetic-type-swap.mdx
+++ b/docs/catalog/components/kinetic-type-swap.mdx
@@ -6,6 +6,12 @@ description: "A held sentence keeps its fixed text in place while one widest-wor
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add kinetic-type-swap" item="kinetic-type-swap" />
+
+That writes one file: `compositions/components/kinetic-type-swap.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/kinetic-type-swap.json"
   compositionId="kinetic-type-swap"
@@ -391,12 +397,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add kinetic-type-swap" item="kinetic-type-swap" />
-
-That writes one file: `compositions/components/kinetic-type-swap.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/kinetic-type-swap.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/light-sweep-pass.mdx b/docs/catalog/components/light-sweep-pass.mdx
index 237a3a62c1..8602af3fb0 100644
--- a/docs/catalog/components/light-sweep-pass.mdx
+++ b/docs/catalog/components/light-sweep-pass.mdx
@@ -6,6 +6,12 @@ description: "A traveling key light re-shades a slotted scene: a soft diagonal g
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add light-sweep-pass" item="light-sweep-pass" />
+
+That writes one file: `compositions/components/light-sweep-pass.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/light-sweep-pass.json"
   compositionId="light-sweep-pass"
@@ -495,12 +501,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add light-sweep-pass" item="light-sweep-pass" />
-
-That writes one file: `compositions/components/light-sweep-pass.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/light-sweep-pass.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/line-by-line-slide.mdx b/docs/catalog/components/line-by-line-slide.mdx
index 468a2bf0af..ecee6ffabe 100644
--- a/docs/catalog/components/line-by-line-slide.mdx
+++ b/docs/catalog/components/line-by-line-slide.mdx
@@ -6,6 +6,12 @@ description: "Each line enters from the left with staggered slide and exits to t
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add line-by-line-slide" item="line-by-line-slide" />
+
+That writes one file: `compositions/components/line-by-line-slide.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/line-by-line-slide.json"
   compositionId="line-by-line-slide"
@@ -123,12 +129,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add line-by-line-slide" item="line-by-line-slide" />
-
-That writes one file: `compositions/components/line-by-line-slide.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/line-swap.mdx b/docs/catalog/components/line-swap.mdx
index f9dfbfe641..97fe6a574a 100644
--- a/docs/catalog/components/line-swap.mdx
+++ b/docs/catalog/components/line-swap.mdx
@@ -6,6 +6,12 @@ description: "A masked full-line beat replacement: line A holds center then exit
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add line-swap" item="line-swap" />
+
+That writes one file: `compositions/components/line-swap.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/line-swap.json"
   compositionId="line-swap"
@@ -327,12 +333,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add line-swap" item="line-swap" />
-
-That writes one file: `compositions/components/line-swap.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/line-swap.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/locked-nucleus-orbit.mdx b/docs/catalog/components/locked-nucleus-orbit.mdx
index c3ac0866ca..2f52be1047 100644
--- a/docs/catalog/components/locked-nucleus-orbit.mdx
+++ b/docs/catalog/components/locked-nucleus-orbit.mdx
@@ -6,6 +6,12 @@ description: "A fixed center nucleus anchors deterministic satellite orbits that
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add locked-nucleus-orbit" item="locked-nucleus-orbit" />
+
+That writes one file: `compositions/components/locked-nucleus-orbit.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/locked-nucleus-orbit.json"
   compositionId="locked-nucleus-orbit"
@@ -371,12 +377,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add locked-nucleus-orbit" item="locked-nucleus-orbit" />
-
-That writes one file: `compositions/components/locked-nucleus-orbit.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/locked-nucleus-orbit.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/logo-brand-close.mdx b/docs/catalog/components/logo-brand-close.mdx
index aa8a2e6c1a..49f858eb22 100644
--- a/docs/catalog/components/logo-brand-close.mdx
+++ b/docs/catalog/components/logo-brand-close.mdx
@@ -6,6 +6,12 @@ description: "A display-scale wordmark cascades letter by letter into a centered
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add logo-brand-close" item="logo-brand-close" />
+
+That writes one file: `compositions/components/logo-brand-close.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/logo-brand-close.json"
   compositionId="logo-brand-close"
@@ -385,12 +391,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add logo-brand-close" item="logo-brand-close" />
-
-That writes one file: `compositions/components/logo-brand-close.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/logo-brand-close.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/logo-sting.mdx b/docs/catalog/components/logo-sting.mdx
index 967fb54c60..ace33cf9db 100644
--- a/docs/catalog/components/logo-sting.mdx
+++ b/docs/catalog/components/logo-sting.mdx
@@ -6,6 +6,12 @@ description: "A wordmark slams into its final scale, fires one accent ring and o
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add logo-sting" item="logo-sting" />
+
+That writes one file: `compositions/components/logo-sting.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/logo-sting.json"
   compositionId="logo-sting"
@@ -198,12 +204,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add logo-sting" item="logo-sting" />
-
-That writes one file: `compositions/components/logo-sting.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/logo-sting.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/logo-wall.mdx b/docs/catalog/components/logo-wall.mdx
index 19366ea250..5f760d2b41 100644
--- a/docs/catalog/components/logo-wall.mdx
+++ b/docs/catalog/components/logo-wall.mdx
@@ -6,6 +6,12 @@ description: "A trusted-by wall of placeholder lettermark logos that fades and s
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add logo-wall" item="logo-wall" />
+
+That writes one file: `compositions/components/logo-wall.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/logo-wall.json"
   compositionId="logo-wall"
@@ -317,12 +323,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add logo-wall" item="logo-wall" />
-
-That writes one file: `compositions/components/logo-wall.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/logo-wall.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/marker-checklist-card.mdx b/docs/catalog/components/marker-checklist-card.mdx
index ec5808063d..29bbc5a41d 100644
--- a/docs/catalog/components/marker-checklist-card.mdx
+++ b/docs/catalog/components/marker-checklist-card.mdx
@@ -6,6 +6,12 @@ description: "A hand-lettered paper card: marker headline with an underline and
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add marker-checklist-card" item="marker-checklist-card" />
+
+That writes `compositions/components/marker-checklist-card.html`, plus 2 supporting files under `assets/fonts/`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/marker-checklist-card.json"
   compositionId="marker-checklist-card"
@@ -324,12 +330,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add marker-checklist-card" item="marker-checklist-card" />
-
-That writes `compositions/components/marker-checklist-card.html`, plus 2 supporting files under `assets/fonts/`.
-
 ## Paste it into your composition
 
 Open `compositions/components/marker-checklist-card.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/marker-highlight.mdx b/docs/catalog/components/marker-highlight.mdx
index 2b9e09327e..0698dd7ea3 100644
--- a/docs/catalog/components/marker-highlight.mdx
+++ b/docs/catalog/components/marker-highlight.mdx
@@ -6,6 +6,12 @@ description: "Display text settles in, then one hand-drawn marker stroke (highli
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add marker-highlight" item="marker-highlight" />
+
+That writes one file: `compositions/components/marker-highlight.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/marker-highlight.json"
   compositionId="marker-highlight"
@@ -383,12 +389,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add marker-highlight" item="marker-highlight" />
-
-That writes one file: `compositions/components/marker-highlight.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/match-cut.mdx b/docs/catalog/components/match-cut.mdx
index 9205ecc297..bc21d621bb 100644
--- a/docs/catalog/components/match-cut.mdx
+++ b/docs/catalog/components/match-cut.mdx
@@ -6,6 +6,12 @@ description: "A circle accelerates into a hard single-frame scene swap, matches
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add match-cut" item="match-cut" />
+
+That writes one file: `compositions/components/match-cut.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/match-cut.json"
   compositionId="match-cut"
@@ -327,12 +333,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add match-cut" item="match-cut" />
-
-That writes one file: `compositions/components/match-cut.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/match-cut.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/matrix-decode.mdx b/docs/catalog/components/matrix-decode.mdx
index c1413fa715..5dc5f9afc8 100644
--- a/docs/catalog/components/matrix-decode.mdx
+++ b/docs/catalog/components/matrix-decode.mdx
@@ -6,6 +6,12 @@ description: "Random scramble resolves left-to-right into the target text."
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add matrix-decode" item="matrix-decode" />
+
+That writes one file: `compositions/components/matrix-decode.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/matrix-decode.json"
   compositionId="matrix-decode"
@@ -146,12 +152,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add matrix-decode" item="matrix-decode" />
-
-That writes one file: `compositions/components/matrix-decode.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/menu-morph.mdx b/docs/catalog/components/menu-morph.mdx
index dccd7e7ff5..50e1321544 100644
--- a/docs/catalog/components/menu-morph.mdx
+++ b/docs/catalog/components/menu-morph.mdx
@@ -6,6 +6,12 @@ description: "A transitions.dev-inspired hamburger and plus-menu morph primitive
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add menu-morph" item="menu-morph" />
+
+That writes one file: `compositions/components/menu-morph.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/menu-morph.json"
   compositionId="menu-morph"
@@ -179,12 +185,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add menu-morph" item="menu-morph" />
-
-That writes one file: `compositions/components/menu-morph.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/mesh-gradient-bg.mdx b/docs/catalog/components/mesh-gradient-bg.mdx
index b0a379811c..f412921618 100644
--- a/docs/catalog/components/mesh-gradient-bg.mdx
+++ b/docs/catalog/components/mesh-gradient-bg.mdx
@@ -5,6 +5,12 @@ description: "A render-safe mesh gradient using animated radial layers."
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add mesh-gradient-bg" item="mesh-gradient-bg" />
+
+That writes one file: `compositions/components/mesh-gradient-bg.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="mesh-gradient-bg preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/mesh-gradient-bg.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/mesh-gradient-bg.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add mesh-gradient-bg" item="mesh-gradient-bg" />
-
-That writes one file: `compositions/components/mesh-gradient-bg.html`.
-
 ## Source
 
 <Accordion title={`mesh-gradient-bg.html`}>
diff --git a/docs/catalog/components/micro-transitions.mdx b/docs/catalog/components/micro-transitions.mdx
index 4e3bc1f399..16fc55a3c6 100644
--- a/docs/catalog/components/micro-transitions.mdx
+++ b/docs/catalog/components/micro-transitions.mdx
@@ -6,6 +6,12 @@ description: "A transitions.dev-inspired pack of badge, dropdown, modal, tabs, t
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add micro-transitions" item="micro-transitions" />
+
+That writes one file: `compositions/components/micro-transitions.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/micro-transitions.json"
   compositionId="micro-transitions"
@@ -282,12 +288,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add micro-transitions" item="micro-transitions" />
-
-That writes one file: `compositions/components/micro-transitions.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/mk-emphasis-type.mdx b/docs/catalog/components/mk-emphasis-type.mdx
index 29442df2c8..6de533829b 100644
--- a/docs/catalog/components/mk-emphasis-type.mdx
+++ b/docs/catalog/components/mk-emphasis-type.mdx
@@ -5,6 +5,12 @@ description: "Oversized low-contrast background word drifting slowly behind the
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add mk-emphasis-type" item="mk-emphasis-type" />
+
+That writes one file: `compositions/components/mk-emphasis-type.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="mk-emphasis-type preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/mk-emphasis-type.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/mk-emphasis-type.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add mk-emphasis-type" item="mk-emphasis-type" />
-
-That writes one file: `compositions/components/mk-emphasis-type.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/mk-emphasis-type.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/mk-usage-arc.mdx b/docs/catalog/components/mk-usage-arc.mdx
index 19754b6985..88cec2df11 100644
--- a/docs/catalog/components/mk-usage-arc.mdx
+++ b/docs/catalog/components/mk-usage-arc.mdx
@@ -5,6 +5,12 @@ description: "Thin circular gauge that draws on while its percentage counts up;
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add mk-usage-arc" item="mk-usage-arc" />
+
+That writes one file: `compositions/components/mk-usage-arc.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="mk-usage-arc preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/mk-usage-arc.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/mk-usage-arc.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add mk-usage-arc" item="mk-usage-arc" />
-
-That writes one file: `compositions/components/mk-usage-arc.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/mk-usage-arc.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/modal-morph.mdx b/docs/catalog/components/modal-morph.mdx
index f5d95e73a5..cb051d62db 100644
--- a/docs/catalog/components/modal-morph.mdx
+++ b/docs/catalog/components/modal-morph.mdx
@@ -6,6 +6,12 @@ description: "A small card expands into a full panel, shared-element style: both
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add modal-morph" item="modal-morph" />
+
+That writes one file: `compositions/components/modal-morph.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/modal-morph.json"
   compositionId="modal-morph"
@@ -540,12 +546,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add modal-morph" item="modal-morph" />
-
-That writes one file: `compositions/components/modal-morph.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/modal-morph.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/morph-swap.mdx b/docs/catalog/components/morph-swap.mdx
index b230fd9775..5a7784521a 100644
--- a/docs/catalog/components/morph-swap.mdx
+++ b/docs/catalog/components/morph-swap.mdx
@@ -6,6 +6,12 @@ description: "Two slotted siblings stacked at one shared center: A holds, then c
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add morph-swap" item="morph-swap" />
+
+That writes one file: `compositions/components/morph-swap.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/morph-swap.json"
   compositionId="morph-swap"
@@ -405,12 +411,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add morph-swap" item="morph-swap" />
-
-That writes one file: `compositions/components/morph-swap.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/morph-swap.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/morph-text.mdx b/docs/catalog/components/morph-text.mdx
index 0cbbb4fbb7..771e773c82 100644
--- a/docs/catalog/components/morph-text.mdx
+++ b/docs/catalog/components/morph-text.mdx
@@ -5,6 +5,12 @@ description: "Gooey text morph — cycles through an editable word list using SV
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add morph-text" item="morph-text" />
+
+That writes one file: `compositions/components/morph-text.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="morph-text preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/morph-text.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add morph-text" item="morph-text" />
-
-That writes one file: `compositions/components/morph-text.html`.
-
 ## Source
 
 <Accordion title={`morph-text.html`}>
diff --git a/docs/catalog/components/motion-blur.mdx b/docs/catalog/components/motion-blur.mdx
index 8c81579a91..c31c600d1e 100644
--- a/docs/catalog/components/motion-blur.mdx
+++ b/docs/catalog/components/motion-blur.mdx
@@ -5,6 +5,12 @@ description: "Velocity-driven motion blur — samples element position each fram
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add motion-blur" item="motion-blur" />
+
+That writes one file: `compositions/components/motion-blur.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="motion-blur preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/motion-blur.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/motion-blur.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add motion-blur" item="motion-blur" />
-
-That writes one file: `compositions/components/motion-blur.html`.
-
 ## Source
 
 <Accordion title={`motion-blur.html`}>
diff --git a/docs/catalog/components/multi-device-splay.mdx b/docs/catalog/components/multi-device-splay.mdx
index 9069fb32cc..03dd252975 100644
--- a/docs/catalog/components/multi-device-splay.mdx
+++ b/docs/catalog/components/multi-device-splay.mdx
@@ -6,6 +6,12 @@ description: "Phone, tablet, and desktop product mockups fan from a centered sta
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add multi-device-splay" item="multi-device-splay" />
+
+That writes one file: `compositions/components/multi-device-splay.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/multi-device-splay.json"
   compositionId="multi-device-splay"
@@ -745,12 +751,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add multi-device-splay" item="multi-device-splay" />
-
-That writes one file: `compositions/components/multi-device-splay.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/multi-device-splay.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/multiplayer-cursors.mdx b/docs/catalog/components/multiplayer-cursors.mdx
index e5024981e9..d41d077f5e 100644
--- a/docs/catalog/components/multiplayer-cursors.mdx
+++ b/docs/catalog/components/multiplayer-cursors.mdx
@@ -6,6 +6,12 @@ description: "Labeled collaborator cursors with token-derived colors and soft gl
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add multiplayer-cursors" item="multiplayer-cursors" />
+
+That writes one file: `compositions/components/multiplayer-cursors.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/multiplayer-cursors.json"
   compositionId="multiplayer-cursors"
@@ -447,12 +453,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add multiplayer-cursors" item="multiplayer-cursors" />
-
-That writes one file: `compositions/components/multiplayer-cursors.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/multiplayer-cursors.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/native-notification-pop.mdx b/docs/catalog/components/native-notification-pop.mdx
index b5cc06e800..bd2764b6a5 100644
--- a/docs/catalog/components/native-notification-pop.mdx
+++ b/docs/catalog/components/native-notification-pop.mdx
@@ -6,6 +6,12 @@ description: "One system-faithful notification banner (iOS or macOS) drops in ov
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add native-notification-pop" item="native-notification-pop" />
+
+That writes one file: `compositions/components/native-notification-pop.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/native-notification-pop.json"
   compositionId="native-notification-pop"
@@ -474,12 +480,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add native-notification-pop" item="native-notification-pop" />
-
-That writes one file: `compositions/components/native-notification-pop.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/native-notification-pop.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/notes-typing.mdx b/docs/catalog/components/notes-typing.mdx
index e3d6e57b0b..4e90e7fbae 100644
--- a/docs/catalog/components/notes-typing.mdx
+++ b/docs/catalog/components/notes-typing.mdx
@@ -6,6 +6,12 @@ description: "The notes-app confession as a mountable scene: a bold title, then
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add notes-typing" item="notes-typing" />
+
+That writes one file: `compositions/components/notes-typing.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/notes-typing.json"
   compositionId="notes-typing"
@@ -365,12 +371,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add notes-typing" item="notes-typing" />
-
-That writes one file: `compositions/components/notes-typing.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/notes-typing.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/notification-pileup.mdx b/docs/catalog/components/notification-pileup.mdx
index 269e992007..0871faa493 100644
--- a/docs/catalog/components/notification-pileup.mdx
+++ b/docs/catalog/components/notification-pileup.mdx
@@ -6,6 +6,12 @@ description: "Mobile notification cards arrive faster and faster, each new alert
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add notification-pileup" item="notification-pileup" />
+
+That writes one file: `compositions/components/notification-pileup.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/notification-pileup.json"
   compositionId="notification-pileup"
@@ -481,12 +487,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add notification-pileup" item="notification-pileup" />
-
-That writes one file: `compositions/components/notification-pileup.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/notification-pileup.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/notification-stack.mdx b/docs/catalog/components/notification-stack.mdx
index 50e93b79f3..eb65a5673e 100644
--- a/docs/catalog/components/notification-stack.mdx
+++ b/docs/catalog/components/notification-stack.mdx
@@ -6,6 +6,12 @@ description: "1 to 5 token notification cards slide-settle into a vertical stack
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add notification-stack" item="notification-stack" />
+
+That writes one file: `compositions/components/notification-stack.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/notification-stack.json"
   compositionId="notification-stack"
@@ -405,12 +411,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add notification-stack" item="notification-stack" />
-
-That writes one file: `compositions/components/notification-stack.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/notification-stack.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/number-pop-in.mdx b/docs/catalog/components/number-pop-in.mdx
index 6b88d4ede3..9c2db6d4ca 100644
--- a/docs/catalog/components/number-pop-in.mdx
+++ b/docs/catalog/components/number-pop-in.mdx
@@ -6,6 +6,12 @@ description: "A transitions.dev-inspired digit pop-in with blur, lift, and stagg
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add number-pop-in" item="number-pop-in" />
+
+That writes one file: `compositions/components/number-pop-in.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/number-pop-in.json"
   compositionId="number-pop-in"
@@ -138,12 +144,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add number-pop-in" item="number-pop-in" />
-
-That writes one file: `compositions/components/number-pop-in.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/number-wheel.mdx b/docs/catalog/components/number-wheel.mdx
index 2703b1a7d9..b3762497cd 100644
--- a/docs/catalog/components/number-wheel.mdx
+++ b/docs/catalog/components/number-wheel.mdx
@@ -6,6 +6,12 @@ description: "A rolling digit counter primitive for metrics, prices, counts, and
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add number-wheel" item="number-wheel" />
+
+That writes one file: `compositions/components/number-wheel.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/number-wheel.json"
   compositionId="number-wheel"
@@ -140,12 +146,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add number-wheel" item="number-wheel" />
-
-That writes one file: `compositions/components/number-wheel.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/offset-path-traveler.mdx b/docs/catalog/components/offset-path-traveler.mdx
index 93b506e5a9..23cc93f2a8 100644
--- a/docs/catalog/components/offset-path-traveler.mdx
+++ b/docs/catalog/components/offset-path-traveler.mdx
@@ -6,6 +6,12 @@ description: "A slotted traveler follows an authored path with tangent rotation,
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add offset-path-traveler" item="offset-path-traveler" />
+
+That writes one file: `compositions/components/offset-path-traveler.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/offset-path-traveler.json"
   compositionId="offset-path-traveler"
@@ -305,12 +311,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add offset-path-traveler" item="offset-path-traveler" />
-
-That writes one file: `compositions/components/offset-path-traveler.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/offset-path-traveler.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/onboarding-stepper-flow.mdx b/docs/catalog/components/onboarding-stepper-flow.mdx
index 1dbe7b0d29..a72d602ee6 100644
--- a/docs/catalog/components/onboarding-stepper-flow.mdx
+++ b/docs/catalog/components/onboarding-stepper-flow.mdx
@@ -5,6 +5,12 @@ description: "A composed onboarding flow with milestone rail, active step card,
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add onboarding-stepper-flow" item="onboarding-stepper-flow" />
+
+That writes one file: `compositions/components/onboarding-stepper-flow.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="onboarding-stepper-flow preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/onboarding-stepper-flow.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/onboarding-stepper-flow.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add onboarding-stepper-flow" item="onboarding-stepper-flow" />
-
-That writes one file: `compositions/components/onboarding-stepper-flow.html`.
-
 ## Source
 
 <Accordion title={`onboarding-stepper-flow.html`}>
diff --git a/docs/catalog/components/ordered-dither-pass.mdx b/docs/catalog/components/ordered-dither-pass.mdx
index 53a95e49fd..0a71531265 100644
--- a/docs/catalog/components/ordered-dither-pass.mdx
+++ b/docs/catalog/components/ordered-dither-pass.mdx
@@ -6,6 +6,12 @@ description: "Bayer-matrix ordered dithering quantizes a slotted scene (rasteriz
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add ordered-dither-pass" item="ordered-dither-pass" />
+
+That writes one file: `compositions/components/ordered-dither-pass.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/ordered-dither-pass.json"
   compositionId="ordered-dither-pass"
@@ -529,12 +535,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add ordered-dither-pass" item="ordered-dither-pass" />
-
-That writes one file: `compositions/components/ordered-dither-pass.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/ordered-dither-pass.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/outline-draw.mdx b/docs/catalog/components/outline-draw.mdx
index baee2ad959..3045b2d57b 100644
--- a/docs/catalog/components/outline-draw.mdx
+++ b/docs/catalog/components/outline-draw.mdx
@@ -6,6 +6,12 @@ description: "A rounded outline that proves a callout by drawing clockwise as a
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add outline-draw" item="outline-draw" />
+
+That writes one file: `compositions/components/outline-draw.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/outline-draw.json"
   compositionId="outline-draw"
@@ -191,12 +197,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add outline-draw" item="outline-draw" />
-
-That writes one file: `compositions/components/outline-draw.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/outline-draw.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/oversized-cursor.mdx b/docs/catalog/components/oversized-cursor.mdx
index 5763e11107..fe1def64d4 100644
--- a/docs/catalog/components/oversized-cursor.mdx
+++ b/docs/catalog/components/oversized-cursor.mdx
@@ -6,6 +6,12 @@ description: "A deliberately oversized macOS-style pointer that enters off-scree
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add oversized-cursor" item="oversized-cursor" />
+
+That writes one file: `compositions/components/oversized-cursor.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/oversized-cursor.json"
   compositionId="oversized-cursor"
@@ -440,12 +446,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add oversized-cursor" item="oversized-cursor" />
-
-That writes one file: `compositions/components/oversized-cursor.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/oversized-cursor.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/overwhelm-surround.mdx b/docs/catalog/components/overwhelm-surround.mdx
index 63e638497b..1d55a3f531 100644
--- a/docs/catalog/components/overwhelm-surround.mdx
+++ b/docs/catalog/components/overwhelm-surround.mdx
@@ -6,6 +6,12 @@ description: "Tasks, tabs, pings, and notification bubbles accelerate inward aro
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add overwhelm-surround" item="overwhelm-surround" />
+
+That writes one file: `compositions/components/overwhelm-surround.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/overwhelm-surround.json"
   compositionId="overwhelm-surround"
@@ -392,12 +398,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add overwhelm-surround" item="overwhelm-surround" />
-
-That writes one file: `compositions/components/overwhelm-surround.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/overwhelm-surround.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/page-slide.mdx b/docs/catalog/components/page-slide.mdx
index 0c66e7fbe3..090b5a02c1 100644
--- a/docs/catalog/components/page-slide.mdx
+++ b/docs/catalog/components/page-slide.mdx
@@ -6,6 +6,12 @@ description: "A transitions.dev-inspired page slide primitive with outgoing and
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add page-slide" item="page-slide" />
+
+That writes one file: `compositions/components/page-slide.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/page-slide.json"
   compositionId="page-slide"
@@ -138,12 +144,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add page-slide" item="page-slide" />
-
-That writes one file: `compositions/components/page-slide.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/pan-stations.mdx b/docs/catalog/components/pan-stations.mdx
index 087e8cca31..a5d55f7f48 100644
--- a/docs/catalog/components/pan-stations.mdx
+++ b/docs/catalog/components/pan-stations.mdx
@@ -6,6 +6,12 @@ description: "A lateral camera move across a continuous row of labeled feature s
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add pan-stations" item="pan-stations" />
+
+That writes one file: `compositions/components/pan-stations.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/pan-stations.json"
   compositionId="pan-stations"
@@ -382,12 +388,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add pan-stations" item="pan-stations" />
-
-That writes one file: `compositions/components/pan-stations.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/pan-stations.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/panel-reveal.mdx b/docs/catalog/components/panel-reveal.mdx
index 8f9c244105..d15dac0e3c 100644
--- a/docs/catalog/components/panel-reveal.mdx
+++ b/docs/catalog/components/panel-reveal.mdx
@@ -6,6 +6,12 @@ description: "A panel reveal primitive with height expansion and content fade"
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add panel-reveal" item="panel-reveal" />
+
+That writes one file: `compositions/components/panel-reveal.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/panel-reveal.json"
   compositionId="panel-reveal"
@@ -151,12 +157,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add panel-reveal" item="panel-reveal" />
-
-That writes one file: `compositions/components/panel-reveal.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/parallax-device-dive.mdx b/docs/catalog/components/parallax-device-dive.mdx
index f6b231a6ca..afbdef2557 100644
--- a/docs/catalog/components/parallax-device-dive.mdx
+++ b/docs/catalog/components/parallax-device-dive.mdx
@@ -6,6 +6,12 @@ description: "A canonical phone rises into view before the camera pushes through
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add parallax-device-dive" item="parallax-device-dive" />
+
+That writes one file: `compositions/components/parallax-device-dive.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/parallax-device-dive.json"
   compositionId="parallax-device-dive"
@@ -469,12 +475,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add parallax-device-dive" item="parallax-device-dive" />
-
-That writes one file: `compositions/components/parallax-device-dive.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/parallax-device-dive.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/parallax-unzoom.mdx b/docs/catalog/components/parallax-unzoom.mdx
index f012397a62..a0691c64f7 100644
--- a/docs/catalog/components/parallax-unzoom.mdx
+++ b/docs/catalog/components/parallax-unzoom.mdx
@@ -5,6 +5,12 @@ description: "Reveal transition — focus card scales down from full frame as si
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add parallax-unzoom" item="parallax-unzoom" />
+
+That writes one file: `compositions/components/parallax-unzoom.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="parallax-unzoom preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/parallax-unzoom.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/parallax-unzoom.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add parallax-unzoom" item="parallax-unzoom" />
-
-That writes one file: `compositions/components/parallax-unzoom.html`.
-
 ## Source
 
 <Accordion title={`parallax-unzoom.html`}>
diff --git a/docs/catalog/components/parallax-zoom.mdx b/docs/catalog/components/parallax-zoom.mdx
index 24107f62c4..bed94ab849 100644
--- a/docs/catalog/components/parallax-zoom.mdx
+++ b/docs/catalog/components/parallax-zoom.mdx
@@ -5,6 +5,12 @@ description: "Center card scales up to fill the frame while siblings parallax ou
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add parallax-zoom" item="parallax-zoom" />
+
+That writes one file: `compositions/components/parallax-zoom.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="parallax-zoom preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/parallax-zoom.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/parallax-zoom.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add parallax-zoom" item="parallax-zoom" />
-
-That writes one file: `compositions/components/parallax-zoom.html`.
-
 ## Source
 
 <Accordion title={`parallax-zoom.html`}>
diff --git a/docs/catalog/components/particle-image-reveal.mdx b/docs/catalog/components/particle-image-reveal.mdx
index b328727245..dea30c3877 100644
--- a/docs/catalog/components/particle-image-reveal.mdx
+++ b/docs/catalog/components/particle-image-reveal.mdx
@@ -6,6 +6,12 @@ description: "A seeded deterministic particle field converges and settles while
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add particle-image-reveal" item="particle-image-reveal" />
+
+That writes one file: `compositions/components/particle-image-reveal.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/particle-image-reveal.json"
   compositionId="particle-image-reveal"
@@ -410,12 +416,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add particle-image-reveal" item="particle-image-reveal" />
-
-That writes one file: `compositions/components/particle-image-reveal.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/particle-image-reveal.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/particle-text-dissolve.mdx b/docs/catalog/components/particle-text-dissolve.mdx
index 048cd5ac62..80d5046065 100644
--- a/docs/catalog/components/particle-text-dissolve.mdx
+++ b/docs/catalog/components/particle-text-dissolve.mdx
@@ -6,6 +6,12 @@ description: "Text assembles from a seeded particle cloud (or dissolves into it)
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add particle-text-dissolve" item="particle-text-dissolve" />
+
+That writes one file: `compositions/components/particle-text-dissolve.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/particle-text-dissolve.json"
   compositionId="particle-text-dissolve"
@@ -432,12 +438,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add particle-text-dissolve" item="particle-text-dissolve" />
-
-That writes one file: `compositions/components/particle-text-dissolve.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/particle-text-dissolve.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/per-word-crossfade.mdx b/docs/catalog/components/per-word-crossfade.mdx
index 98bf90d602..5544dec5c5 100644
--- a/docs/catalog/components/per-word-crossfade.mdx
+++ b/docs/catalog/components/per-word-crossfade.mdx
@@ -6,6 +6,12 @@ description: "Words gently fade into place with a short vertical drift for calm
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add per-word-crossfade" item="per-word-crossfade" />
+
+That writes one file: `compositions/components/per-word-crossfade.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/per-word-crossfade.json"
   compositionId="per-word-crossfade"
@@ -133,12 +139,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add per-word-crossfade" item="per-word-crossfade" />
-
-That writes one file: `compositions/components/per-word-crossfade.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/per-word-rise.mdx b/docs/catalog/components/per-word-rise.mdx
index 3ac2e8f16d..afe8abd493 100644
--- a/docs/catalog/components/per-word-rise.mdx
+++ b/docs/catalog/components/per-word-rise.mdx
@@ -6,6 +6,12 @@ description: "Words or characters rise into place in a controlled blur-to-sharp
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add per-word-rise" item="per-word-rise" />
+
+That writes one file: `compositions/components/per-word-rise.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/per-word-rise.json"
   compositionId="per-word-rise"
@@ -334,12 +340,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add per-word-rise" item="per-word-rise" />
-
-That writes one file: `compositions/components/per-word-rise.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/per-word-rise.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/perspective-marquee.mdx b/docs/catalog/components/perspective-marquee.mdx
index bb87e83691..20f4fe1294 100644
--- a/docs/catalog/components/perspective-marquee.mdx
+++ b/docs/catalog/components/perspective-marquee.mdx
@@ -6,6 +6,12 @@ description: "A 3D tilted marquee with depth feel as items roll toward the horiz
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add perspective-marquee" item="perspective-marquee" />
+
+That writes one file: `compositions/components/perspective-marquee.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/perspective-marquee.json"
   compositionId="perspective-marquee"
@@ -154,12 +160,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add perspective-marquee" item="perspective-marquee" />
-
-That writes one file: `compositions/components/perspective-marquee.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/physical-exit.mdx b/docs/catalog/components/physical-exit.mdx
index 93102f0e3a..34f4f04e75 100644
--- a/docs/catalog/components/physical-exit.mdx
+++ b/docs/catalog/components/physical-exit.mdx
@@ -6,6 +6,12 @@ description: "A card exits with physical momentum in toss, drop, or slide mode,
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add physical-exit" item="physical-exit" />
+
+That writes one file: `compositions/components/physical-exit.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/physical-exit.json"
   compositionId="physical-exit"
@@ -265,12 +271,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add physical-exit" item="physical-exit" />
-
-That writes one file: `compositions/components/physical-exit.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/physical-exit.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/press-ripple.mdx b/docs/catalog/components/press-ripple.mdx
index b9f2b82ad8..1ed1fe5cd3 100644
--- a/docs/catalog/components/press-ripple.mdx
+++ b/docs/catalog/components/press-ripple.mdx
@@ -6,6 +6,12 @@ description: "A cursor decel-arrives from off-stage, lands slightly off-center o
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add press-ripple" item="press-ripple" />
+
+That writes one file: `compositions/components/press-ripple.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/press-ripple.json"
   compositionId="press-ripple"
@@ -391,12 +397,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add press-ripple" item="press-ripple" />
-
-That writes one file: `compositions/components/press-ripple.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/press-ripple.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/pull-back-reveal.mdx b/docs/catalog/components/pull-back-reveal.mdx
index 059e104f43..a72574b875 100644
--- a/docs/catalog/components/pull-back-reveal.mdx
+++ b/docs/catalog/components/pull-back-reveal.mdx
@@ -6,6 +6,12 @@ description: "A tight stat detail holds, then one decelerating camera pull-back
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add pull-back-reveal" item="pull-back-reveal" />
+
+That writes one file: `compositions/components/pull-back-reveal.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/pull-back-reveal.json"
   compositionId="pull-back-reveal"
@@ -354,12 +360,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add pull-back-reveal" item="pull-back-reveal" />
-
-That writes one file: `compositions/components/pull-back-reveal.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/pull-back-reveal.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/pull-to-refresh.mdx b/docs/catalog/components/pull-to-refresh.mdx
index 89c87c9c33..cf4389b99a 100644
--- a/docs/catalog/components/pull-to-refresh.mdx
+++ b/docs/catalog/components/pull-to-refresh.mdx
@@ -6,6 +6,12 @@ description: "A mobile list pulls through nonlinear rubber-band resistance, arms
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add pull-to-refresh" item="pull-to-refresh" />
+
+That writes one file: `compositions/components/pull-to-refresh.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/pull-to-refresh.json"
   compositionId="pull-to-refresh"
@@ -697,12 +703,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add pull-to-refresh" item="pull-to-refresh" />
-
-That writes one file: `compositions/components/pull-to-refresh.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/pull-to-refresh.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/push-in.mdx b/docs/catalog/components/push-in.mdx
index 1f6ab4c971..1d2a560491 100644
--- a/docs/catalog/components/push-in.mdx
+++ b/docs/catalog/components/push-in.mdx
@@ -6,6 +6,12 @@ description: "A centered headline gains focus through one slow, continuous camer
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add push-in" item="push-in" />
+
+That writes one file: `compositions/components/push-in.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/push-in.json"
   compositionId="push-in"
@@ -196,12 +202,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add push-in" item="push-in" />
-
-That writes one file: `compositions/components/push-in.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/push-in.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/radial-surround.mdx b/docs/catalog/components/radial-surround.mdx
index 637fc40df1..7218ea904d 100644
--- a/docs/catalog/components/radial-surround.mdx
+++ b/docs/catalog/components/radial-surround.mdx
@@ -6,6 +6,12 @@ description: "Labeled hairline chips assemble around a centered subject on an el
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add radial-surround" item="radial-surround" />
+
+That writes one file: `compositions/components/radial-surround.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/radial-surround.json"
   compositionId="radial-surround"
@@ -450,12 +456,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add radial-surround" item="radial-surround" />
-
-That writes one file: `compositions/components/radial-surround.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/radial-surround.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/rgb-glitch-text.mdx b/docs/catalog/components/rgb-glitch-text.mdx
index d34fa01b3f..4cea86d5b6 100644
--- a/docs/catalog/components/rgb-glitch-text.mdx
+++ b/docs/catalog/components/rgb-glitch-text.mdx
@@ -6,6 +6,12 @@ description: "RGB-offset text copies jitter briefly for a controlled glitch wind
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add rgb-glitch-text" item="rgb-glitch-text" />
+
+That writes one file: `compositions/components/rgb-glitch-text.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/rgb-glitch-text.json"
   compositionId="rgb-glitch-text"
@@ -128,12 +134,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add rgb-glitch-text" item="rgb-glitch-text" />
-
-That writes one file: `compositions/components/rgb-glitch-text.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/rubber-band-bumper.mdx b/docs/catalog/components/rubber-band-bumper.mdx
index d18280a796..0c661d538b 100644
--- a/docs/catalog/components/rubber-band-bumper.mdx
+++ b/docs/catalog/components/rubber-band-bumper.mdx
@@ -6,6 +6,12 @@ description: "An outgoing panel pulls against increasing resistance, holds at te
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add rubber-band-bumper" item="rubber-band-bumper" />
+
+That writes one file: `compositions/components/rubber-band-bumper.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/rubber-band-bumper.json"
   compositionId="rubber-band-bumper"
@@ -349,12 +355,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add rubber-band-bumper" item="rubber-band-bumper" />
-
-That writes one file: `compositions/components/rubber-band-bumper.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/rubber-band-bumper.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/scan-band.mdx b/docs/catalog/components/scan-band.mdx
index 0f74322a11..f30f11a106 100644
--- a/docs/catalog/components/scan-band.mdx
+++ b/docs/catalog/components/scan-band.mdx
@@ -6,6 +6,12 @@ description: "A diagonal distortion band sweeps once across a clean wordmark, re
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add scan-band" item="scan-band" />
+
+That writes one file: `compositions/components/scan-band.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/scan-band.json"
   compositionId="scan-band"
@@ -234,12 +240,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add scan-band" item="scan-band" />
-
-That writes one file: `compositions/components/scan-band.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/scan-band.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/scramble-reveal.mdx b/docs/catalog/components/scramble-reveal.mdx
index f166443b70..4db0754131 100644
--- a/docs/catalog/components/scramble-reveal.mdx
+++ b/docs/catalog/components/scramble-reveal.mdx
@@ -6,6 +6,12 @@ description: "A deterministic hacker-style text reveal that cycles fixed glyph r
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add scramble-reveal" item="scramble-reveal" />
+
+That writes one file: `compositions/components/scramble-reveal.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/scramble-reveal.json"
   compositionId="scramble-reveal"
@@ -307,12 +313,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add scramble-reveal" item="scramble-reveal" />
-
-That writes one file: `compositions/components/scramble-reveal.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/scramble-reveal.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/screen-flow-carousel.mdx b/docs/catalog/components/screen-flow-carousel.mdx
index 9bc5a65ee8..58aca18635 100644
--- a/docs/catalog/components/screen-flow-carousel.mdx
+++ b/docs/catalog/components/screen-flow-carousel.mdx
@@ -6,6 +6,12 @@ description: "Two to five app screens ride a horizontal rail: one primary at cen
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add screen-flow-carousel" item="screen-flow-carousel" />
+
+That writes one file: `compositions/components/screen-flow-carousel.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/screen-flow-carousel.json"
   compositionId="screen-flow-carousel"
@@ -594,12 +600,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add screen-flow-carousel" item="screen-flow-carousel" />
-
-That writes one file: `compositions/components/screen-flow-carousel.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/screen-flow-carousel.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/scroll-camera-story.mdx b/docs/catalog/components/scroll-camera-story.mdx
index 18ca3876ac..cb4a2c54d5 100644
--- a/docs/catalog/components/scroll-camera-story.mdx
+++ b/docs/catalog/components/scroll-camera-story.mdx
@@ -6,6 +6,12 @@ description: "A compressed forced-scroll cinematic pass: a tall scene of slotted
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add scroll-camera-story" item="scroll-camera-story" />
+
+That writes one file: `compositions/components/scroll-camera-story.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/scroll-camera-story.json"
   compositionId="scroll-camera-story"
@@ -823,12 +829,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add scroll-camera-story" item="scroll-camera-story" />
-
-That writes one file: `compositions/components/scroll-camera-story.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/scroll-camera-story.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/scroll-feed.mdx b/docs/catalog/components/scroll-feed.mdx
index f3fcb06fcf..03ef9c392a 100644
--- a/docs/catalog/components/scroll-feed.mdx
+++ b/docs/catalog/components/scroll-feed.mdx
@@ -6,6 +6,12 @@ description: "A loop-friendly column of varied skeleton post cards scrolls upwar
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add scroll-feed" item="scroll-feed" />
+
+That writes one file: `compositions/components/scroll-feed.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/scroll-feed.json"
   compositionId="scroll-feed"
@@ -415,12 +421,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add scroll-feed" item="scroll-feed" />
-
-That writes one file: `compositions/components/scroll-feed.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/scroll-feed.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/segmentation-flood.mdx b/docs/catalog/components/segmentation-flood.mdx
index 445dc83dfd..a4f2b6524e 100644
--- a/docs/catalog/components/segmentation-flood.mdx
+++ b/docs/catalog/components/segmentation-flood.mdx
@@ -6,6 +6,12 @@ description: "Machine-vision read of a slotted subject: translucent accent segme
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add segmentation-flood" item="segmentation-flood" />
+
+That writes one file: `compositions/components/segmentation-flood.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/segmentation-flood.json"
   compositionId="segmentation-flood"
@@ -535,12 +541,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add segmentation-flood" item="segmentation-flood" />
-
-That writes one file: `compositions/components/segmentation-flood.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/segmentation-flood.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/separator.mdx b/docs/catalog/components/separator.mdx
index 5e971e1077..4db456b86f 100644
--- a/docs/catalog/components/separator.mdx
+++ b/docs/catalog/components/separator.mdx
@@ -6,6 +6,12 @@ description: "A one-pixel structural separator with horizontal and vertical vari
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add separator" item="separator" />
+
+That writes one file: `compositions/components/separator.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/separator.json"
   compositionId="separator"
@@ -256,12 +262,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add separator" item="separator" />
-
-That writes one file: `compositions/components/separator.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/separator.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/settings-toggle-flow.mdx b/docs/catalog/components/settings-toggle-flow.mdx
index 013cd4244b..d803fc0e55 100644
--- a/docs/catalog/components/settings-toggle-flow.mdx
+++ b/docs/catalog/components/settings-toggle-flow.mdx
@@ -5,6 +5,12 @@ description: "A composed settings flow with preference rows, toggle switches, an
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add settings-toggle-flow" item="settings-toggle-flow" />
+
+That writes one file: `compositions/components/settings-toggle-flow.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="settings-toggle-flow preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/settings-toggle-flow.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/settings-toggle-flow.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add settings-toggle-flow" item="settings-toggle-flow" />
-
-That writes one file: `compositions/components/settings-toggle-flow.html`.
-
 ## Source
 
 <Accordion title={`settings-toggle-flow.html`}>
diff --git a/docs/catalog/components/shared-axis-y.mdx b/docs/catalog/components/shared-axis-y.mdx
index 51ebf98801..b4f8f4c1a1 100644
--- a/docs/catalog/components/shared-axis-y.mdx
+++ b/docs/catalog/components/shared-axis-y.mdx
@@ -6,6 +6,12 @@ description: "Per-word vertical shared-axis transition for sharp editorial swaps
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add shared-axis-y" item="shared-axis-y" />
+
+That writes one file: `compositions/components/shared-axis-y.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/shared-axis-y.json"
   compositionId="shared-axis-y"
@@ -116,12 +122,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add shared-axis-y" item="shared-axis-y" />
-
-That writes one file: `compositions/components/shared-axis-y.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/shared-axis-z.mdx b/docs/catalog/components/shared-axis-z.mdx
index 47c992bed8..f6ea5e554f 100644
--- a/docs/catalog/components/shared-axis-z.mdx
+++ b/docs/catalog/components/shared-axis-z.mdx
@@ -6,6 +6,12 @@ description: "Scale-based shared-axis transition for focus shifts and context de
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add shared-axis-z" item="shared-axis-z" />
+
+That writes one file: `compositions/components/shared-axis-z.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/shared-axis-z.json"
   compositionId="shared-axis-z"
@@ -115,12 +121,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add shared-axis-z" item="shared-axis-z" />
-
-That writes one file: `compositions/components/shared-axis-z.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/sheet-spring-up.mdx b/docs/catalog/components/sheet-spring-up.mdx
index b904c37d85..c0018046f7 100644
--- a/docs/catalog/components/sheet-spring-up.mdx
+++ b/docs/catalog/components/sheet-spring-up.mdx
@@ -6,6 +6,12 @@ description: "A bottom sheet rushes up from below the frame on a real spring sam
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add sheet-spring-up" item="sheet-spring-up" />
+
+That writes one file: `compositions/components/sheet-spring-up.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/sheet-spring-up.json"
   compositionId="sheet-spring-up"
@@ -261,12 +267,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add sheet-spring-up" item="sheet-spring-up" />
-
-That writes one file: `compositions/components/sheet-spring-up.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/sheet-spring-up.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/shimmer-sweep.mdx b/docs/catalog/components/shimmer-sweep.mdx
index f101fe1855..86d0feb460 100644
--- a/docs/catalog/components/shimmer-sweep.mdx
+++ b/docs/catalog/components/shimmer-sweep.mdx
@@ -5,6 +5,12 @@ description: "Animated light sweep across text or elements using a CSS gradient
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add shimmer-sweep" item="shimmer-sweep" />
+
+That writes one file: `compositions/components/shimmer-sweep.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="shimmer-sweep preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/shimmer-sweep.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/shimmer-sweep.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add shimmer-sweep" item="shimmer-sweep" />
-
-That writes one file: `compositions/components/shimmer-sweep.html`.
-
 ## Source
 
 <Accordion title={`shimmer-sweep.html`}>
diff --git a/docs/catalog/components/signup-flow.mdx b/docs/catalog/components/signup-flow.mdx
index b7b50a8fe3..385c2db11a 100644
--- a/docs/catalog/components/signup-flow.mdx
+++ b/docs/catalog/components/signup-flow.mdx
@@ -5,6 +5,12 @@ description: "A composed signup flow with social action, email field, password f
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add signup-flow" item="signup-flow" />
+
+That writes one file: `compositions/components/signup-flow.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="signup-flow preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/signup-flow.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/signup-flow.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add signup-flow" item="signup-flow" />
-
-That writes one file: `compositions/components/signup-flow.html`.
-
 ## Source
 
 <Accordion title={`signup-flow.html`}>
diff --git a/docs/catalog/components/simulated-cursor.mdx b/docs/catalog/components/simulated-cursor.mdx
index ee1c9882b9..fa4097a394 100644
--- a/docs/catalog/components/simulated-cursor.mdx
+++ b/docs/catalog/components/simulated-cursor.mdx
@@ -6,6 +6,12 @@ description: "A lightweight cursor pointer and click pulse for product walkthrou
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add simulated-cursor" item="simulated-cursor" />
+
+That writes one file: `compositions/components/simulated-cursor.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/simulated-cursor.json"
   compositionId="simulated-cursor"
@@ -159,12 +165,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add simulated-cursor" item="simulated-cursor" />
-
-That writes one file: `compositions/components/simulated-cursor.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/skeleton-reveal.mdx b/docs/catalog/components/skeleton-reveal.mdx
index e069f53e3e..7a7ddb5caf 100644
--- a/docs/catalog/components/skeleton-reveal.mdx
+++ b/docs/catalog/components/skeleton-reveal.mdx
@@ -6,6 +6,12 @@ description: "A skeleton loader transition that pulses, then cross-fades into co
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add skeleton-reveal" item="skeleton-reveal" />
+
+That writes one file: `compositions/components/skeleton-reveal.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/skeleton-reveal.json"
   compositionId="skeleton-reveal"
@@ -148,12 +154,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add skeleton-reveal" item="skeleton-reveal" />
-
-That writes one file: `compositions/components/skeleton-reveal.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/slit-scan-reveal.mdx b/docs/catalog/components/slit-scan-reveal.mdx
index 1b0afc055a..85ef6919c9 100644
--- a/docs/catalog/components/slit-scan-reveal.mdx
+++ b/docs/catalog/components/slit-scan-reveal.mdx
@@ -6,6 +6,12 @@ description: "The frame's rows sample an authored subject at offset times: a can
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add slit-scan-reveal" item="slit-scan-reveal" />
+
+That writes one file: `compositions/components/slit-scan-reveal.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/slit-scan-reveal.json"
   compositionId="slit-scan-reveal"
@@ -350,12 +356,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add slit-scan-reveal" item="slit-scan-reveal" />
-
-That writes one file: `compositions/components/slit-scan-reveal.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/slit-scan-reveal.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/slot-machine-roll.mdx b/docs/catalog/components/slot-machine-roll.mdx
index 3a9c229762..42b781cd37 100644
--- a/docs/catalog/components/slot-machine-roll.mdx
+++ b/docs/catalog/components/slot-machine-roll.mdx
@@ -6,6 +6,12 @@ description: "A vertical reel scrolls characters from one value to another."
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add slot-machine-roll" item="slot-machine-roll" />
+
+That writes one file: `compositions/components/slot-machine-roll.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/slot-machine-roll.json"
   compositionId="slot-machine-roll"
@@ -154,12 +160,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add slot-machine-roll" item="slot-machine-roll" />
-
-That writes one file: `compositions/components/slot-machine-roll.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/social-proof-card.mdx b/docs/catalog/components/social-proof-card.mdx
index ce2642f991..28a1aa9c99 100644
--- a/docs/catalog/components/social-proof-card.mdx
+++ b/docs/catalog/components/social-proof-card.mdx
@@ -6,6 +6,12 @@ description: "The app-store close as one mountable scene: wordmark, five stars,
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add social-proof-card" item="social-proof-card" />
+
+That writes one file: `compositions/components/social-proof-card.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/social-proof-card.json"
   compositionId="social-proof-card"
@@ -248,12 +254,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add social-proof-card" item="social-proof-card" />
-
-That writes one file: `compositions/components/social-proof-card.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/social-proof-card.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/soft-blob-touch.mdx b/docs/catalog/components/soft-blob-touch.mdx
index 36b62ef195..d0e5b44e96 100644
--- a/docs/catalog/components/soft-blob-touch.mdx
+++ b/docs/catalog/components/soft-blob-touch.mdx
@@ -6,6 +6,12 @@ description: "A granular soft blob idles with slow internal drift; a scripted to
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add soft-blob-touch" item="soft-blob-touch" />
+
+That writes one file: `compositions/components/soft-blob-touch.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/soft-blob-touch.json"
   compositionId="soft-blob-touch"
@@ -533,12 +539,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add soft-blob-touch" item="soft-blob-touch" />
-
-That writes one file: `compositions/components/soft-blob-touch.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/soft-blob-touch.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/soft-blur-in.mdx b/docs/catalog/components/soft-blur-in.mdx
index 606aee14a8..0387f970c4 100644
--- a/docs/catalog/components/soft-blur-in.mdx
+++ b/docs/catalog/components/soft-blur-in.mdx
@@ -6,6 +6,12 @@ description: "A soft opacity, blur, and lift reveal for headlines, captions, and
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add soft-blur-in" item="soft-blur-in" />
+
+That writes one file: `compositions/components/soft-blur-in.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/soft-blur-in.json"
   compositionId="soft-blur-in"
@@ -101,12 +107,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add soft-blur-in" item="soft-blur-in" />
-
-That writes one file: `compositions/components/soft-blur-in.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/split-tilt-cards.mdx b/docs/catalog/components/split-tilt-cards.mdx
index 47501dba2f..e618f721bc 100644
--- a/docs/catalog/components/split-tilt-cards.mdx
+++ b/docs/catalog/components/split-tilt-cards.mdx
@@ -6,6 +6,12 @@ description: "Two equal-weight cards arrive from opposite wings with mirrored ro
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add split-tilt-cards" item="split-tilt-cards" />
+
+That writes one file: `compositions/components/split-tilt-cards.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/split-tilt-cards.json"
   compositionId="split-tilt-cards"
@@ -589,12 +595,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add split-tilt-cards" item="split-tilt-cards" />
-
-That writes one file: `compositions/components/split-tilt-cards.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/split-tilt-cards.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/spotlight-card.mdx b/docs/catalog/components/spotlight-card.mdx
index d15b97a9bc..06f2cede71 100644
--- a/docs/catalog/components/spotlight-card.mdx
+++ b/docs/catalog/components/spotlight-card.mdx
@@ -5,6 +5,12 @@ description: "A card with a scripted cursor spotlight and lit border."
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add spotlight-card" item="spotlight-card" />
+
+That writes one file: `compositions/components/spotlight-card.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="spotlight-card preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/spotlight-card.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/spotlight-card.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add spotlight-card" item="spotlight-card" />
-
-That writes one file: `compositions/components/spotlight-card.html`.
-
 ## Source
 
 <Accordion title={`spotlight-card.html`}>
diff --git a/docs/catalog/components/spring-pop.mdx b/docs/catalog/components/spring-pop.mdx
index 763061a642..0db8c46d93 100644
--- a/docs/catalog/components/spring-pop.mdx
+++ b/docs/catalog/components/spring-pop.mdx
@@ -6,6 +6,12 @@ description: "A badge pops in from a visible near-rest scale, overshoots full si
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add spring-pop" item="spring-pop" />
+
+That writes one file: `compositions/components/spring-pop.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/spring-pop.json"
   compositionId="spring-pop"
@@ -213,12 +219,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add spring-pop" item="spring-pop" />
-
-That writes one file: `compositions/components/spring-pop.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/spring-pop.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/spring-stack-shuffle.mdx b/docs/catalog/components/spring-stack-shuffle.mdx
index 05d3c22399..d597843074 100644
--- a/docs/catalog/components/spring-stack-shuffle.mdx
+++ b/docs/catalog/components/spring-stack-shuffle.mdx
@@ -6,6 +6,12 @@ description: "A stack of 3 to 5 slotted cards reshuffles on cues: the back card
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add spring-stack-shuffle" item="spring-stack-shuffle" />
+
+That writes one file: `compositions/components/spring-stack-shuffle.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/spring-stack-shuffle.json"
   compositionId="spring-stack-shuffle"
@@ -625,12 +631,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add spring-stack-shuffle" item="spring-stack-shuffle" />
-
-That writes one file: `compositions/components/spring-stack-shuffle.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/spring-stack-shuffle.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/stagger-cascade.mdx b/docs/catalog/components/stagger-cascade.mdx
index 427d878243..2d4b68b343 100644
--- a/docs/catalog/components/stagger-cascade.mdx
+++ b/docs/catalog/components/stagger-cascade.mdx
@@ -6,6 +6,12 @@ description: "A responsive grid of tile cards that fades and travels into place
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add stagger-cascade" item="stagger-cascade" />
+
+That writes one file: `compositions/components/stagger-cascade.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/stagger-cascade.json"
   compositionId="stagger-cascade"
@@ -276,12 +282,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add stagger-cascade" item="stagger-cascade" />
-
-That writes one file: `compositions/components/stagger-cascade.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/stagger-cascade.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/stagger-lattice.mdx b/docs/catalog/components/stagger-lattice.mdx
index 1461cdd3eb..08ad1f183d 100644
--- a/docs/catalog/components/stagger-lattice.mdx
+++ b/docs/catalog/components/stagger-lattice.mdx
@@ -5,6 +5,12 @@ description: "A staggered grid reveal inspired by Anime.js v4 stagger utilities,
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add stagger-lattice" item="stagger-lattice" />
+
+That writes one file: `compositions/components/stagger-lattice.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="stagger-lattice preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/stagger-lattice.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/stagger-lattice.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add stagger-lattice" item="stagger-lattice" />
-
-That writes one file: `compositions/components/stagger-lattice.html`.
-
 ## Source
 
 <Accordion title={`stagger-lattice.html`}>
diff --git a/docs/catalog/components/staggered-fade-up.mdx b/docs/catalog/components/staggered-fade-up.mdx
index 2ab41a05c6..a589a5bf98 100644
--- a/docs/catalog/components/staggered-fade-up.mdx
+++ b/docs/catalog/components/staggered-fade-up.mdx
@@ -6,6 +6,12 @@ description: "Words fade in and slide up one after another with configurable del
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add staggered-fade-up" item="staggered-fade-up" />
+
+That writes one file: `compositions/components/staggered-fade-up.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/staggered-fade-up.json"
   compositionId="staggered-fade-up"
@@ -138,12 +144,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add staggered-fade-up" item="staggered-fade-up" />
-
-That writes one file: `compositions/components/staggered-fade-up.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/star-rating-fill.mdx b/docs/catalog/components/star-rating-fill.mdx
index 28f372304c..4a2f6042d7 100644
--- a/docs/catalog/components/star-rating-fill.mdx
+++ b/docs/catalog/components/star-rating-fill.mdx
@@ -6,6 +6,12 @@ description: "A token-driven star row whose colored layer sweeps to a rating, pr
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add star-rating-fill" item="star-rating-fill" />
+
+That writes one file: `compositions/components/star-rating-fill.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/star-rating-fill.json"
   compositionId="star-rating-fill"
@@ -316,12 +322,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add star-rating-fill" item="star-rating-fill" />
-
-That writes one file: `compositions/components/star-rating-fill.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/star-rating-fill.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/state-chip-rail.mdx b/docs/catalog/components/state-chip-rail.mdx
index 31d24858c1..2cc3b1fd65 100644
--- a/docs/catalog/components/state-chip-rail.mdx
+++ b/docs/catalog/components/state-chip-rail.mdx
@@ -6,6 +6,12 @@ description: "A rail of mono status chips advances a seek-safe data-state snap m
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add state-chip-rail" item="state-chip-rail" />
+
+That writes one file: `compositions/components/state-chip-rail.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/state-chip-rail.json"
   compositionId="state-chip-rail"
@@ -381,12 +387,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add state-chip-rail" item="state-chip-rail" />
-
-That writes one file: `compositions/components/state-chip-rail.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/state-chip-rail.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/sticky-mock-swap.mdx b/docs/catalog/components/sticky-mock-swap.mdx
index 02eede7e65..ce45e234a8 100644
--- a/docs/catalog/components/sticky-mock-swap.mdx
+++ b/docs/catalog/components/sticky-mock-swap.mdx
@@ -6,6 +6,12 @@ description: "A pinned product mock cross-fades through accent-tinted feature st
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add sticky-mock-swap" item="sticky-mock-swap" />
+
+That writes one file: `compositions/components/sticky-mock-swap.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/sticky-mock-swap.json"
   compositionId="sticky-mock-swap"
@@ -483,12 +489,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add sticky-mock-swap" item="sticky-mock-swap" />
-
-That writes one file: `compositions/components/sticky-mock-swap.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/sticky-mock-swap.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/stitched-text-draw.mdx b/docs/catalog/components/stitched-text-draw.mdx
index 788efb5394..6f7375ac50 100644
--- a/docs/catalog/components/stitched-text-draw.mdx
+++ b/docs/catalog/components/stitched-text-draw.mdx
@@ -6,6 +6,12 @@ description: "Text drawn as thread stitches: a single-stroke display alphabet dr
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add stitched-text-draw" item="stitched-text-draw" />
+
+That writes one file: `compositions/components/stitched-text-draw.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/stitched-text-draw.json"
   compositionId="stitched-text-draw"
@@ -883,12 +889,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add stitched-text-draw" item="stitched-text-draw" />
-
-That writes one file: `compositions/components/stitched-text-draw.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/stitched-text-draw.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/stop-motion-cadence.mdx b/docs/catalog/components/stop-motion-cadence.mdx
index 442a140c4b..2cddc20270 100644
--- a/docs/catalog/components/stop-motion-cadence.mdx
+++ b/docs/catalog/components/stop-motion-cadence.mdx
@@ -6,6 +6,12 @@ description: "The stepped-time law as a demo primitive: one driver quantizes tim
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add stop-motion-cadence" item="stop-motion-cadence" />
+
+That writes one file: `compositions/components/stop-motion-cadence.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/stop-motion-cadence.json"
   compositionId="stop-motion-cadence"
@@ -485,12 +491,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add stop-motion-cadence" item="stop-motion-cadence" />
-
-That writes one file: `compositions/components/stop-motion-cadence.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/stop-motion-cadence.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/store-badge-lockup.mdx b/docs/catalog/components/store-badge-lockup.mdx
index 5a68a99fe3..d5c652c01c 100644
--- a/docs/catalog/components/store-badge-lockup.mdx
+++ b/docs/catalog/components/store-badge-lockup.mdx
@@ -6,6 +6,12 @@ description: "Settles a short headline above equal-size App Store and Google Pla
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add store-badge-lockup" item="store-badge-lockup" />
+
+That writes one file: `compositions/components/store-badge-lockup.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/store-badge-lockup.json"
   compositionId="store-badge-lockup"
@@ -323,12 +329,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add store-badge-lockup" item="store-badge-lockup" />
-
-That writes one file: `compositions/components/store-badge-lockup.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/store-badge-lockup.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/streaming-text.mdx b/docs/catalog/components/streaming-text.mdx
index 745f0fa18a..3f241a0aef 100644
--- a/docs/catalog/components/streaming-text.mdx
+++ b/docs/catalog/components/streaming-text.mdx
@@ -6,6 +6,12 @@ description: "Words arrive the way an AI answer streams - in uneven bursts on a
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add streaming-text" item="streaming-text" />
+
+That writes one file: `compositions/components/streaming-text.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/streaming-text.json"
   compositionId="streaming-text"
@@ -273,12 +279,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add streaming-text" item="streaming-text" />
-
-That writes one file: `compositions/components/streaming-text.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/streaming-text.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/strikethrough-replace.mdx b/docs/catalog/components/strikethrough-replace.mdx
index d0bf73e9b8..84c224c9ce 100644
--- a/docs/catalog/components/strikethrough-replace.mdx
+++ b/docs/catalog/components/strikethrough-replace.mdx
@@ -6,6 +6,12 @@ description: "Draw a strike line across old text, then reveal the replacement."
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add strikethrough-replace" item="strikethrough-replace" />
+
+That writes one file: `compositions/components/strikethrough-replace.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/strikethrough-replace.json"
   compositionId="strikethrough-replace"
@@ -131,12 +137,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add strikethrough-replace" item="strikethrough-replace" />
-
-That writes one file: `compositions/components/strikethrough-replace.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/success-check.mdx b/docs/catalog/components/success-check.mdx
index 4065e2fa7d..ada05f3c2f 100644
--- a/docs/catalog/components/success-check.mdx
+++ b/docs/catalog/components/success-check.mdx
@@ -6,6 +6,12 @@ description: "A success check primitive with ring pop, path draw, and subtle rot
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add success-check" item="success-check" />
+
+That writes one file: `compositions/components/success-check.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/success-check.json"
   compositionId="success-check"
@@ -153,12 +159,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add success-check" item="success-check" />
-
-That writes one file: `compositions/components/success-check.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/svg-line-draw-loader.mdx b/docs/catalog/components/svg-line-draw-loader.mdx
index 6937da7b80..de4bbcaa61 100644
--- a/docs/catalog/components/svg-line-draw-loader.mdx
+++ b/docs/catalog/components/svg-line-draw-loader.mdx
@@ -5,6 +5,12 @@ description: "An Anime.js-style path drawing loader implemented as a seekable GS
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add svg-line-draw-loader" item="svg-line-draw-loader" />
+
+That writes one file: `compositions/components/svg-line-draw-loader.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="svg-line-draw-loader preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/svg-line-draw-loader.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/svg-line-draw-loader.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add svg-line-draw-loader" item="svg-line-draw-loader" />
-
-That writes one file: `compositions/components/svg-line-draw-loader.html`.
-
 ## Source
 
 <Accordion title={`svg-line-draw-loader.html`}>
diff --git a/docs/catalog/components/svg-mask-reveal.mdx b/docs/catalog/components/svg-mask-reveal.mdx
index 3c3c52bfa1..0c04829c8c 100644
--- a/docs/catalog/components/svg-mask-reveal.mdx
+++ b/docs/catalog/components/svg-mask-reveal.mdx
@@ -6,6 +6,12 @@ description: "A soft token-colored sweep reveals media only through an editable
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add svg-mask-reveal" item="svg-mask-reveal" />
+
+That writes one file: `compositions/components/svg-mask-reveal.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/svg-mask-reveal.json"
   compositionId="svg-mask-reveal"
@@ -334,12 +340,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add svg-mask-reveal" item="svg-mask-reveal" />
-
-That writes one file: `compositions/components/svg-mask-reveal.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/svg-mask-reveal.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/svg-stroke-trace.mdx b/docs/catalog/components/svg-stroke-trace.mdx
index 20ce7caeac..4519606ab2 100644
--- a/docs/catalog/components/svg-stroke-trace.mdx
+++ b/docs/catalog/components/svg-stroke-trace.mdx
@@ -6,6 +6,12 @@ description: "An authored SVG path draws from its measured length, holds with su
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add svg-stroke-trace" item="svg-stroke-trace" />
+
+That writes one file: `compositions/components/svg-stroke-trace.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/svg-stroke-trace.json"
   compositionId="svg-stroke-trace"
@@ -247,12 +253,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add svg-stroke-trace" item="svg-stroke-trace" />
-
-That writes one file: `compositions/components/svg-stroke-trace.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/svg-stroke-trace.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/swipe-rail.mdx b/docs/catalog/components/swipe-rail.mdx
index 0d33b41b5d..cf9b0d09bd 100644
--- a/docs/catalog/components/swipe-rail.mdx
+++ b/docs/catalog/components/swipe-rail.mdx
@@ -6,6 +6,12 @@ description: "A contact circle leads a horizontal card rail through a fast drag,
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add swipe-rail" item="swipe-rail" />
+
+That writes one file: `compositions/components/swipe-rail.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/swipe-rail.json"
   compositionId="swipe-rail"
@@ -376,12 +382,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add swipe-rail" item="swipe-rail" />
-
-That writes one file: `compositions/components/swipe-rail.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/swipe-rail.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/tabs-slide-indicator.mdx b/docs/catalog/components/tabs-slide-indicator.mdx
index 86384d8a4f..6ba124e380 100644
--- a/docs/catalog/components/tabs-slide-indicator.mdx
+++ b/docs/catalog/components/tabs-slide-indicator.mdx
@@ -6,6 +6,12 @@ description: "A pill indicator transition that slides between active tabs"
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add tabs-slide-indicator" item="tabs-slide-indicator" />
+
+That writes one file: `compositions/components/tabs-slide-indicator.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/tabs-slide-indicator.json"
   compositionId="tabs-slide-indicator"
@@ -187,12 +193,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add tabs-slide-indicator" item="tabs-slide-indicator" />
-
-That writes one file: `compositions/components/tabs-slide-indicator.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/telemetry-hud.mdx b/docs/catalog/components/telemetry-hud.mdx
index 5ab056ffee..5b43e9700a 100644
--- a/docs/catalog/components/telemetry-hud.mdx
+++ b/docs/catalog/components/telemetry-hud.mdx
@@ -6,6 +6,12 @@ description: "Quiet mono debug-HUD readouts frame a slotted subject: corner brac
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add telemetry-hud" item="telemetry-hud" />
+
+That writes one file: `compositions/components/telemetry-hud.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/telemetry-hud.json"
   compositionId="telemetry-hud"
@@ -571,12 +577,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add telemetry-hud" item="telemetry-hud" />
-
-That writes one file: `compositions/components/telemetry-hud.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/telemetry-hud.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/terminal-simulator.mdx b/docs/catalog/components/terminal-simulator.mdx
index 341df1d9a2..b65208bee6 100644
--- a/docs/catalog/components/terminal-simulator.mdx
+++ b/docs/catalog/components/terminal-simulator.mdx
@@ -5,6 +5,12 @@ description: "A terminal window types commands and streams log output."
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add terminal-simulator" item="terminal-simulator" />
+
+That writes one file: `compositions/components/terminal-simulator.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="terminal-simulator preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/terminal-simulator.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/terminal-simulator.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add terminal-simulator" item="terminal-simulator" />
-
-That writes one file: `compositions/components/terminal-simulator.html`.
-
 ## Source
 
 <Accordion title={`terminal-simulator.html`}>
diff --git a/docs/catalog/components/testimonial-card.mdx b/docs/catalog/components/testimonial-card.mdx
index 0f3d8599f8..02a09eafeb 100644
--- a/docs/catalog/components/testimonial-card.mdx
+++ b/docs/catalog/components/testimonial-card.mdx
@@ -6,6 +6,12 @@ description: "Reveals a customer quote at reading pace, then settles its avatar,
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add testimonial-card" item="testimonial-card" />
+
+That writes one file: `compositions/components/testimonial-card.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/testimonial-card.json"
   compositionId="testimonial-card"
@@ -347,12 +353,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add testimonial-card" item="testimonial-card" />
-
-That writes one file: `compositions/components/testimonial-card.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/testimonial-card.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/testimonial-proof-card.mdx b/docs/catalog/components/testimonial-proof-card.mdx
index 0c32dd667e..a8de8c4745 100644
--- a/docs/catalog/components/testimonial-proof-card.mdx
+++ b/docs/catalog/components/testimonial-proof-card.mdx
@@ -6,6 +6,12 @@ description: "A quote card whose testimonial reveals per-line through a soft mas
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add testimonial-proof-card" item="testimonial-proof-card" />
+
+That writes one file: `compositions/components/testimonial-proof-card.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/testimonial-proof-card.json"
   compositionId="testimonial-proof-card"
@@ -513,12 +519,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add testimonial-proof-card" item="testimonial-proof-card" />
-
-That writes one file: `compositions/components/testimonial-proof-card.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/testimonial-proof-card.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/text-shimmer.mdx b/docs/catalog/components/text-shimmer.mdx
index 4751c09df0..60a1e8cb37 100644
--- a/docs/catalog/components/text-shimmer.mdx
+++ b/docs/catalog/components/text-shimmer.mdx
@@ -6,6 +6,12 @@ description: "A static headline receives one clean specular gradient sweep throu
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add text-shimmer" item="text-shimmer" />
+
+That writes one file: `compositions/components/text-shimmer.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/text-shimmer.json"
   compositionId="text-shimmer"
@@ -196,12 +202,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add text-shimmer" item="text-shimmer" />
-
-That writes one file: `compositions/components/text-shimmer.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/text-shimmer.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/text-stagger.mdx b/docs/catalog/components/text-stagger.mdx
index dc075fd84d..4bec3ccc5b 100644
--- a/docs/catalog/components/text-stagger.mdx
+++ b/docs/catalog/components/text-stagger.mdx
@@ -6,6 +6,12 @@ description: "A transitions.dev-inspired text stagger primitive with enter, shim
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add text-stagger" item="text-stagger" />
+
+That writes one file: `compositions/components/text-stagger.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/text-stagger.json"
   compositionId="text-stagger"
@@ -150,12 +156,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add text-stagger" item="text-stagger" />
-
-That writes one file: `compositions/components/text-stagger.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/text-state-swap.mdx b/docs/catalog/components/text-state-swap.mdx
index 8441dd830b..feff4614c5 100644
--- a/docs/catalog/components/text-state-swap.mdx
+++ b/docs/catalog/components/text-state-swap.mdx
@@ -6,6 +6,12 @@ description: "A text state swap primitive with outgoing blur and incoming lift"
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add text-state-swap" item="text-state-swap" />
+
+That writes one file: `compositions/components/text-state-swap.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/text-state-swap.json"
   compositionId="text-state-swap"
@@ -131,12 +137,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add text-state-swap" item="text-state-swap" />
-
-That writes one file: `compositions/components/text-state-swap.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/texture-mask-text.mdx b/docs/catalog/components/texture-mask-text.mdx
index 7da2c42c2d..24ce303ab7 100644
--- a/docs/catalog/components/texture-mask-text.mdx
+++ b/docs/catalog/components/texture-mask-text.mdx
@@ -5,6 +5,12 @@ description: "CSS luminance masks that cut holes through letterforms - 66 pre-bu
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add texture-mask-text" item="texture-mask-text" />
+
+That writes `compositions/components/texture-mask-text/texture-mask-text.html`, plus 66 supporting files under `assets/texture-mask-text/masks/`.
+
 <div className="hf-texture-preview-panel">
   <div className="hf-texture-preview-card" style={{ "--mask-url": "url('https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/texture-mask-text/masks/brick.png')" }}>
     <div className="hf-texture-preview-label">Brick</div>
@@ -32,12 +38,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   </div>
 </div>
 
-## Install
-
-<InstallCommand command="npx hyperframes add texture-mask-text" item="texture-mask-text" />
-
-That writes `compositions/components/texture-mask-text/texture-mask-text.html`, plus 66 supporting files under `assets/texture-mask-text/masks/`.
-
 ## Source
 
 <Accordion title={`texture-mask-text.html`}>
diff --git a/docs/catalog/components/three-orbiting-cards.mdx b/docs/catalog/components/three-orbiting-cards.mdx
index fffaf90f7d..89a8d1416e 100644
--- a/docs/catalog/components/three-orbiting-cards.mdx
+++ b/docs/catalog/components/three-orbiting-cards.mdx
@@ -5,6 +5,12 @@ description: "A Three.js-powered orbit scene driven by a paused GSAP timeline fo
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add three-orbiting-cards" item="three-orbiting-cards" />
+
+That writes one file: `compositions/components/three-orbiting-cards.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="three-orbiting-cards preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/three-orbiting-cards.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/three-orbiting-cards.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add three-orbiting-cards" item="three-orbiting-cards" />
-
-That writes one file: `compositions/components/three-orbiting-cards.html`.
-
 ## Source
 
 <Accordion title={`three-orbiting-cards.html`}>
diff --git a/docs/catalog/components/ticker-takeover.mdx b/docs/catalog/components/ticker-takeover.mdx
index c60bd146c1..792eacbe3e 100644
--- a/docs/catalog/components/ticker-takeover.mdx
+++ b/docs/catalog/components/ticker-takeover.mdx
@@ -6,6 +6,12 @@ description: "A mono ticker rolls through options, locks on a final word with an
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add ticker-takeover" item="ticker-takeover" />
+
+That writes one file: `compositions/components/ticker-takeover.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/ticker-takeover.json"
   compositionId="ticker-takeover"
@@ -339,12 +345,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add ticker-takeover" item="ticker-takeover" />
-
-That writes one file: `compositions/components/ticker-takeover.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/ticker-takeover.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/tilt-card.mdx b/docs/catalog/components/tilt-card.mdx
index 5d0b6a6940..6e6079e68e 100644
--- a/docs/catalog/components/tilt-card.mdx
+++ b/docs/catalog/components/tilt-card.mdx
@@ -6,6 +6,12 @@ description: "A transitions.dev-inspired tilt card primitive with depth layers a
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add tilt-card" item="tilt-card" />
+
+That writes one file: `compositions/components/tilt-card.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/tilt-card.json"
   compositionId="tilt-card"
@@ -174,12 +180,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add tilt-card" item="tilt-card" />
-
-That writes one file: `compositions/components/tilt-card.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/titlecard-calm.mdx b/docs/catalog/components/titlecard-calm.mdx
index 045853afe3..d1f1ea4072 100644
--- a/docs/catalog/components/titlecard-calm.mdx
+++ b/docs/catalog/components/titlecard-calm.mdx
@@ -6,6 +6,12 @@ description: "A restrained title card where a mono kicker and generous grotesque
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add titlecard-calm" item="titlecard-calm" />
+
+That writes one file: `compositions/components/titlecard-calm.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/titlecard-calm.json"
   compositionId="titlecard-calm"
@@ -206,12 +212,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add titlecard-calm" item="titlecard-calm" />
-
-That writes one file: `compositions/components/titlecard-calm.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/titlecard-calm.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/titlecard-lockup.mdx b/docs/catalog/components/titlecard-lockup.mdx
index 6d4a7ec932..31784cba60 100644
--- a/docs/catalog/components/titlecard-lockup.mdx
+++ b/docs/catalog/components/titlecard-lockup.mdx
@@ -6,6 +6,12 @@ description: "The calm breather titlecard: an optional mono kicker fades up, the
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add titlecard-lockup" item="titlecard-lockup" />
+
+That writes one file: `compositions/components/titlecard-lockup.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/titlecard-lockup.json"
   compositionId="titlecard-lockup"
@@ -339,12 +345,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add titlecard-lockup" item="titlecard-lockup" />
-
-That writes one file: `compositions/components/titlecard-lockup.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/titlecard-lockup.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/toggle-flip.mdx b/docs/catalog/components/toggle-flip.mdx
index fe7610d70a..2ca8e45d4a 100644
--- a/docs/catalog/components/toggle-flip.mdx
+++ b/docs/catalog/components/toggle-flip.mdx
@@ -6,6 +6,12 @@ description: "An oversized UI toggle switch that flips with real physicality: th
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add toggle-flip" item="toggle-flip" />
+
+That writes one file: `compositions/components/toggle-flip.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/toggle-flip.json"
   compositionId="toggle-flip"
@@ -442,12 +448,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add toggle-flip" item="toggle-flip" />
-
-That writes one file: `compositions/components/toggle-flip.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/toggle-flip.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/top-down-letters.mdx b/docs/catalog/components/top-down-letters.mdx
index 1f92b88983..246363df82 100644
--- a/docs/catalog/components/top-down-letters.mdx
+++ b/docs/catalog/components/top-down-letters.mdx
@@ -6,6 +6,12 @@ description: "Letters descend from above in a pronounced staircase with zero blu
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add top-down-letters" item="top-down-letters" />
+
+That writes one file: `compositions/components/top-down-letters.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/top-down-letters.json"
   compositionId="top-down-letters"
@@ -130,12 +136,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add top-down-letters" item="top-down-letters" />
-
-That writes one file: `compositions/components/top-down-letters.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/touch-indicator.mdx b/docs/catalog/components/touch-indicator.mdx
index bd02a7d662..4830257319 100644
--- a/docs/catalog/components/touch-indicator.mdx
+++ b/docs/catalog/components/touch-indicator.mdx
@@ -6,6 +6,12 @@ description: "A translucent contact-circle gesture actor for mobile UI scenes: i
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add touch-indicator" item="touch-indicator" />
+
+That writes one file: `compositions/components/touch-indicator.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/touch-indicator.json"
   compositionId="touch-indicator"
@@ -396,12 +402,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add touch-indicator" item="touch-indicator" />
-
-That writes one file: `compositions/components/touch-indicator.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/touch-indicator.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/tracing-beam.mdx b/docs/catalog/components/tracing-beam.mdx
index a3b824eefb..7644067d50 100644
--- a/docs/catalog/components/tracing-beam.mdx
+++ b/docs/catalog/components/tracing-beam.mdx
@@ -6,6 +6,12 @@ description: "A glowing dash follows one SVG path through three UI elements, lif
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add tracing-beam" item="tracing-beam" />
+
+That writes one file: `compositions/components/tracing-beam.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/tracing-beam.json"
   compositionId="tracing-beam"
@@ -417,12 +423,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add tracing-beam" item="tracing-beam" />
-
-That writes one file: `compositions/components/tracing-beam.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/tracing-beam.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/tracking-in.mdx b/docs/catalog/components/tracking-in.mdx
index 8dbd974dfb..33ed0e4b1b 100644
--- a/docs/catalog/components/tracking-in.mdx
+++ b/docs/catalog/components/tracking-in.mdx
@@ -6,6 +6,12 @@ description: "A precise letter-spacing reveal for premium headings and interface
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add tracking-in" item="tracking-in" />
+
+That writes one file: `compositions/components/tracking-in.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/tracking-in.json"
   compositionId="tracking-in"
@@ -113,12 +119,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add tracking-in" item="tracking-in" />
-
-That writes one file: `compositions/components/tracking-in.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/trust-strip.mdx b/docs/catalog/components/trust-strip.mdx
index dce61e7e0e..27a487007d 100644
--- a/docs/catalog/components/trust-strip.mdx
+++ b/docs/catalog/components/trust-strip.mdx
@@ -6,6 +6,12 @@ description: "A monochrome trust row of wide-tracked mono wordmarks that fade in
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add trust-strip" item="trust-strip" />
+
+That writes one file: `compositions/components/trust-strip.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/trust-strip.json"
   compositionId="trust-strip"
@@ -244,12 +250,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add trust-strip" item="trust-strip" />
-
-That writes one file: `compositions/components/trust-strip.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/trust-strip.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/type-match-cut.mdx b/docs/catalog/components/type-match-cut.mdx
index 50fe32ca65..39a39e27dd 100644
--- a/docs/catalog/components/type-match-cut.mdx
+++ b/docs/catalog/components/type-match-cut.mdx
@@ -6,6 +6,12 @@ description: "A headline splits vertically around an incoming panel, which grows
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add type-match-cut" item="type-match-cut" />
+
+That writes one file: `compositions/components/type-match-cut.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/type-match-cut.json"
   compositionId="type-match-cut"
@@ -425,12 +431,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add type-match-cut" item="type-match-cut" />
-
-That writes one file: `compositions/components/type-match-cut.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/type-match-cut.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/typed-prompt.mdx b/docs/catalog/components/typed-prompt.mdx
index 4c93169f37..8089ae71e4 100644
--- a/docs/catalog/components/typed-prompt.mdx
+++ b/docs/catalog/components/typed-prompt.mdx
@@ -6,6 +6,12 @@ description: "A prompt line types itself in chunked human cadence behind a deter
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add typed-prompt" item="typed-prompt" />
+
+That writes one file: `compositions/components/typed-prompt.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/typed-prompt.json"
   compositionId="typed-prompt"
@@ -402,12 +408,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add typed-prompt" item="typed-prompt" />
-
-That writes one file: `compositions/components/typed-prompt.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/typed-prompt.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/typewriter.mdx b/docs/catalog/components/typewriter.mdx
index 41dc6ccdf3..eae252a34f 100644
--- a/docs/catalog/components/typewriter.mdx
+++ b/docs/catalog/components/typewriter.mdx
@@ -6,6 +6,12 @@ description: "Character-by-character text reveal with a deterministic blinking c
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add typewriter" item="typewriter" />
+
+That writes one file: `compositions/components/typewriter.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/typewriter.json"
   compositionId="typewriter"
@@ -139,12 +145,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add typewriter" item="typewriter" />
-
-That writes one file: `compositions/components/typewriter.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/catalog/components/typing-indicator.mdx b/docs/catalog/components/typing-indicator.mdx
index 2369ff363c..098e59ad0a 100644
--- a/docs/catalog/components/typing-indicator.mdx
+++ b/docs/catalog/components/typing-indicator.mdx
@@ -6,6 +6,12 @@ description: "The three-dot chat bubble that says someone is writing: it pops in
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add typing-indicator" item="typing-indicator" />
+
+That writes one file: `compositions/components/typing-indicator.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/typing-indicator.json"
   compositionId="typing-indicator"
@@ -308,12 +314,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add typing-indicator" item="typing-indicator" />
-
-That writes one file: `compositions/components/typing-indicator.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/typing-indicator.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/ui-focus-zoom.mdx b/docs/catalog/components/ui-focus-zoom.mdx
index e24a82b158..81dc2905b0 100644
--- a/docs/catalog/components/ui-focus-zoom.mdx
+++ b/docs/catalog/components/ui-focus-zoom.mdx
@@ -6,6 +6,12 @@ description: "A full app surface establishes with one settle, then the camera zo
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add ui-focus-zoom" item="ui-focus-zoom" />
+
+That writes one file: `compositions/components/ui-focus-zoom.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/ui-focus-zoom.json"
   compositionId="ui-focus-zoom"
@@ -582,12 +588,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add ui-focus-zoom" item="ui-focus-zoom" />
-
-That writes one file: `compositions/components/ui-focus-zoom.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/ui-focus-zoom.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/variable-axis-type.mdx b/docs/catalog/components/variable-axis-type.mdx
index 4c4fffba54..e09166a885 100644
--- a/docs/catalog/components/variable-axis-type.mdx
+++ b/docs/catalog/components/variable-axis-type.mdx
@@ -6,6 +6,12 @@ description: "A locked one-line headline whose weight or width axis morphs into
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add variable-axis-type" item="variable-axis-type" />
+
+That writes one file: `compositions/components/variable-axis-type.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/variable-axis-type.json"
   compositionId="variable-axis-type"
@@ -210,12 +216,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add variable-axis-type" item="variable-axis-type" />
-
-That writes one file: `compositions/components/variable-axis-type.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/variable-axis-type.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/variable-font-flex.mdx b/docs/catalog/components/variable-font-flex.mdx
index 2fbcd9d23b..8a6a576813 100644
--- a/docs/catalog/components/variable-font-flex.mdx
+++ b/docs/catalog/components/variable-font-flex.mdx
@@ -6,6 +6,12 @@ description: "A word lands while its variable-font weight and width axes flex fr
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add variable-font-flex" item="variable-font-flex" />
+
+That writes one file: `compositions/components/variable-font-flex.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/variable-font-flex.json"
   compositionId="variable-font-flex"
@@ -322,12 +328,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add variable-font-flex" item="variable-font-flex" />
-
-That writes one file: `compositions/components/variable-font-flex.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/variable-font-flex.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/vector-editor-rig.mdx b/docs/catalog/components/vector-editor-rig.mdx
index 13b576da5d..c4c5dc0fa9 100644
--- a/docs/catalog/components/vector-editor-rig.mdx
+++ b/docs/catalog/components/vector-editor-rig.mdx
@@ -6,6 +6,12 @@ description: "A dark design-tool app chrome with a live vector pen path, sequent
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add vector-editor-rig" item="vector-editor-rig" />
+
+That writes one file: `compositions/components/vector-editor-rig.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/vector-editor-rig.json"
   compositionId="vector-editor-rig"
@@ -813,12 +819,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add vector-editor-rig" item="vector-editor-rig" />
-
-That writes one file: `compositions/components/vector-editor-rig.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/vector-editor-rig.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/velocity-throw-snap.mdx b/docs/catalog/components/velocity-throw-snap.mdx
index c66db12231..85b66d73d2 100644
--- a/docs/catalog/components/velocity-throw-snap.mdx
+++ b/docs/catalog/components/velocity-throw-snap.mdx
@@ -6,6 +6,12 @@ description: "A five-shot rail whips past on a fast decaying curve, then oversho
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add velocity-throw-snap" item="velocity-throw-snap" />
+
+That writes one file: `compositions/components/velocity-throw-snap.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/velocity-throw-snap.json"
   compositionId="velocity-throw-snap"
@@ -502,12 +508,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add velocity-throw-snap" item="velocity-throw-snap" />
-
-That writes one file: `compositions/components/velocity-throw-snap.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/velocity-throw-snap.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/vignette.mdx b/docs/catalog/components/vignette.mdx
index 3aee67e4ea..2269253329 100644
--- a/docs/catalog/components/vignette.mdx
+++ b/docs/catalog/components/vignette.mdx
@@ -5,6 +5,12 @@ description: "Cinematic radial vignette overlay using a pure-CSS gradient — da
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add vignette" item="vignette" />
+
+That writes one file: `compositions/components/vignette.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="vignette preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/vignette.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/vignette.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add vignette" item="vignette" />
-
-That writes one file: `compositions/components/vignette.html`.
-
 ## Source
 
 <Accordion title={`vignette.html`}>
diff --git a/docs/catalog/components/vox-annotate.mdx b/docs/catalog/components/vox-annotate.mdx
index 99236a9b79..bd7380a627 100644
--- a/docs/catalog/components/vox-annotate.mdx
+++ b/docs/catalog/components/vox-annotate.mdx
@@ -6,6 +6,12 @@ description: "The Vox-style annotate gesture: a keyword in a held sentence gets
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add vox-annotate" item="vox-annotate" />
+
+That writes one file: `compositions/components/vox-annotate.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/vox-annotate.json"
   compositionId="vox-annotate"
@@ -495,12 +501,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add vox-annotate" item="vox-annotate" />
-
-That writes one file: `compositions/components/vox-annotate.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/vox-annotate.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/whip-pan-cut.mdx b/docs/catalog/components/whip-pan-cut.mdx
index 238f5cdb74..43229afe0f 100644
--- a/docs/catalog/components/whip-pan-cut.mdx
+++ b/docs/catalog/components/whip-pan-cut.mdx
@@ -6,6 +6,12 @@ description: "A full-frame whip pan: scene A whips off laterally with capped dir
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add whip-pan-cut" item="whip-pan-cut" />
+
+That writes one file: `compositions/components/whip-pan-cut.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/whip-pan-cut.json"
   compositionId="whip-pan-cut"
@@ -505,12 +511,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add whip-pan-cut" item="whip-pan-cut" />
-
-That writes one file: `compositions/components/whip-pan-cut.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/whip-pan-cut.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/whiteboard-ink.mdx b/docs/catalog/components/whiteboard-ink.mdx
index d26173379c..32ac697aad 100644
--- a/docs/catalog/components/whiteboard-ink.mdx
+++ b/docs/catalog/components/whiteboard-ink.mdx
@@ -6,6 +6,12 @@ description: "A whiteboard sketch draws one measured stroke at a time while a pe
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add whiteboard-ink" item="whiteboard-ink" />
+
+That writes one file: `compositions/components/whiteboard-ink.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/whiteboard-ink.json"
   compositionId="whiteboard-ink"
@@ -558,12 +564,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add whiteboard-ink" item="whiteboard-ink" />
-
-That writes one file: `compositions/components/whiteboard-ink.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/whiteboard-ink.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/wordmark-tiles.mdx b/docs/catalog/components/wordmark-tiles.mdx
index 75e068c48e..1063a0b244 100644
--- a/docs/catalog/components/wordmark-tiles.mdx
+++ b/docs/catalog/components/wordmark-tiles.mdx
@@ -6,6 +6,12 @@ description: "A wordmark resolves from deterministic color noise into correctly
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add wordmark-tiles" item="wordmark-tiles" />
+
+That writes one file: `compositions/components/wordmark-tiles.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/wordmark-tiles.json"
   compositionId="wordmark-tiles"
@@ -378,12 +384,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add wordmark-tiles" item="wordmark-tiles" />
-
-That writes one file: `compositions/components/wordmark-tiles.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/wordmark-tiles.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/x-follow-card.mdx b/docs/catalog/components/x-follow-card.mdx
index b9b3b67ff3..65349f2c54 100644
--- a/docs/catalog/components/x-follow-card.mdx
+++ b/docs/catalog/components/x-follow-card.mdx
@@ -5,6 +5,12 @@ description: "A social follow card with avatar, handle, and follower motion."
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add x-follow-card" item="x-follow-card" />
+
+That writes one file: `compositions/components/x-follow-card.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="x-follow-card preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/x-follow-card.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/x-follow-card.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add x-follow-card" item="x-follow-card" />
-
-That writes one file: `compositions/components/x-follow-card.html`.
-
 ## Source
 
 <Accordion title={`x-follow-card.html`}>
diff --git a/docs/catalog/components/yt-camera-move.mdx b/docs/catalog/components/yt-camera-move.mdx
index 4d42a36f89..43b97ce2bc 100644
--- a/docs/catalog/components/yt-camera-move.mdx
+++ b/docs/catalog/components/yt-camera-move.mdx
@@ -5,6 +5,12 @@ description: "Dynamic zoom, slide, and 3D tilt-pan helpers for any wrapper (vide
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add yt-camera-move" item="yt-camera-move" />
+
+That writes one file: `compositions/components/yt-camera-move.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="yt-camera-move preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/yt-camera-move.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-camera-move.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add yt-camera-move" item="yt-camera-move" />
-
-That writes one file: `compositions/components/yt-camera-move.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/yt-camera-move.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/yt-circle-pointer.mdx b/docs/catalog/components/yt-circle-pointer.mdx
index 1049f8e43c..2acad4a5ee 100644
--- a/docs/catalog/components/yt-circle-pointer.mdx
+++ b/docs/catalog/components/yt-circle-pointer.mdx
@@ -5,6 +5,12 @@ description: "Draw-on annotation ellipse around a target plus a countdown chip t
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add yt-circle-pointer" item="yt-circle-pointer" />
+
+That writes one file: `compositions/components/yt-circle-pointer.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="yt-circle-pointer preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/yt-circle-pointer.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-circle-pointer.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add yt-circle-pointer" item="yt-circle-pointer" />
-
-That writes one file: `compositions/components/yt-circle-pointer.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/yt-circle-pointer.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/yt-feather-highlight.mdx b/docs/catalog/components/yt-feather-highlight.mdx
index 5b964f7d56..e4823c0124 100644
--- a/docs/catalog/components/yt-feather-highlight.mdx
+++ b/docs/catalog/components/yt-feather-highlight.mdx
@@ -5,6 +5,12 @@ description: "Dims the frame except a feathered ellipse; the hole's position and
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add yt-feather-highlight" item="yt-feather-highlight" />
+
+That writes one file: `compositions/components/yt-feather-highlight.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="yt-feather-highlight preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/yt-feather-highlight.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-feather-highlight.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add yt-feather-highlight" item="yt-feather-highlight" />
-
-That writes one file: `compositions/components/yt-feather-highlight.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/yt-feather-highlight.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/yt-screen-warp.mdx b/docs/catalog/components/yt-screen-warp.mdx
index e6aa84172a..834dcb0d79 100644
--- a/docs/catalog/components/yt-screen-warp.mdx
+++ b/docs/catalog/components/yt-screen-warp.mdx
@@ -5,6 +5,12 @@ description: "Grid, scanline, vignette, and sheen overlay plus a 3D-warp wrapper
 
 import { InstallCommand } from "/snippets/install-command.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add yt-screen-warp" item="yt-screen-warp" />
+
+That writes one file: `compositions/components/yt-screen-warp.html`.
+
 <iframe
   className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
   title="yt-screen-warp preview"
@@ -12,12 +18,6 @@ import { InstallCommand } from "/snippets/install-command.jsx";
   srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@latest/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/yt-screen-warp.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-screen-warp.png");document.body.appendChild(p)});<\/script></body></html>`}
 />
 
-## Install
-
-<InstallCommand command="npx hyperframes add yt-screen-warp" item="yt-screen-warp" />
-
-That writes one file: `compositions/components/yt-screen-warp.html`.
-
 ## Paste it into your composition
 
 Open `compositions/components/yt-screen-warp.html` and copy what is inside into your own composition.
diff --git a/docs/catalog/components/zoom-through-transition.mdx b/docs/catalog/components/zoom-through-transition.mdx
index 3514181ab2..3d09030e86 100644
--- a/docs/catalog/components/zoom-through-transition.mdx
+++ b/docs/catalog/components/zoom-through-transition.mdx
@@ -6,6 +6,12 @@ description: "A transition that zooms through a focal card into the next scene."
 import { InstallCommand } from "/snippets/install-command.jsx";
 import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
+## Install
+
+<InstallCommand command="npx hyperframes add zoom-through-transition" item="zoom-through-transition" />
+
+That writes one file: `compositions/components/zoom-through-transition.html`.
+
 <VariablesExplorer
   previewSrc="/public/catalog/components/zoom-through-transition.json"
   compositionId="zoom-through-transition"
@@ -302,12 +308,6 @@ import { VariablesExplorer } from "/snippets/variables-explorer.jsx";
 
 </VariablesExplorer>
 
-## Install
-
-<InstallCommand command="npx hyperframes add zoom-through-transition" item="zoom-through-transition" />
-
-That writes one file: `compositions/components/zoom-through-transition.html`.
-
 ## Variables
 
 Every one of these has a default, so the piece works untouched. Set the ones you
diff --git a/docs/snippets/variables-explorer.jsx b/docs/snippets/variables-explorer.jsx
index 875924f37c..3d0e46f31d 100644
--- a/docs/snippets/variables-explorer.jsx
+++ b/docs/snippets/variables-explorer.jsx
@@ -1844,7 +1844,7 @@ export const VariablesExplorer = ({
           </div>
         )}
         <div className="hf-ve-cell hf-ve-snippet" data-on={tab === "snippet"}>
-          {/* The Install block further down the page is generated before anyone
+          {/* The Install block above the preview is generated before anyone
               touches a knob, so it can only ever offer the plain command. This
               one is the panel's, and it carries what the reader actually chose:
               copying it installs the piece already tuned. */}
diff --git a/scripts/generate-catalog-pages.ts b/scripts/generate-catalog-pages.ts
index 3fe1340728..93b0258647 100644
--- a/scripts/generate-catalog-pages.ts
+++ b/scripts/generate-catalog-pages.ts
@@ -1033,11 +1033,10 @@ function generateItemMdx(
     "",
   ];
 
-  // 1. What it looks like, before anything else. Credits, tags and the source
-  //    prompt used to sit above this and pushed the preview below the fold.
-  lines.push(...previewSection(kind, manifest, textureGroups));
-
-  // 2. How to get it. A CodeGroup around a single block just drew an empty tab bar.
+  // 1. How to get it, before anything else. It is the one line a reader is here
+  //    to copy, and below the preview it landed under the explorer's Customize
+  //    panel, a screen or more down. A CodeGroup around a single block just drew
+  //    an empty tab bar.
   lines.push(
     "## Install",
     "",
@@ -1047,6 +1046,10 @@ function generateItemMdx(
     "",
   );
 
+  // 2. What it looks like. Credits, tags and the source prompt used to sit above
+  //    this and pushed the preview below the fold; they stay in the footer.
+  lines.push(...previewSection(kind, manifest, textureGroups));
+
   // Prerequisite where it bites: you need the flag to preview what you just installed.
   if (tags.includes("html-in-canvas")) {
     lines.push(