Как один HTML-объект превращается в код, потом в таймлайн, потом в титры - без единой склейки

Create an 8-second vertical 9:16 motion-design animation for Instagram Reels.

1080 × 1920.
60fps.
120 BPM.
16 beats / 4 bars.
Exactly 8 seconds.

CORE IDEA

One shape. Never cut.

Every interface, card, editor, timeline, command field and title is the SAME continuous object transforming into the next state.

The animation tells this story:

THIS VIDEO
→
0 CODE
→
0 AFTER EFFECTS
→
0 EDITORS
→
0 MOTION DESIGNERS
→
make it move
→
JUST A PROMPT
→
MADE ON
→
OPUS 5.5
→
@VIZNFR

The entire sequence should feel like one continuous piece of premium motion design rather than separate scenes.

VISUAL STYLE

Smooth, minimal, premium UI motion.

Background:
warm off-white #ECEAE6

Primary UI:
near-black #0E0E0D

Secondary dark surfaces:
#1E1E1C
#2C2C29

Primary light text:
#FAFAF8

Muted text:
#8A8883

Accent:
signal orange #FF5B1F

Typography:
Geist
Geist Mono for code / command-line elements.

No gradients.
No glow.
No particles.
No excessive bounce.
No generic template transitions.
No unnecessary decoration.

Use strong typography and large compositions designed specifically for a vertical phone screen.

Keep important elements inside Instagram Reel safe areas.

MOTION LANGUAGE

One continuous transforming object.

Never hard-cut between states.

The object's:
- width
- height
- radius
- internal layout
- content
- position

can transform continuously.

Use controlled closed-form spring motion.

Maximum overshoot approximately 2%.

Avoid exaggerated bouncy easing.

Text swaps should have their own entrance and exit timing.

Use short directional motion blur when typography changes.

A cursor should physically drive interactions wherever appropriate:
- clicking
- selecting
- dragging
- typing
- pressing Enter

The cursor should feel connected to the animation rather than decorative.

Camera scale can change between states so every important state fills the vertical frame.

Do not leave large amounts of dead space.

STORYBOARD

BEAT 1

Begin immediately.

A compact near-black pill/card exists on the warm off-white canvas.

Large text:

THIS VIDEO

Cursor approaches.

The composition should instantly establish the visual language.

BEAT 2

Cursor clicks.

The same object stretches and transforms into a compact code-editor interface.

Brief believable code structure appears inside.

Do not show excessive readable code.

This is primarily a visual transition.

BEATS 3–4

The code interface compresses and transforms.

Huge typography resolves:

0
CODE

Make the "0" visually dominant.

Hold long enough to read clearly.

The cursor continues moving naturally toward the next interaction.

BEATS 5–6

The same object transforms into a recognizable motion-design interface.

Use visual cues such as:
- composition viewport
- small layer structure
- keyframe-like controls

Do NOT copy any real software interface exactly.

The interface then collapses/transforms into:

0
AFTER EFFECTS

Large, bold and instantly readable.

BEATS 7–8

The object stretches horizontally into a video-editing timeline.

Use recognizable abstract editing-language:
- tracks
- clips
- playhead

The cursor quickly interacts with the timeline.

The timeline compresses and transforms into:

0
EDITORS

Keep typography large.

BEATS 9–10

The same container transforms into a motion-curve / graph editor.

Show smooth animation curves and control points.

The cursor briefly manipulates one of the curves.

The graph then transforms into:

0
MOTION DESIGNERS

"MOTION DESIGNERS" must remain readable on a phone.

Do not cram the typography.

Use two lines if necessary.

BEAT 11

The object compresses into a command-input field.

Cursor clicks inside.

Type:

make it move

Use Geist Mono.

Show a visible blinking caret.

Typing should feel quick and tactile.

BEAT 12

Hold:

make it move█

briefly.

Then the cursor / keyboard interaction presses Enter.

The command field responds physically.

Show a minimal check / confirmation state.

The response should feel satisfying but restrained.

