Motion graphics with Claude Opus 5.5

Create a dynamic 15-second motion graphics video that showcases your incredible motion design skills. The content should focus on Daniil Filatov, a designer and content creator working with big tech brands. He has a specific brand style and tone of voice. Visit his Instagram [www.instagram.com/filatov.design](https://www.instagram.com/filatov.design) and personal website [www.filatov.design](https://www.filatov.design) to learn about his personal brand, then write the video content yourself.

Update the opening text to: “AI Workflows and Tutorials.” Then reveal my Instagram profile and avatar using a similar animation. When showing the numbers, replace “300+ Prompts” with “180+ Videos.” Extend the video to 19 seconds. After the “Creating with Recraft…” section, add a new “Building with Framer…” section featuring an accurate recreation of the fictional Framer UI. Add polished sound design that complement the motion

Make the overall movement smoother and more deliberate. Preserve the current composition and visual direction.

Refine the typography animation. Improve its timing and hierarchy while keeping every line easy to read.

Polish the transitions and ending. Remove abrupt changes and make the complete sequence loop seamlessly.

Create an 17.2-second, 1920×1080, 30fps horizontal motion film for Daniil Filatov (@filatov.design), a designer and content creator who turns new creative AI tools into visual stories, workflows and tutorials. Deliver (1) a self-contained HTML file with a play/pause, restart, scrubber and sound toggle, and (2) an MP4 (H.264, CRF 17, yuv420p, AAC 256k) rendered frame-by-frame from the same HTML. ## 1. Visual language (use filatov.design only as a brand reference, do not recreate the website) - Backgrounds: white #FFFFFF and light grey #F2F2F2. No dark website panel, no dot-grid hero. - Text: #121212, secondary #83858D. Accent: orange #FF4D17 (the only accent colour). - Fonts: Nohemi (Regular 400 / Medium 500) for all display type, tight tracking (−0.02 to −0.04em). Inter for app UI. Geist Mono for small counters. Source Serif 4 for Claude’s reply text. Embed every font as a base64 data URI (Google Fonts fail in headless rendering). - Headline motion: word-by-word masked reveals (each word slides up from inside an overflow-hidden span, exponential ease-out, ~0.55s, 0.08–0.09s stagger). No typing caret. - Persistent brand mark: Daniil’s orange-silhouette avatar tile, 56px, radius 14, top-left at (40,40) from 2.75s on; hidden during the brand wall. ## 2. Assets (supplied) Fonts: Nohemi, Inter, Geist Mono, Source Serif 4. Images: Daniil’s passport-style portrait (glasses, grey background); orange silhouette avatar; collection covers from his prompt library: “Long Legs Studio” (3D character in blue puffer, pink background), “Flat Finance” (orange flat illustration), “Low Angle Summer”, “Blue Void”, “Work Mode”; a red slit-light portrait; a black-and-white photo of Daniil at his desk. Brand logos: 11 monochrome black marks from the filatov.design “Brands I’ve worked with” ticker: Framer, Recraft, Higgsfield, Freepik, Figma, Kittl, Adobe, Lovart, LottieFiles, Relume, Wix Studio. (Spline is excluded because it is the only coloured logo.) Use the supplied files; do not redraw them. ## 3. The cursor An orange (#FF4D17) macOS-style arrow with a white 2px outline and an orange pill label reading “@filatov.design” (white Inter 600, 16px) attached to its lower right. It scales to 0.88 on press and emits a fading orange ring on each click. It is visible ONLY from 3.55s to ~10.4s (the avatar drag and the tool demos), never in the brand wall, the output section or the end card. ## 4. Timeline (film seconds) ### 0.00–2.40 Opening (white) - Centred, two lines, Nohemi 150px: “New creative tools” / “appear every day.” Line 1 words start at 0.28s, line 2 at 0.90s. - Below at y≈690: a row of 21 rounded squares (30px, radius 8, 14px gaps, light grey #ECECEC). The centre square pops in orange at 0.02s with an overshoot; the others scale in from the centre outward (0.028s stagger). - From 0.95s to 1.95s the squares fill orange left→right, accelerating (fill time = 0.95 + 1.0·(i/20)^0.6). Each fill pops to 1.32× and back and emits an expanding orange outline ring. - Under the row, a Geist Mono counter “Day 01” → “Day 21” in #9A9A9A. - 1.98–2.30: headline words exit upward (staggered). 2.02–2.40: all squares slide together and merge into the centre square. ### 2.40–4.68 Avatar - 2.40–2.80: the orange square grows into a 220×286 portrait tile (radius 14) at top centre; the photo fades in over the orange. - 2.85: “Hey, I’m Daniil” (Nohemi 36px, grey) fades up under the photo. 2.95: “I explore what they / make possible.” (Nohemi 124px) word reveals. - 3.55: the cursor enters from bottom-right, presses the photo at 4.05, drags it (slight lift) 4.12–4.68 to the left side of a Framer page; the headline fades out 4.28–4.55. ### 4.64–10.25 Tool demos (white background, app windows on the right) App window: x=760, y=96, 1104×888, radius 18, soft drop shadow. Left column (x=96): stacked Nohemi 112px words “Framer,” / “Recraft,” / “Claude.” Each slides up when its scene starts; the current word is #121212, earlier words fade to #CFCFCF. Under them, a 32px grey caption that changes per scene: “Build the page” / “Generate the missing visual” / “Write the tutorial”. **Framer (4.64–6.74), dark UI, accurate structure:** - Top bar: menu, Insert / Layout / Text / Vector / CMS, centred “filatov.design ⌄”, then 100%, an orange “D” avatar, play icon, grey Invite, blue (#0099FF) Publish. - Left panel: Pages / Layers / Assets tabs with a divider, a layer tree with ▾ chevrons (Desktop › About › Image, Heading; Collections › Card, Card). - Right panel: property sections separated by hairlines, equal-width value fields. - Canvas: a white “Desktop · 1200” frame containing the dropped portrait. - Blue selection box with white handles and a size badge (“200 × 260”). At 5.11 the cursor clicks; the heading “Built by a designer, not a marketer” types in (Nohemi 32) with a grey subline right below. At 5.85 the cursor clicks Insert and a horizontal stack of two cards appears (an orange “Flat Finance” card and an empty grey image placeholder labelled “Long Legs Studio”). At 6.34 the cursor clicks the placeholder. - The selection, Layers highlight and right-panel properties update with each selection. - 6.45–6.74: the placeholder card morphs into the first frame slot of the Recraft canvas (match cut). **Recraft (6.71–8.65), light UI:** - Top bar: “Projects / Long Legs Studio ⌄”, 100%, orange “D” avatar, Export, black Share. - Dotted canvas. A compact floating prompt panel: segmented control Manual / Agentic / Exploration (Exploration active), Model “Recraft V4 Pro”, a grey-filled prompt field, “3:4” and “4 images” chips, black Generate button. No style picker. - 6.88–7.47: the prompt types “Fashion editorial character series. Very long legs, oversized outerwear, bold studio colour, soft shadows.” At 7.79 the cursor clicks Generate (“Generating…”). A 2×2 grid of shimmering skeletons resolves image by image from blur (8.0–8.45): Long Legs Studio, Low Angle Summer, Blue Void, Work Mode. - At 8.33 the cursor grabs the first image and it flies into Claude (match cut). **Claude (8.60–10.25), claude.ai light UI:** - Cream #FAF9F5 background, narrow sidebar, title “Long Legs tutorial script ⌄”, composer with “Reply to Claude…”, “+”, “Opus 5.5 ⌄”, coral #D97757 send button. - The image lands as an attachment above the user bubble “Turn this into a 45-second tutorial. Hook first, then the workflow.” - 8.90–9.97: the reply streams in serif: “Here’s a tight 45-second script.” / “Hook: ‘Stop writing prompts from scratch.’” / 1. Pick a style from the library 2. Swap the `{{variables}}` (inline code) 3. Generate it in Recraft V4 4. Drop it into your Framer page. - Hold briefly. 10.25–10.47: the Claude window scales down and fades. ### 10.20–12.05 Brand wall (fast) - An orange circle wipes out from the centre to fill the frame. White Nohemi 72px heading “Brands I’ve created with” at top-left. - Three rows of white tiles (176×176, radius 28, soft warm shadow), each with an 84px black logo. Rows are offset so the same logo never stacks in a column; the tiles extend past both frame edges. - Tiles burst out of the centre with a slight random rotation and an overshoot scale, staggered by distance from the centre. - The rows drift in alternating directions. A left-to-right scale-pulse wave runs across the tiles at ~11.1s. - ~11.6s: the rows whip off-screen in alternating directions. 11.77–12.02: the orange layer pushes up and out. ### 12.05–15.50 Outputs (light grey #F2F2F2) Left: a small grey Nohemi 48px kicker “Then turn them into”, and under it one big Nohemi 132px phrase at a time, swapped with masked vertical slides: “visual stories,” (12.05) → “workflows,” (12.95) → “and tutorials” (13.85) → “worth trying.” (14.75; the kicker exits). Right: one animated graphic per phrase, entering from the right and leaving to the left with motion blur. 1. **Story card:** a 9:16 card (radius 32) tilted over an orange backing card. Three story progress bars, a “filatov.design” avatar header, “Frame 1 of 3” caption. It advances through the slit-light portrait, Low Angle Summer and Blue Void with a slow zoom. 2. **Workflow graph:** three white node cards in a zigzag: Framer “Build the page” → Recraft “Generate the visual” → Claude “Write the script”. Orange curved connectors draw on, a dot travels along them, and each node’s check turns orange when reached. 3. **Tutorial player:** a 16:9 card with the B&W desk photo. The play button disappears as it starts, the subtitle pill “Stop writing prompts from scratch.” appears, an orange progress bar fills with a “0:00 / 0:45” timer, and four chapter rows tick orange at 0:03 / 0:12 / 0:24 / 0:36. 4. **Three mini cards:** Visual story, Workflow, and an orange Tutorial card. They rise in, then each bookmark icon fills orange with a small bump (15.0, 15.18, 15.36). No cursor here. ### 15.48–17.20 End card (white) - The avatar tile morphs from top-left to the centre (140px, radius 32). - “filatov.design” (Nohemi Medium 196px, −0.04em) slides up from a mask at 15.75. “AI, design and content.” (Nohemi 54px, grey) slides up at 16.4. Hold to the end. ## 5. Sound design (sound effects only, no music or ambient bed) Synthesise the sounds procedurally (e.g. Python/NumPy) so each lands on its frame. Everything should be soft and short; light reverb only. - **Opening:** a soft pop at 0.03; a faint air swell at 0.22; very quiet taps as the squares appear; a soft wooden tap on each day fill, rising slightly in pitch and panned left→right with the row; a gentle whoosh at 2.0. - **Avatar:** a soft swell with a low thump at 2.38 (no bell sounds anywhere). - **Cursor:** a crisp dry mouse click on every press (4.05, 5.11, 5.85, 6.34, 7.79, 8.33), plus softer release clicks at 4.68 and 8.64. - **Transitions:** gentle whooshes at 6.45 (Framer→Recraft), 8.34 (image→Claude), 10.05 (into brands) and 11.76 (brands→outputs); a muted low impact at 10.32 as the orange fills the frame. - **Outputs:** a very soft low thock on each big phrase (12.05, 12.95, 13.85, 14.75); a whoosh at 15.45. - **End:** a warm F-major chord on soft felt-piano keys at 15.76, fading out. - **Mix:** peaks around −1 dBFS; integrated loudness around −28 LUFS (it’s sparse by design). ## 6. Build method - One 1920×1080 stage scaled to fit the viewport. A deterministic render(t) function sets every element from time t, plus window.seek(t) for frame capture. - Render with headless Chromium at 30fps by seeking each frame and taking a screenshot. Encode with ffmpeg and mux the WAV. - In the HTML, the audio is a base64 MP3 that is muted until the viewer turns sound on, and stays synced to the timeline when playing, scrubbing and looping. - Respect prefers-reduced-motion by showing the end card as a still.

Create a distinctive 18-20 second horizontal motion film about Daniil Filatov and how he turns new creative technology into compelling stories, practical workflows and useful tutorials. Feature Framer, Recraft, Claude and Codex as tools within his creative process. Use recognizable, accurate UI elements rather than fictional product interface. Visit [www.filatov.design](https://www.filatov.design) to understand Daniil's branding, fonts, colors, layouts and overall visual identity, then apply this visual language throughout the film. Build one cohesive story: "New creative tools appear every day. I explore what they make possible. Framer, Recraft, Claude, Codex. Then turn them into visual stories, workflows, and tutorials worth trying. filatov.deisgn — AI, design and content. Use bold editorial typography, authentic UI interactions, smooth match cuts, and deliberate pacing. Avoid generic dashboards, logo montages, AI cliches, and template-style effects.