hyperframes-fx-cinematic-zoom

Cinematic Zoom

When to use

• When zooming in on a subject and transitioning to the next scene
• A "looking closer" rhythm, such as product shot → detailed description, person → quote, etc.
• 톤: tech, brand, minimalist
• Recommended duration: 0.6–0.9 seconds (slightly longer so the zoom is felt)

Installation

npx hyperframes add cinematic-zoom

→ compositions/cinematic-zoom.html.

Wiring

<div data-composition-src="compositions/cinematic-zoom.html"
     data-start="4.5" data-duration="0.8"
     data-track-index="1"
     data-width="1080" data-height="1350">
</div>

Parameters

• Zoom scale, blur strength, and easing are inside the shader

짝

• Works well with: sdf-iris, chromatic-radial-split (tech)
• Avoid: whip-pan right next to it — both are camera movements, so it gets confusing