No confetti or celebration effects.

BEAT 13

The command field expands dramatically.

Large typography resolves:

JUST A
PROMPT

This should feel like the reveal explaining everything the viewer just saw.

Keep it extremely readable.

BEAT 14

The same geometry transforms again.

First reveal:

MADE ON

Then rapidly transform/emphasize:

OPUS 5.5

OPUS 5.5 should become the dominant element.

Use the orange accent strategically during the transformation.

Do not make the entire screen orange.

BEAT 15

OPUS 5.5 transforms into the final creator credit:

@VIZNFR

Make @VIZNFR large and dominant.

This is the final branding payoff.

Give it enough visual stability to actually register.

Do not make it a tiny footer.

BEAT 16

Collapse the final @VIZNFR composition back toward the geometry/state used at the beginning.

The motion should complete cleanly on the musical downbeat.

If creating a looping version, make the final frame mathematically identical to the first frame.

Cursor position and cursor velocity must also match the beginning so the loop does not stutter.

TIMING

120 BPM.

16 beats = exactly 8 seconds.

Something meaningful happens on every beat.

Do not allow dead time.

However, readability is more important than cramming extra animation into every moment.

The important text states must have enough screen time to register:

0 CODE
0 AFTER EFFECTS
0 EDITORS
0 MOTION DESIGNERS
JUST A PROMPT
OPUS 5.5
@VIZNFR

The command interaction receives TWO beats because typing and confirmation need to remain readable.

TECHNICAL BUILD

Build the animation deterministically.

All animation state must be derived from time inside:

seek(t)

No CSS transitions.
No timers.
No accumulated frame state.

Seeking directly to any timestamp must produce the correct frame.

Use closed-form spring step responses.

If a property changes target multiple times, calculate it as the sum of spring responses so the animation remains a pure function of time.

Cursor interactions must also be deterministic.

For dragging interactions, calculate the controlled value directly from cursor position while held.

On release, transition back into spring-driven motion.

TEXT

Text inside transforming containers needs independent entrance and exit timing.

Do not allow old and new labels to overlap.

Avoid blurry text caused by scaling.

Do not apply will-change to elements being heavily camera-scaled if it causes text rasterization problems.

MOTION BLUR

Render at 60fps.

Use temporal supersampling.

Target approximately a 180-degree shutter feel.

For example:
render 4 temporal subframes per final frame and blend them for natural motion blur.

Motion blur should improve fast transformations without making typography unreadable.

CAMERA

The camera should subtly reframe and scale so each important state occupies a meaningful amount of the 9:16 canvas.

Do not simply leave one small object floating in the center for eight seconds.

Camera movement must feel motivated by the transforming object.

No aggressive cinematic camera movement.

No fake depth-of-field.

QUALITY CONTROL

Before rendering the final video:

Render a representative frame from every beat.

Create a contact sheet showing all 16 beats.

Check for:

- text collisions
- unreadable typography
- bad line breaks
- inconsistent margins
- cramped UI
- cursor collisions
- elements outside safe areas
- inconsistent icon strokes
- excessive spring overshoot
- blurry text
- dead frames

Fix those problems before the full render.

IMPORTANT

This should NOT look like a slideshow of different UI screens.

The core visual trick is that everything feels physically related.

THIS VIDEO becomes the editor.

The editor becomes 0 CODE.

That geometry becomes the motion interface.

The motion interface becomes 0 AFTER EFFECTS.

That becomes the timeline.

The timeline becomes 0 EDITORS.

That becomes the graph editor.

The graph becomes 0 MOTION DESIGNERS.

That becomes the command field.

The command becomes JUST A PROMPT.

That becomes OPUS 5.5.

That becomes @VIZNFR.

One object.
One continuous visual system.
No cuts.

START

Before writing any code:

1. Show me the complete 16-beat storyboard.
2. Explain what the continuous object becomes on every beat.
3. Explain the cursor action on every beat.
4. Flag any readability or timing problems you anticipate.
5. Wait for my approval before implementing the animation.