🎨 Animation styles you can build with Claude

Original: https://ruby-cotija-fb5.notion.site/3fa28691eca3814ebb34c73a7cc261bf

I made every one of these styles myself. I wanted styles you'd actually use in your videos, not the bullsh*t ones you see all over the internet that you'd never touch.

By Shaan Johari. New styles drop on my Instagram first: @viashaan

animation-styles.gif

Every style from my reels as a one-page recipe: the look (colours with hex codes, free fonts, layout, texture), how it moves, what breaks it, and a ready prompt you paste into Claude with your own words or product. This page keeps growing: each new set of styles lands at the top.


How to use a card

  1. Pick the style that fits your video, not the one you like most. Each card says what it suits.
  2. Copy the card's "Paste this into Claude" prompt. Swap [YOUR WORDS] for your own line, product or brand name.
  3. Paste it into Claude Code. If you have Remotion set up, it renders straight to video. If not, ask Claude to set it up first ("set up Remotion in this folder and ask me before installing anything").
  4. Give notes on the first version using the card's "How it moves" and "Never" sections. They're the words that get you the fix.
  5. Using a style a lot? Save it as a slash command. Make a file at .claude/commands/map-route.md in your project, paste the prompt in and put $ARGUMENTS where your words go. Then type /map-route plus your words in Claude Code.

Part 2: styles you'd actually use (new)

Tap a style to open its card.

1. Maps: 3D Map Route

map-route.gif

A clean 3D city in the style of a phone maps app. The camera lifts off from behind a blue location dot while the route draws itself through the streets, a red pin drops on the destination and the trip card pops up from the bottom. It turns "here's where it is" into one satisfying shot. Use it for travel recaps, "where we went" reels, store or venue locations, delivery and logistics explainers.

The look

  • Palette: soft grey-white city (buildings #F7F7F5, taller ones #EEF0F3, land #ECEAE4, streets #FBFBFA), pale haze #E4E9EE, water #8EC6EE, parks #C9E5BD with round trees #9FCF8E, one pale yellow main road #FFE3A3. The route is blue #1A73E8 on a white casing. The pin is red #EA4335 with a white rim. The trip card is white with near-black #121417 type, grey #6B737C details, a green #1F9D55 "Fastest route" and a blue Go button.
  • Type: Inter throughout. Place labels in SemiBold grey with a soft white halo. The destination label in Bold red. On the card, the minutes in ExtraBold with tight tracking and fixed-width numbers, then a small Medium line under it.
  • Layout: the city fills the frame at a high three-quarter angle once settled. The route runs from the bottom left up to the pin in the top right, crossing the river. Three place labels sit in open ground, never on the route. The trip card is a wide rounded sheet just above the bottom fifth, which stays calm.
  • Texture: plain matte blocks under one soft sun, so every building casts a soft shadow, with a gentle darkening where walls meet the ground. Distance fades into haze, and a pale sky shows only while the camera is low.

How it moves

  • Frame one is already the city: a low, close view behind the blue dot, looking up the street, with a short stub of route ahead and a soft pulse leaving the dot.
  • The camera rises and backs away first, then pans and narrows onto the destination, landing on the high view with a long, soft ease. No orbiting, no wobble. The dot and the route keep a near-constant size on screen, the way a maps app draws them.
  • The route draws along the streets, turning the corners with rounded joins, and slows as it reaches the destination.
  • The pin falls in, squashes slightly on impact and settles; its label snaps in with a small overshoot. The trip card springs up from below with about 10% overshoot, and the minutes roll down 14, 13, 12 like an odometer. Then everything holds for the last second.

Never

  • Real brands, real cities or real map data. Invented streets and place names only.
  • Spin the camera round the city or bounce it. Only the pin, labels and card overshoot.
  • Fade labels or the card on. They pop, drop or slide.
  • Dark mode, neon, glowing routes or a busy colour palette. The city stays pale so the blue route and red pin do the talking.

Paste this into Claude

Build me a 5-second, 9:16 animation (1080x1920, 30 fps) in Remotion: a real 3D phone maps app shot. Make an invented city of low pale grey blocks (one to three storeys, so nothing hides the route) on a street grid, with a river, a few parks with round trees and one pale yellow main road, soft sun shadows and distant haze. Start low behind a small blue location dot with a white rim, looking up the street with the city ahead. While the camera rises, backs away and settles on a high view looking down at about 55 degrees, a thick blue route with a white casing draws along the streets to the destination, drawn on top so buildings never hide it. Add three small place labels in open ground, off the route. A red pin drops in with a small squash, then the label "[YOUR PLACE]" snaps in. A white trip card springs up with "[MINUTES] min", "[DISTANCE]" and a blue Go button, and the minutes count down like an odometer to the final number. Everything springs or eases, nothing fades, and it holds for the last second.

2. Product: Exploded Teardown

teardown.gif

A real 3D product opens into its layers one beat at a time, and each part gets labelled as it lands. It suits any video where what's inside is the story, and every beat is a natural spot for a click sound. Use it for product launches, tech reviews, "what's inside" explainers.

The look

  • Palette: graphite ground with a soft lift behind the product (#2A2D33 in the middle, falling to #0A0A0C at the edges). Type is off-white #ECEEF1 with muted grey specs #A3A8B0. One orange accent, #FF5A2A, for the part numbers, the title bar and one standout part. The product keeps its own believable materials (here cream and grey keycaps, black switches with red stems, dark aluminium, a green circuit board, brass posts).
  • Type: IBM Plex Sans SemiBold for the part names, IBM Plex Sans Bold for the title, IBM Plex Mono for the numbers and the one-line specs. The title is short, in sentence case ("21 keys, opened"), with a small mono caps spec line under it.
  • Layout: the product sits left of centre at a high three-quarter angle, its layers stacked with even gaps. A label column runs down the right. Each label has an orange two-digit number, the part name and one short spec, and a thin grey leader line joins it to a white dot on the part's edge. The title block sits bottom left. The bottom fifth stays empty.
  • Texture: soft studio light with real shadows falling between the layers and a little sheen on the metal. A faint grain in the background keeps the glow from banding. No outlines, no glow on the type.

How it moves

  • Frame one shows the product fully assembled, big and centred. In the first second the camera pulls back and slides it left to make room for the labels.
  • The layers lift off from the top down, one every third of a second. Each lift is a fast spring that overshoots about 10% and settles before the next one finishes, with real motion blur while it moves fast. Each layer gets its own clean beat.
  • As each layer arrives, its leader line draws out from the dot on the part, and the label rises out of a mask with a small overshoot.
  • The camera orbits about 10 degrees across the whole shot and slows to rest at the end.
  • The title builds last: the orange bar stretches out, the words rise one after another, then the spec line. It holds for over a second.

Never

  • Fade parts or labels on. Parts spring, lines draw and text rises.
  • Move every layer at once, or space the beats unevenly. The steady rhythm is what makes it satisfying.
  • Cross the leader lines, or let a label sit on top of the product.
  • Fake the 3D with flat cut-outs, or add glows, lens flares or a busy background.

Paste this into Claude

Build me a 5-second, 9:16 exploded-view teardown (1080x1920, 30 fps) in Remotion, using a real 3D scene. The product is [YOUR PRODUCT], modelled as 4 to 6 simple layers with believable materials and lit like a studio shot with soft shadows, on a dark graphite background with a soft glow (dither it so it never bands). Frame one shows it assembled and centred. The camera pulls back and left while the layers lift apart from the top down, one every 10 frames, each on a fast spring with about 10% overshoot and real motion blur. As each layer lands, a thin grey leader line draws from a dot on its edge to a label on the right: an orange two-digit number, the part name in IBM Plex Sans and a short spec in IBM Plex Mono. The camera orbits about 10 degrees overall. Last, "[YOUR TITLE]" builds bottom left under a short orange bar. No fades. Keep the bottom fifth empty.

3. Title cards: Ink Wash

ink-wash.gif

A Chinese and Japanese ink-painting landscape that paints itself onto rice paper, with a vertical title and a red seal. It suits a calm, story-led opening that should feel crafted rather than digital. Use it for title and chapter cards for travel, food or culture stories.

The look

  • Palette:
    • rice paper #EEEAE0
    • ink #1B1A18
    • one seal red #B8352A
    • The washes are the same black ink at low strength, never a separate grey. Red appears only on the sun, the seal and a couple of tiny accents, such as a bullet square or a sash on the figure.
  • Type:
    • The title is Cormorant SC (semibold small caps), tracked wide, about a third of its size, and set vertically top to bottom in two columns.
    • One quiet line in Cormorant Garamond italic, with a small red square in front of it.
    • A small-caps chapter line in warm grey.
  • Layout:
    • Three mountain ranges stack from pale to dark, and each fades downward into a band of mist.
    • One side holds a dark dry-brush cliff with a pine and a tiny figure. A small red sun sits just above the far peaks, and a small boat floats on a river of thin broken strokes.
    • The title sits in the empty sky at the top left, with the square seal under it.
    • At least half the frame is empty paper, and the bottom fifth stays calm.
  • Texture:
    • Paper fibre and faint grain over everything, including the ink.
    • Ridge lines break up like a dry brush.
    • The sun is slightly mottled with a soft edge.

How it moves

  • Ink spreads, it never fades.
    • Washes bleed in behind a ragged, noisy front: left to right for the mountains, and downward from the ridge for the cliff.
    • A darker wet band trails just behind the front, then dries back to the final tone.
  • Strokes grow along their own path, fast then easing out like a brush. The cliff's outline comes first, then dozens of short slanted texture strokes, then the pine's trunk, its branch, and needles flicking out of each cluster.
  • The red sun blooms out from its centre with a lumpy, wet edge. It overshoots about 10% and settles soft.
  • Text and seal:
    • Text is brushed on with a soft, uneven wipe in reading order.
    • The seal stamps last. It lands at 112% with a few degrees of tilt and settles.
  • Frame one already shows paper, pale far peaks and the first ink spreading.
    • Mist and the boat drift slowly the whole time.
    • The finished painting holds for the last second.

Never

  • Opacity fades or crossfades as the reveal. Ink always arrives with an edge.
  • Clean digital gradients, hard vector shapes, drop shadows or glow.
  • Red used as more than a spot colour, or any second accent colour.
  • Text set horizontally across the middle of the landscape.

Paste this into Claude

Build me a 5-second, 9:16 animation (1080x1920, 30 fps) in Remotion: a Chinese ink-wash landscape that paints itself onto warm rice paper (#EEEAE0) in black ink (#1B1A18), with one red (#B8352A) for a small sun (about 8% of the frame width) just above the far peaks, and a square seal. Draw it procedurally on a canvas, redrawn from the frame number:
- three mountain ranges, each paler with distance, fading into mist
- a dry-brush cliff with a pine
- a small boat on a river of thin strokes

Ink must spread, never fade. Reveal washes behind a ragged, noisy edge with a darker wet band behind it, and grow every stroke along its path. Bloom the sun from its centre with a wet edge and a slight overshoot.

Brush on "[YOUR TITLE]" vertically in wide-tracked small caps in the empty sky, with "[YOUR SUBTITLE]" in italic beside it. Stamp the seal last and hold for a second. Keep it light: at least half the frame is empty paper, the river fills the lower third, and the bottom fifth stays calm.

4. Explainers: Paper Desk

paper-desk.gif

A top-down "evidence on the desk" look, like the documentary explainers Johnny Harris made famous. Printed sheets land on a green cutting mat, then get circled in red marker and highlighted by hand. It suits any video that makes a case: a stat, a quote, a finding. Use it for explainers and commentary: lay out the evidence on a desk and mark it up.

The look

  • Palette:
    • cutting mat green #2D684C (a little lighter in the middle, #327354, falling to #245A40 at the edges)
    • mat grid lines in pale cream #ECE8B4 at low strength
    • paper #F4F2EC, print black #151515, label grey #55524B
    • one marker red #D4231B, one highlighter yellow #FFE024
    • masking tape #E6D9B4, slightly see-through
  • Type:
    • The headline on the sheet is Libre Caslon Text Bold, sentence case. Body copy is Libre Caslon Text Regular.
    • Small figure labels ("FIG. 2 · ...") are IBM Plex Mono caps, tracked wide.
    • The cut-out label is Inter Tight ExtraBold, tight letter spacing, black on white card.
    • The handwriting is Permanent Marker.
  • Layout:
    • Top-down, straight over the desk. Two printed sheets at slight angles (about -3 and +3 degrees) overlap a little. A cut-out label sits across the edge of one, taped down at two corners.
    • The evidence fills the middle of the frame. The mat fills everything else, and the bottom fifth is empty mat.
  • Texture:
    • Paper has grain, fibres and a few toner specks.
    • Every sheet casts two shadows: a tight dark contact line and a soft drop shadow down and to the right.
    • The mat has a fine grid, ruler numbers on its edges, scuffs and a few knife grooves.
    • Light film grain and a gentle vignette over the whole frame, so it reads as filmed rather than drawn.

How it moves

  • Paper has height and weight. Each sheet slides in from off-frame lifted: a bit bigger, with its shadow far away and soft. It falls faster as it drops and lands with a thud. The shadow snaps tight, it makes a tiny hop, skids a few pixels and stops. Its rotation overshoots by about 10% and settles.
  • Tape slaps on from above the lens, shrinking from about 135% to full size in a fifth of a second, with a tiny squash on impact.
  • The marker is applied by hand. The circle grows along its path, the note writes on letter by letter, and the arrow is a shaft and then one V stroke. Ink sits a little darker where the pen starts and stops.
  • The highlighter sweeps line by line with a slanted chisel edge, quick in the middle and easing at each end.
  • The camera is a slow handheld push: about 7% in, with a one-degree roll, a little low-frequency drift, and a small jolt each time something lands. Everything is still for the last second.

Never

  • Clean flat vector paper with no grain or shadow.
  • Fading anything on. Paper lands, tape slaps and ink draws.
  • A floaty camera: slow sine-wave wobble, orbiting, or big moves.
  • More colour than one red and one yellow. Everything else is print black and grey.

Paste this into Claude

Build me a 5-second, 9:16 animation (1080x1920, 30 fps) in Remotion in a Johnny Harris style "evidence on the desk" look, shot top-down over a green cutting mat (#2D684C) with a fine cream grid. On it:
- a printed chart sheet showing [MY STAT OR CHART]
- a printed quote sheet with [MY QUOTE], in Libre Caslon Text on off-white paper (#F4F2EC) with grain and real two-layer shadows
- a white cut-out label reading "[MY LABEL]" in Inter Tight ExtraBold

Give every piece of paper a height. It slides in from off-frame lifted, then falls and lands with weight: the shadow snaps tight, it makes a tiny hop, and its rotation overshoots and settles. Slap masking tape over the corners. Then draw a red marker circle around the key point, write "[MY NOTE]" letter by letter in Permanent Marker, draw an arrow, and sweep a yellow highlighter across the key sentence line by line. Add a slow handheld push-in with a tiny jolt on each landing, light film grain, and a one-second hold at the end.

5. News and commentary: Headline Highlight

headline.gif

The cut-to-the-article shot that commentary and documentary channels live on. A news story flies in on a 3D tilt over a wall of blurred articles, the camera pushes in on the paragraph, a lime highlighter sweeps the line that matters, and a quoted post pops in as the receipt. It suits any video that backs a claim with a source. Use it for news commentary, documentaries, "receipts" in business reels.

The look

  • Palette:
    • backdrop near-black #15181C, with defocused article cards in pale grey #E9EAEC and muted photo blocks
    • article paper #FCFCFA, headline ink #16181B, body text #26292D, small grey #6A6F76, thin rules #D9DBDE
    • one news red #C1272D for the section label only
    • highlighter lime #C9F52A, with a deeper #B8E81A where the second pass laid more ink
    • the post card is white with one blue verified tick #2F7BF5
  • Type:
    • The masthead is Newsreader ExtraBold at its display optical size, tightly spaced. The headline is Newsreader Bold, sentence case, three short lines.
    • The body is Newsreader Regular with a big bold drop cap.
    • Everything that is interface (date line, section nav, byline, the post) is Inter.
  • Layout:
    • One article card fills the middle of the frame, tilted back and turned slightly, like a page held up to the camera. Behind it, a grid of other articles, heavily out of focus and slightly rotated.
    • The post card overlaps the bottom right corner of the article, tilted a different way so it reads as a separate layer in front.
    • Text stays in the middle; the bottom fifth is only blurred background.
  • Texture:
    • The highlighter looks like real ink: rough edges, faint streaks along the stroke, a slanted chisel end, and a darker blob where the pen first touched. It is multiplied over the text, so the letters stay black.
    • Deep, soft drop shadows under the article and the post, and a dark vignette around the edges.

How it moves

  • The background is never still. The blurred cards drift slowly from the first frame and move less than the article when the camera moves, so there is depth.
  • The article flies in with weight. It comes up from the bottom corner, tilted far back, slightly soft and motion-blurred, as if it passed close to the lens. It arrives on a heavy spring, then its tilt swings a few degrees past rest and settles back over about a second.
  • The camera pushes in like a dolly, not a zoom. It starts framed on the whole article and travels toward the key paragraph: slow to start, a long smooth glide, a gentle landing. Never a straight linear zoom.
  • The highlighter sweeps line by line, left to right, quick to start and easing off the end of each line, with a short pause as the hand moves to the next line. What is already inked never moves.
  • The post pops in with an overshoot about 0.4 s after the last line is highlighted, its tilt landing a beat after its scale. Then everything holds for over a second.

Never

  • A flat, front-on screenshot with a yellow box drawn over it.
  • A perfect rectangle highlight with clean edges and no blend.
  • Fading the article or the post on, or a linear zoom.
  • Real news brands, real people, or real logos.

Paste this into Claude

Build me a 5-second, 9:16 animation (1080x1920, 30 fps) in Remotion of a news article being highlighted, like the "receipts" shots in commentary videos. Invent a newspaper called [MY MASTHEAD] with the headline "[MY HEADLINE]" and the paragraph "[MY PARAGRAPH]". Set it in Newsreader on off-white paper (#FCFCFA), Inter for the date, nav and byline, over a near-black wall of blurred, drifting article cards.

Fly the article in from the bottom corner on a 3D tilt with light motion blur, landing on a heavy spring so its tilt sways past rest and settles. Push the camera toward the paragraph like a dolly: slow start, long glide, soft landing. Sweep a lime highlighter (#C9F52A) across "[MY KEY SENTENCE]" line by line, with rough edges, faint streaks, a chisel end and multiply blending. About 0.4 s later, pop in a quoted post saying "[MY POST]" with an overshoot. Hold the last second.

6. Finance and data: Stat Chart

stat-chart.gif

The terminal-dark money graphic from finance documentaries and business news: one huge number, one line chart, one moment that changed everything. The number counts up as the line draws, and the line turns orange at the event that made the difference. It suits any video that turns a result into a story. Use it for finance and business explainers, growth recaps, client results.

The look

  • Palette:
    • near-black background #0A0B0D, faint white grid lines at about 7% opacity
    • white #F4F5F6 for the number and headlines, grey #8B9098 for labels, dark grey #4A4F57 for the source line
    • the line is soft white #E9EBEE before the event and one hot orange #FF5B1F after it. Orange is the only colour in the frame.
  • Type:
    • The hero number is Inter Tight ExtraBold, huge and tightly spaced, with tabular figures so every digit is the same width. The dollar sign is small and raised, the unit letter is two thirds size.
    • Labels and the callout are Inter Tight Medium and SemiBold, sentence case.
    • Everything that is data (dates, axis values, the header line, the price tag, the source) is IBM Plex Mono in caps with a little letter spacing.
  • Layout:
    • A thin header row on top: an invented company's small logo and name on the left, the metric's fine print on the right, a hairline under it.
    • Below it, a one-line label, then the number filling the top half of the frame.
    • Under the number, an orange delta chip with a triangle and a short grey line of text, and a live date on the right.
    • The chart fills the bottom half: year ticks along the base, values on the right, a hatched strip for the months not reported yet, and one callout with a thin leader line pointing at the event.
  • Texture: none. Flat black, crisp lines, a faint white fill under the line that fades toward the bottom.

How it moves

  • The number is the line. It always shows the value under the line's tip, so it creeps while the line is flat, takes off at the event, and slows right down as it lands on the final figure. Tabular figures, no rolling or bouncing digits.
  • The line draws left to right with its head leading: a small dot rides the tip, the fill follows just behind it, and a faint dashed cursor and the date in the corner scrub along with it. It is already moving on the first frame, slows a touch into the event, speeds up the rise, then eases gently into the last month.
  • The colour switch happens exactly at the event. The dot swells for a moment and turns orange, the line after that point is orange and thicker, a ring marker pops onto the event, the leader line draws up, and the callout's three lines snap up into place one after another.
  • The landing: when the count reaches its final value the delta chip pops with a small overshoot. When the line reaches the last month, a ring pings around the end dot and the value tag slides out of the axis. Then everything holds for well over a second.

Never

  • A counter that rolls, jiggles in width, or overshoots past the real number.
  • A rainbow of series, gradients on the line, or a glow behind it.
  • The orange appearing anywhere before the event it stands for.
  • Real companies, real logos, or numbers that look like real filings.

Paste this into Claude

Build me a 5-second, 9:16 animation (1080x1920, 30 fps) in Remotion of a business-documentary stat graphic. Use my company [MY COMPANY], my metric "[MY METRIC LABEL]", and my data: [MY MONTHLY VALUES], ending on [MY FINAL NUMBER]. The key event is "[MY EVENT]" in [MONTH YEAR], with the line "[ONE-LINE IMPACT]" and a delta chip of "[MY % CHANGE]".

Near-black background (#0A0B0D), white Inter Tight, data labels in IBM Plex Mono caps, one accent: orange #FF5B1F. A huge tabular-figure counter shows the value under the line's tip as the line draws left to right, a small dot leading and the fill following. At the event the line turns orange, a ring marker pops on, a leader line draws up and the callout snaps in. When the count lands, pop the chip with a small overshoot, then ping the end point and hold the last second.

7. Product launches: App Mockup

app-mockup.gif

The launch-film product shot: one phone running a real-looking app screen, turning into place on a soft studio backdrop, with a few floating UI cards popping out around it. It suits any video that needs to show a product as if it were already a polished, shipped app. Use it for app launches, SaaS ads, showing a client's product.

The look

  • Palette:
    • soft blue-grey studio backdrop, #dfe6ee at the top fading to #cfd8e2, with a lighter glow #f4f7fa behind the phone and a slightly darker floor
    • near-black ink #0e1116 for numbers and titles, grey #7a818c for labels
    • one product accent, green #0e9f6e, with its pale tint #e3f6ee for chips. Everything else is white.
  • Type: Plus Jakarta Sans everywhere. ExtraBold for the big numbers with tabular figures, Bold for titles, Medium for body lines, sentence case, slightly tight letter spacing on the numbers.
  • Layout:
    • One phone in the middle at a three-quarter angle: tilted back a little, turned about 20 degrees, rolled about 3 degrees, with visible thickness and a metal edge.
    • Its screen is a real app built as UI, not a screenshot: greeting, a big balance, a delta chip, a line chart with a dark value tag, a tab selector, three activity rows and a tab bar.
    • Three white floating cards at different depths: a notification across the top-left corner, a stat card with a mini bar chart on the right edge, a progress-ring card bottom-left. Each overlaps the phone a little and tilts with it.
  • Texture: a very fine static grain over the backdrop, a soft floor shadow under the phone, layered soft shadows under the cards, a faint light band across the glass.

How it moves

  • The phone has weight. It is already in frame on the first frame, turned steeply, and swings round to its final angle on a heavy spring: a slight overshoot of a few degrees, then it settles. Its floor shadow widens as it turns to face the camera, and a glint runs along the metal edge mid-turn.
  • The screen builds as it lands. The tab pill slides over, the balance counts up on fixed-width digits and eases into the exact figure, the chart draws left to right with a dot riding its tip, the delta chip pops as the count lands, and the activity rows rise in one after another from behind their own edges.
  • Every card is a morph and a pop, never a fade. The notification pops out of the phone's camera pill and unfolds into the card. The stat card grows out of its own percentage chip, then its bars spring up, the accent bar last. The progress card starts as a white disc around its ring and stretches into the card while the ring sweeps round.
  • One card at a time, about half a second apart, each overshooting about 10% and settling. Then everything floats: a slow camera drift where the nearer cards move more than the phone, plus a gentle bob. Hold the finished frame for the last second.

Never

  • A flat screenshot pasted on a phone, or a phone that slides in at constant speed with no shadow.
  • Cards that fade in, or all arrive at once.
  • Real brand names, a real phone maker's logo, or a dark backdrop with neon glows.
  • Digits that change width while they count.

Paste this into Claude

Build me a 5-second, 9:16 animation (1080x1920, 30 fps) in Remotion of a premium app-launch shot for [MY APP NAME]. One phone in CSS 3D on a soft blue-grey backdrop with a floor shadow, running my app's home screen built as real UI: [MY MAIN NUMBER], a small chart and three list rows: [MY 3 ROWS]. Plus Jakarta Sans, near-black ink, one accent [MY BRAND COLOUR], white cards.

On frame 0 the phone is already in frame at a steep angle and springs round to a three-quarter view with weight and a slight overshoot. The screen builds as it lands: the number counts up on tabular figures, the chart draws, the rows rise in. Then three floating cards pop in one at a time, each morphing out of a pill, chip or disc, never fading: [CARD 1], [CARD 2], [CARD 3]. Then a gentle parallax float; hold the last second.

8. Tutorials: Screen-Recording Zoom

screen-zoom.gif

The screen-recording zoom from polished tutorials and product walkthroughs: the whole app window floats on a soft backdrop, then the camera glides in on the exact button that matters while the cursor travels to it and clicks. It turns any "click here, then here" into something that feels produced rather than recorded. Use it for tutorials, SaaS demos, "how I did it" tech reels.

The look

  • Palette:
    • backdrop: a pale mint wash, #E3EFE9 glowing in the top left, #B8D7D6 on the right, settling to #9CC4BD at the bottom, with a fine film grain over it
    • the app is dark: window #1B1C20, title bar #212227, panels #26272C to #2A2B31, hairlines #33353B
    • text is off-white #ECEEF1 for values and soft grey #9A9FA8 for labels
    • one accent: a blue primary button #3D7BFA (a slight top-to-bottom gradient), plus a red playhead #FF5A4E in the timeline
  • Type:
    • Inter for the whole interface: SemiBold for titles, buttons and values, Medium for labels, sentence case.
    • JetBrains Mono for timecodes and file sizes only.
    • The step pill is Inter SemiBold, near-black on a white pill, with the step number in a black circle.
  • Layout:
    • Wide shot: the full window centred with plenty of backdrop around it, rounded corners and a deep, soft shadow.
    • Close shot: the window runs off the left and bottom edges, the target button sits in the lower right third, and the window's top right corner still shows the backdrop so you never lose the sense of a screen.
    • The step pill sits in the lower middle of the frame, over the app, above the bottom fifth.
  • Texture: grain on the backdrop only. The interface itself is clean and pin sharp.

How it moves

  • Frame one is the wide shot. The whole window and the cursor are already there, so it reads before anything moves.
  • The cursor leads and the camera follows. The cursor glides along a gentle curve (never a straight line) and eases into the button. The camera starts a beat later and zooms about 2x toward the button on one soft spring with no wobble, landing a little after the cursor does.
  • Real motion blur on the move. The zoom smears outward from the button, the edges blur most, and the button itself stays sharp. The moving cursor streaks too. Everything is pin sharp again at rest, and the text is drawn at full resolution, never a stretched screenshot.
  • The click is a small physical moment. The button darkens as the cursor arrives, the cursor dips, the button presses to 95% and springs back, and a white ring springs out from the click point with a faint ripple travelling past it.
  • The step pill pops in last, scaling up from small with a slight overshoot, its number popping a beat after it. Then the frame holds for well over a second.

Never

  • Zooming a flat screenshot, so the text goes soft at the end of the zoom.
  • Linear zooms or cursors that travel in straight lines at constant speed.
  • A zoom that bounces or overshoots, or several small zooms fighting each other.
  • Real app names, real logos, or a real person's files on screen.

Paste this into Claude

Build me a 5-second, 9:16 animation (1080x1920, 30 fps) in Remotion in the style of a polished screen-recording tutorial. Recreate this screen from my product as a real, crisp interface (not a screenshot): [DESCRIBE MY APP SCREEN]. The step is "[STEP NUMBER] · [MY STEP, e.g. Click Publish]" and the target is the [MY BUTTON] button.

Dark app window with a deep soft shadow, floating on a pale mint backdrop with fine grain. Inter for the interface, one blue accent for the primary button. Frame one shows the whole window. The cursor glides on a gentle curve to the button while the camera zooms about 2x toward it on one smooth spring, with real motion blur during the move and sharp text at rest. On the click, the button presses to 95%, and a white ring springs out. Then a white step pill pops in and the shot holds.

9. Stories: Timeline

timeline.gif

A story told as a walk along the years: a timeline painted on a floor in perspective, with each milestone standing up on its own little card as the line fills toward today. It suits any video that has to cover years in seconds and land on "where we are now". Use it for company stories, "my journey" reels, history explainers.

The look

  • Palette:
    • cool off-white floor #F5F6F8 shading down to #E3E6EB, with a faint grey grid that fades into haze toward the top
    • ink #0E1116 for the headline, card titles and the years already lived; grey #6A717C for the small lines; light grey #B7BEC8 for the stretch of line still to come
    • one electric blue #2442F5 for the filled line, the ticks behind the playhead, the playhead itself and the NOW card. Blue is the only colour.
  • Type:
    • Schibsted Grotesk: ExtraBold and tightly spaced for the headline and the big years painted on the floor, Bold for card titles, Medium for the one-line details.
    • JetBrains Mono SemiBold with a little letter spacing for the kicker line and the year on each card.
  • Layout:
    • A headline block up top: a tiny logo, a mono kicker ("COMPANY · 2016 TO NOW"), then one line of headline with the payoff phrase in blue.
    • Below it the floor. The line runs from the far top left down to the near bottom middle, with ticks across it and the years painted flat on the floor to its left. Key years are big and black, the in-between years smaller and grey, future years pale.
    • Each milestone is a white card standing on a thin stem from its point on the line: a square thumbnail, the year, a short title, one line. The cards cascade down and to the right, nearer ones slightly bigger.
    • The latest milestone is the NOW card: solid blue, the nearest and biggest, with a small black "NOW" pill on its corner. The playhead dot with a soft ring sits on the line just past it.
  • Texture: none. Flat floor, crisp lines, soft layered card shadows.

How it moves

  • The camera walks the years. It opens low and close on the first years, turned a little down the line, then travels toward now in one long eased move: it cranes up, pulls back and swings square, and lands on the final framing about a second after the playhead stops. It never crawls at a steady speed.
  • The blue fill and its playhead lead. They are already moving on the first frame, speed up through the middle years and brake into now. Each tick turns blue and its year darkens the moment the playhead crosses it.
  • Each milestone is one crisp beat. As the playhead passes its year, the base dot pops, the stem shoots up, and the card hinges up off the stem like a pop-up book, overshooting about 10% before it settles. Leave a clear gap between milestones so a click can sit on each.
  • The NOW card lands last with a bit more weight, its pill snaps on a beat later, one ring pings out from the playhead, and then everything holds for the last second.

Never

  • Cards that fade in flat, or a line that fills at one constant speed.
  • A second accent colour, gradients on the cards, or a glow on the line.
  • A camera still drifting at the end, or a NOW card that lands before the line reaches it.
  • Real company names, logos or product photos.

Paste this into Claude

Build me a 5-second, 9:16 animation (1080x1920, 30 fps) in Remotion: a 3D-floor timeline telling [MY STORY]. Headline: "[MY HEADLINE]". Kicker: "[MY NAME] · [START YEAR] TO NOW". Milestones (3 or 4): [YEAR, SHORT TITLE, ONE LINE]. The last one is the NOW card.

Look: an off-white perspective floor with a faint grid, ink #0E1116, one blue accent #2442F5, Schibsted Grotesk with JetBrains Mono labels. The line runs diagonally toward the viewer, years painted flat on the floor beside it. Milestones are white thumbnail cards on thin stems; the last is solid blue with a black "NOW" pill.

Motion: the camera starts low near the first year and travels toward now on one eased move. The blue fill and its playhead lead, and each card hinges up with a small overshoot as the playhead passes its year. The NOW card lands last, then hold the final second.

Part 1 styles

Tap a style to open its card.

1. Glowing 2D motion: Glow Orb

glow-orb.gif

A calm, minimal 2D look: one breathing light, a few drifting outline circles and one short line of type. Suits mindset, wellness, intros and any quiet one-line statement.

The look

  • Palette: near-black ground #070304, deep rose halo #531829 falling off to #13050B, orb pink #F696DE into white #FBF6F8, lines and type #F6EFF2.
  • Type: one geometric sans (Outfit, Medium 500), sentence case with a full stop, about 6% of frame height, tracking slightly tight (around -0.03em). One line only.
  • Layout: the orb sits a little above centre with the line of type under it, both centred. Six or seven thin outline circles scattered toward the edges at different sizes, some cut by the frame. The bottom fifth stays empty.
  • Texture: none, apart from a very fine moving grain inside the glow so the soft falloff never bands.

How it moves

  • Frame one already shows a small lit orb. It winds back a touch, then takes one deep breath on a spring that overshoots about 10% and settles. After that it breathes slowly (2-3% over three seconds), with the light lagging the body slightly.
  • The circles drift with parallax: a slow push toward the orb, nearer circles bigger, brighter and faster, far ones thin and dim. The push bleeds off its speed over a long tail.
  • The type rises letter by letter out of an invisible mask, about 2.5 frames apart, each letter overshooting a little while the letter spacing tightens into place. Settled by about 2.5 seconds, then it holds.
  • One second beat inside the hold: the orb exhales and its rim lifts off as a single thin ring that springs out to about twice its size and stays there as an orbit.

Never

  • Fade anything in or out. Things rise, spring, drift or detach.
  • Flood the frame with pink. The corners stay near-black; the glow belongs to the orb.
  • Particles, sparkles, lens flares or a second accent colour.
  • More than one line of type, or a heavy or rounded font.

Paste this into Claude

Build me a 5-second, 9:16 animation (1080x1920, 30 fps) in Remotion: calm, minimal 2D. Near-black warm ground. One glowing orb above centre: pink fading to white, a thin bright rim, a deep rose halo that dies out before the corners. Render the glow with dither so it never bands. Six or seven thin white outline circles at different depths drift with parallax as the view pushes gently toward the orb. Under the orb, one line in a clean geometric sans: "[YOUR LINE]". Motion: the orb takes one deep breath on a spring with about 10% overshoot, then breathes slowly. The text rises letter by letter out of a mask while its spacing tightens. Near the end the orb exhales and its rim lifts off as one ring that settles into an orbit. No fades, no particles, keep the bottom fifth empty.

2. Glassmorphism: Frosted Glass UI

frosted-glass.gif

A soft, out-of-focus photo with a frosted-glass interface floating over it, typing and choosing. Suits app or tool walkthroughs, "how I'd do X" explainers and any idea framed as a search.

The look

  • Palette: dusk teal #1F5A6E, deep sky #0E2A3D, coral glow #FF8A5C, rose #E3558A, off-white text #F8F9FB. One cool accent, only on the text caret: #9FD8FF.
  • Type: Plus Jakarta Sans, sentence case. Query at 46px medium, row titles 41px semibold with slightly tight tracking, small labels 29px at about 65% opacity. A faint soft shadow under the text so it holds at least 4.5:1 on the glass.
  • Layout: one wide glass search bar (about 85% of the frame width, corners about 48px) with a results panel of the same width and radius 22px below it. Every row sits on one left gutter: a small glass icon tile, then title over label. The highlight is inset 14px with a radius 14px smaller than the panel. The group sits mid-frame; the bottom fifth is only dark, blurred background.
  • Texture: the background is a defocused dusk photo built from soft colour fields: teal-to-navy sky, a coral glow on the horizon, a cluster of small out-of-focus city lights along it, a few big soft bokeh discs, darker blurred corners like a lens. Fine grain over everything. The glass is a much more blurred copy of that same photo, slightly smoked and desaturated, with a bright rim strongest at the top-left, a faint inner glow at the edges and a soft drop shadow.

How it moves

  • Frame one already shows the glass bar on the photo, settling from about 90% with a soft overshoot.
  • Typing feels human: about 1.3 frames per character with small jitter and a beat between words. The caret is solid while typing and blinks when idle.
  • When the query is done the bar glides up and the results panel unfolds out from behind it, overshooting about 9%. Rows drop in from above on a 3-frame stagger, each overshooting about 10%.
  • The highlight stretches between rows: the leading edge on a stiff spring, the trailing edge on a soft one. Selecting gives a small press pulse and a return keycap that pops in.
  • The background only drifts a few pixels a second. Hold the last second.

Never

  • A live backdrop blur over a gradient. It bands. Blur the colour field itself, in float, with dither, and check the encoded file.
  • Flat, evenly spaced polka-dot bokeh, neon glow, or a purple-gradient wallpaper.
  • Milky white glass with white text under 4.5:1.
  • Fading panels or rows in. They unfold and drop.

Paste this into Claude

Build a 5-second, 9:16 animation (1080x1920, 30 fps) in Remotion in a frosted-glass UI style. Background: a defocused dusk photo drawn procedurally in a shader, with a teal-to-navy sky, a coral horizon glow, rose and teal colour fields, a cluster of small out-of-focus city lights, darker blurred corners, fine grain and dither so nothing bands. Over it sits a wide frosted-glass search bar. Its glass is the same background redrawn with a much bigger blur, slightly smoked, with a bright top-left rim, a faint inner glow and a soft shadow. It types "[YOUR QUERY]" in Plus Jakarta Sans. Then the bar glides up and a matching glass panel unfolds beneath it. Three rows, "[ROW 1]", "[ROW 2]" and "[ROW 3]", drop in with a stagger and overshoot. A highlight stretches to one row and selects it. Use springs, no fades, and hold the final second.

3. Apple style: Apple One-Take

apple-one-take.gif

One continuous shot on a clean light ground where every state grows out of the one before: no cuts, no fades. Suits product reveals, feature launches and "here's how it works" openers.

The look

  • Palette: ground #EEEEEC, ink #111113, paper #FBFBF9, and one red accent #FF3B30 used on a single dot only. One soft blue gradient is allowed inside a "content" tile.
  • Type: Inter Tight. The closing line is 700 at about 176px with -0.04em tracking. UI labels are 600, secondary text sits at 50-70% opacity, and any counter uses tabular numbers.
  • Layout: everything is centred on one carrier object. The closing line sits a little above frame middle, well inside the safe area. The bottom fifth stays empty.
  • Texture: none, and the ground is flat. Depth comes only from layered soft shadows (a tight contact shadow plus two wide soft ones), scaled to the object's size, which fade away once it becomes type.

How it moves

  • One object carries the whole film. A dot grows a pill, a pointer presses it, it opens into a card, the card grows a bezel and becomes a phone, then the camera pulls back and the bezel closes into the "O" of the closing line. The accent dot survives every state and lands last as the full stop.
  • Colour changes by geometry, never by crossfade: black floods to white because the pill's dark edge thins from the inside out.
  • Entrances use springs with about 10% overshoot, big reshapes about 5%. Contents trail their container by about 3 frames.
  • Fast moves get directional motion blur sized from each object's own speed, and holds stay razor sharp.
  • The pull-back shrinks the phone exponentially rather than linearly, so it slows down like a real camera. The final line holds for at least a second.

Never

  • A cut, a crossfade or a fade-in where a morph should be.
  • A second accent colour, or the accent on anything but the hero dot.
  • A gradient vignette on the ground: it bands in the export. Keep it flat.
  • Text sliding at a constant speed, or blur left on a held frame.

Paste this into Claude

Make a 5-second, 9:16 animation (1080x1920, 30 fps) in Remotion in an Apple keynote "one-take" style. Use a flat light ground (#EEEEEC), near-black ink, one red accent dot and Inter Tight. It's one continuous shot with no cuts and no fades. A red dot grows a black pill button labelled "[BUTTON WORD]" and a pointer presses it. The pill opens into a white card showing [CARD CONTENT], the card grows a bezel and becomes a phone with a tiny UI for [YOUR PRODUCT]. Then the camera pulls back and the phone's outline closes into the "O" of a short closing line like "[YOUR LINE]", while the red dot flies in as the full stop. Every state morphs out of the last, with springs at about 10% overshoot, speed-based motion blur, soft layered shadows and a one-second hold.

4. CRT effect / retro-futurism: Retro CRT Glow

retro-crt.gif

An old tube TV switches on and shows a title in warm, glowing phosphor. Suits announcements, "coming up next", premieres, throwbacks and anything that should feel like a broadcast.

The look

  • Palette: tube black #07090F with a faint blue-grey glass lift #0B0E16 in the middle, phosphor core near-white #FCFBF8, bloom a soft rose-coral #FF9A90, one small accent red #F05A4A.
  • Type: a wide, bold retro-futurist face in capitals (Syncopate Bold), tracked out about 6%, stacked on two lines and filling about 80% of the frame width. One line of system text in a small technical mono (Share Tech Mono), spaced capitals, at about 80% brightness.
  • Layout: title centred, sitting just above the middle of the frame. The system line sits under it, anchored on the left so typing never shifts it, with a small red dot in front. Nothing in the corners.
  • Texture: a white-hot core inside a three-layer warm bloom (tight, medium and a wide haze). Fine horizontal scanlines follow the curve of the glass. Slight barrel curvature, a vignette that darkens into the rounded tube edge, a faint diagonal sheen on the glass, a hint of red and blue fringe toward the sides, and light snow. Render big glows with dither so they never band.

How it moves

  • Frame one is already a lit horizontal line across a dark tube. It swells for a few frames, then splits into two bright edges that race apart, and the picture unfolds between them. The picture starts squashed, overshoots about 10% taller and settles, all in about 12 frames.
  • The tube comes up hot: extra brightness, bloom, fringe and sync wobble on the open, all fading over about half a second.
  • The system text types in at about one character every 1.5 frames behind a solid block cursor. The red dot lights with a small pop when the line is done. After that the cursor blinks, with a short phosphor fade on each off.
  • In the hold, a soft hum bar rolls slowly down the screen and the brightness flickers by about 1%. Hold for at least 2 seconds.
  • The exit is faster than the entry: the picture collapses into the bright line in about 9 frames, the edges converging. The line then narrows back to its opening state, so the piece loops.

Never

  • Saturated neon tubes or a coloured outline glow. The core stays near white and the colour lives in the haze.
  • A box or border. The tube edge should only ever read as vignette.
  • Fading the title in. It arrives with the picture opening.
  • Heavy glitching, RGB split or jitter on settled text. Once the picture is on, it's stable.

Paste this into Claude

Build me a 5-second, 9:16 animation (1080x1920, 30 fps) in Remotion that looks like an old CRT television switching on. Use a dark blue-black tube with slight barrel curvature, a vignette into the rounded edges, fine scanlines that follow the curve, light snow, a faint glass sheen. Frame one is a bright horizontal line across the middle. It splits into two edges that race apart, and the picture unfolds between them, overshooting slightly, then settling. The picture is "[YOUR WORDS]" in a wide, bold retro-futurist capital face on two lines, with a white-hot core and a warm rose-coral phosphor bloom in three layers. Dither the bloom so it never bands. Underneath, one short line of system text types in behind a block cursor. Hold 2 seconds under a slow rolling hum bar, then collapse back to the line so it loops. No neon, no borders, keep the bottom fifth empty.

5. Oscilloscope art: Oscilloscope

oscilloscope.gif

A green phosphor trace on a dark scope screen that bends from signal into words. Suits tech, music, data, launches and any "it all clicked" moment.

The look

  • Palette: screen #030805 with a faint tube-face lift #09150E in the middle, graticule #0D2216, phosphor glow #46FF8C, beam core #D7FFF3.
  • Type: the words ARE the trace. Monoline geometric capitals drawn as one continuous line standing on the zero line, cap height about 9% of frame height. Any readouts are a small technical mono (Share Tech Mono) in dim green, a few words at most.
  • Layout: a graticule of square divisions centred on the frame, tick marks on the two centre axes, fading out toward the edges so there is never a border. The trace runs off both sides of the frame like a real beam. The word sits just above the centre axis; readouts small and centred lower down.
  • Texture: phosphor glow (tight bright core, soft green halo), a short persistence trail of the last few frames behind anything that moves, and fine grain in the dark screen so it never bands.

How it moves

  • It is one continuous line for the whole piece. Every change is that line changing shape, never a cut or a swap.
  • It opens on a scrolling sine wave that catches the trigger and settles, then folds into a 2:3 Lissajous figure that slowly turns.
  • The figure releases back into a wave and rings down to a flat line like a damped oscillation, swinging through zero once.
  • The letters rise out of the flat line left to right, each overshooting about 10% and settling, the persistence trail smearing beneath them. Then it holds for at least 1.5 seconds.

Never

  • Neon-sign glow. Keep the halo tight and green, the core almost white.
  • A box around the screen, or labels in the corners.
  • Letters that appear from nowhere. They grow out of the line.
  • More than one small line of readouts.

Paste this into Claude

Build me a 5-second, 9:16 animation (1080x1920, 30 fps) in Remotion that looks like an oscilloscope. Dark green-black screen with a faint graticule grid that fades out toward the edges, no border. One bright green phosphor trace with an almost white core, a soft green glow and a short persistence trail of the previous few frames. The trace is ONE continuous line the whole time: it starts as a scrolling sine wave that locks, folds into a slowly turning Lissajous figure, releases back into a wave that rings down to a flat line, then the words "[YOUR WORDS]" rise out of that line left to right as thin capitals standing on the trace, each letter overshooting slightly before it settles. Hold the finished word for the last 1.5 seconds. Optional: one tiny instrument readout. No fades, no corner labels, keep the bottom fifth empty.

6. Editorial layout: Magazine Layout and Note

magazine-note.gif

A printed magazine page that builds itself, then someone annotates it in red pen. Suits quotes, reading lists, essays, product stories and anything that should feel considered rather than loud.

The look

  • Palette: cool off-white paper #EAEDED, near-black ink #1B1E25, red pen #C42E26. The photo is a two-ink duotone from slate navy #242E46 to pale grey-blue #E2E7EC.
  • Type: a high-contrast serif headline (Bodoni Moda, Regular and Italic) at about 9% of frame height, tracking -0.03em, two lines with the second line italic and indented. Body in a text serif (Newsreader, Regular) at about 1.4% of frame height on generous leading, plus an italic caption. The note is a natural ballpoint script (La Belle Aurore) tilted about -7 degrees.
  • Layout: a thin rule across the top margin, the headline under it, then a photo block on the left and a narrow body column on the right, caption under the photo. The note sits in the margin under the column and an arrow crosses the gutter into the photo. Generous white paper everywhere else, bottom fifth bare.
  • Texture: static paper grain with faint long fibres, a light multiplied paper tooth over everything (ink and photo included), film grain inside the photo. If there is no stock photo, paint one: a dusk sea with a sun disk, torn cloud, a cloud bank across the sun and a glitter path on the water.

How it moves

  • Frame one already shows the rule, the first headline line and a sliver of photo. Every line of type rises out of its own mask, 2-5 frames apart, with about 10% overshoot and a soft settle.
  • The photo opens upward like a blind while the image settles out of a gentle push, then keeps drifting very slowly to the end.
  • The note writes itself along the actual strokes of each letter at handwriting speed (about 8 letters a second), with short pen lifts between words and the i-dots and full stop added last.
  • After a beat the pen draws an arrow with a small loop, lifts, and flicks the arrowhead on in one move.
  • The last 1.5 seconds hold so the page can be read.

Never

  • Warm cream, beige or sepia paper. The paper is cool.
  • A straight left-to-right wipe or typewriter reveal for the note. It has to follow the strokes.
  • Drop shadows, page curls or frames around the photo.
  • Fades. Every element arrives through a mask or a stroke.

Paste this into Claude

Build me a 5-second, 9:16 animation (1080x1920, 30 fps) in Remotion that looks like a printed magazine page building itself. Cool off-white paper, fine static grain. A thin rule at the top, then a two-line headline in Bodoni Moda (second line italic, indented): "[YOUR HEADLINE]". Below it a photo block on the left (use my image, or paint a duotone dusk sea with a sun disk and grain) and a narrow column of small Newsreader body text on the right. Each line rises out of its own mask with about 10% overshoot; the photo opens upward while it settles from a slight push. Then a red ballpoint note in La Belle Aurore writes itself in the margin, following each letter's strokes at real handwriting speed: "[YOUR NOTE]". Finish with a hand-drawn arrow with a small loop pointing into the photo. No fades, hold the last 1.5 seconds, bottom fifth empty.

7. Editorial kinetic typography: Blue Editorial

blue-editorial.gif

A magazine cover in motion: one electric blue field, white type that gets cut, sliced and rearranged. Suits a bold one-line statement, a launch, a title card or a manifesto line.

The look

  • Palette: electric ultramarine #2433F0 (blue, never purple or navy), white #F4F5FA, rules in the same white at about 55% opacity. Nothing else.
  • Type: two faces only, all lowercase. The big words in an italic display serif (Instrument Serif Italic) at roughly 22% of frame width per letter, tracking -0.03em. The small words in a black-weight grotesk (Schibsted Grotesk Black) around 6% of frame height, tracking -0.045em. The contrast between huge italic and small heavy sans is the whole style.
  • Layout: a cover stack, not a grid. Small kicker word top left over a full-width rule, a huge italic word whose ascender breaks through that rule, a small word right-aligned on a short second rule, then a small word sitting on the baseline of a huge final italic word, and a closing rule. Everything inside the central 900 px, bottom fifth empty.
  • Texture: none. Flat colour, crisp edges.

How it moves

  • Frame one already shows huge white letters rising through a baseline mask, 2-3 frames apart, each overshooting about 10%.
  • Scale jumps: the opening word holds huge for about two-thirds of a second, then snaps down to kicker size in about 8 frames with motion blur along the travel.
  • A slanted wipe at the italic angle runs through the next word left to right, a thin white line riding its edge, and collapses as it exits.
  • One word slides out from underneath another, as if it was tucked behind it.
  • The last word flies in as four horizontal slices from alternating sides, lands off-register for a beat so the cut reads, then locks into one word. Rules draw out on a fast ease. Each beat holds 8-15 frames and the finished cover holds about 1.5 seconds.

Never

  • Purple, navy, gradients or glow. One flat blue.
  • A third typeface, or capitals.
  • A modular grid, numbered labels or centred symmetry. That is Swiss, this is a cover.
  • Fades or crossfades. Words move, wipe, slice or slide.

Paste this into Claude

Build me a 5-second, 9:16 animation (1080x1920, 30 fps) in Remotion in a blue editorial magazine-cover style. Flat electric blue background #2433F0, white type, all lowercase, only two fonts: Instrument Serif Italic huge, Schibsted Grotesk Black small. Thin white rules at 55% opacity. My line is "[YOUR LINE]": split it into four parts, alternating small grotesk and huge italic words, stacked like a cover with the big words breaking the rules. Motion: letters rise through a baseline mask with overshoot; the first word starts huge then snaps down to a small kicker with motion blur; a slanted wipe with a thin line on its edge reveals the next word; one word slides out from under another; the last word arrives as four horizontal slices that land off-register, then lock. Fast, confident, short holds between beats, 1.5-second hold at the end. No fades, no glow, keep the bottom fifth empty.

8. Risograph: Risograph

risograph.gif

A two-ink print poster that builds itself in stop motion. Suits event promos, zines, music, playful brand moments and anything that should feel hand-made rather than digital.

The look

  • Palette: cool off-white paper #EDEFEE, fluorescent pink #FF48B0, medium blue #3255A4. Where the inks overlap you get a deep violet, about #32186F. That comes from multiplying the two inks, so you never pick it yourself.
  • Type: a heavy grotesque in capitals (Bricolage Grotesque ExtraBold), tracked about 5% and set big enough to span the poster. One short word is knocked out of a shape so the paper shows through.
  • Layout: a portrait poster. The hero word runs across the top and two overlapping circles sit in the middle. The second word sits on a band of diagonal stripes, with a row of dots under it that grows left to right like a halftone ramp. Wide paper margins, and the bottom fifth stays empty.
  • Texture: each ink is its own plate.
    • Ink: mottled density with paper-white specks and slightly ragged edges.
    • Tones: halftone dots on about a 12px cell, each ink on its own screen angle.
    • Registration: the plates sit a few pixels apart, so anything printed in both inks gets a pink fringe on one side and a blue fringe on the other.
    • Paper: faint cloud and fibre, plus a few stray ink specks.

How it moves

  • Everything animates on twos, so each drawing holds for 2 frames. Every new drawing is a fresh print: the grain re-rolls and the registration shifts by a pixel or two.
  • Shapes either stamp or slide:
    • A stamp lands big (110-116%) with a few degrees of tilt, undershoots about 9% and settles over 4-5 steps.
    • A slide comes in from off-frame on a spring with an 8-12% overshoot.
  • Build the poster one element at a time, 4-6 frames apart, in reading order. Frame one already shows ink on paper.
  • The second beat is a registration slip. Both plates kick 20-30px apart and spring back past register, so the two-ink word splits into a pink copy and a blue copy, then snaps back together.
  • Hold the finished poster for at least a second on each side of the slip. A slow crawl in the stripes keeps it alive.

Never

  • Warm cream or bone paper, or more than two inks plus their overlap.
  • Smooth 30fps motion or motion blur. It's a stack of prints.
  • Clean vector edges or flat digital colour with no grain.
  • Any gradient that isn't made of halftone dots.

Paste this into Claude

Build me a 5-second, 9:16 animation (1080x1920, 30 fps) in Remotion that looks like a two-colour risograph poster printing itself. Use cool off-white paper and two inks, fluorescent pink and medium blue, that multiply into deep violet where they overlap. Draw each ink as its own plate. Print each plate with mottled grain, paper-white specks, ragged edges, halftone dots for any tone (a different screen angle per ink) and a few pixels of misregistration between the plates. Animate on twos, re-rolling the grain on every drawing. Build the poster from "[YOUR WORDS]" in a heavy grotesque, plus two overlapping circles, a diagonal stripe band and a dot ramp. Each element either stamps in big with a slight tilt and settles, or slides in with a small overshoot. Halfway through, slip the plates apart and spring them back. No smooth motion, no blur, keep the bottom fifth empty.

9. Swiss style: Swiss Grid

swiss-grid.gif

International Typographic Style in motion: a strict module grid, heavy flush-left grotesk, one red field and one circle. Suits a bold one-line statement, a principle or a manifesto opener.

The look

  • Palette: paper #F0F0E8, ink #101010, signal red #F03820. Nothing else.
  • Type: Public Sans ExtraBold (800), sentence case, tracking tight at about -0.05em, set flush-left and ragged-right. Leading equals one grid module, so every baseline sits on a grid line, and the first stem of each line (not the letter's side bearing) sits exactly on the margin. Small captions in the same family at 600: numeral in full ink, word at about 60% opacity.
  • Layout: four equal columns inside wide side margins, rows on the same square module, thin 2px lines running edge to edge. The red field covers a block of whole cells and can bleed off the top and right edges. The circle is exactly one or two modules wide and sits on grid intersections. Type fills the rows under the field and overprints it. The bottom fifth stays empty grid.
  • Texture: none. Flat colour, hard edges.

How it moves

  • The grid draws first, already mid-draw on frame one: verticals drop, horizontals sweep, about 2 frames apart, fast start and a long settle.
  • The circle steps cell to cell along the grid lines like a rook. Each step is a crisp spring with about 9% overshoot and real motion blur.
  • The red field opens out of the cell where the circle stops: the cell grows behind it, then snaps across the columns, then up and down the rows. Each edge overshoots its grid line and settles back onto it.
  • Each line of type is pushed out of the left margin line along its row, 6 frames apart, overshoots about 8% and locks flush-left. Captions drop from a grid line as each part lands. The circle winds back about 10%, then grows into its final two-module slot.
  • Everything is settled by about 2.5 seconds. Hold.

Never

  • Centre the type, or let any edge land between grid lines.
  • Add a second accent, gradients, shadows, glow or grain.
  • Fade things in. They snap, slide or grow out of a grid line.
  • Use a geometric or rounded display face, or put labels in the corners as decoration.

Paste this into Claude

Build a 5-second, 9:16 animation (1080x1920, 30 fps) in Remotion in the Swiss International Typographic Style. Paper #F0F0E8, ink #101010, one signal-red field #F03820, nothing else. A four-column modular grid of thin 2px lines draws itself first (already drawing on frame one). A black circle steps cell to cell on crisp springs with motion blur. A red field opens out of the cell it stops in, snapping edge by edge onto grid lines. Then my line, "[YOUR LINE, split into 3 short rows]", in Public Sans ExtraBold, tight tracking, flush-left: each row is pushed out of the left margin line along its row, overshoots about 8% and locks with its baseline on a grid line. Small numbered captions drop from a grid line as each part lands. No fades, gradients or glow. Keep text inside x 110-970 and y 230-1430, then hold the final poster for 2 seconds.

10. Blueprint / technical drawing: Pencil to Blueprint

pencil-blueprint.gif

A graphite sketch on graph paper that ink floods into a white-on-blue technical drawing, one line at a time. Suits idea-to-product, process, design and engineering stories.

The look

  • Palette: paper #ECECE6, faint graph grid #7FA3C4, graphite #25262B, blueprint blue #1C4C8F, tide-line blue #143C76, ink white #EEF4FB.
  • Type: Barlow Semi Condensed. Measurements at Medium 500, about 44px, with tabular figures. The label in caps at SemiBold 600, about 84px, tracking +0.07em, flush-left above a thin rule.
  • Layout: one simple object in side view, large in the middle of the frame and standing on a ground line. The label sits top-left, aligned with the drawing's left edge. Two or three dimensions run to the right and underneath, clear of the bottom fifth.
  • Texture: a faint engineering grid on the paper. Graphite with paper tooth, doubled and slightly bowed strokes, ends that overshoot. Fine paper grain over everything, and a very light mottle in the blue.

How it moves

  • The sketch goes down in a real order: ground line and light construction axes first, then confident outlines, joints as overshooting circles, quick hatching last. Each stroke eases in and out like a hand. The pencil is already moving on frame one.
  • The finished sketch holds for about a third of a second.
  • Ink floods out from inside the drawing with an irregular wet edge and a darker tide line just inside it. It moves fast at first, then slows.
  • Wherever the edge passes, graphite becomes white ink and each line springs straight. Construction strokes become dash-dot centre lines, and a guide circle bends into the angle dimension.
  • Then the system lands: centre marks pop, extension lines grow, dimension lines draw out from their middle, arrowheads pop and numbers tick up into place. The label rises over a rule that draws first. Hold for 1.5 seconds.

Never

  • Cut or crossfade from sketch to blueprint. It is one drawing, promoted.
  • Glow on the white lines, or a gradient on the blue.
  • Swap in a different object for the blueprint, or crowd it with more than three dimensions.
  • A handwriting font for the label, or a drawn pencil or hand on screen.

Paste this into Claude

Make a 5-second, 9:16 animation (1080x1920, 30 fps) in Remotion. Open on off-white graph paper (#ECECE6, faint blue grid) with a graphite pencil line (#25262B) already sketching [YOUR OBJECT] large, in side view. Draw light construction lines first, then doubled, slightly wobbly outlines with overshooting ends, then a few hatch strokes. At about 1.7 seconds, blueprint blue (#1C4C8F) floods out from the drawing with an irregular wet edge and a darker tide line. Where the edge passes, each pencil line turns crisp white and springs straight, and construction lines become dash-dot centre lines. Then two or three dimension lines draw in with arrowheads, and their numbers tick up. Finally the label "[YOUR 3-5 WORDS]" rises in Barlow Semi Condensed caps above a thin rule. Keep it one drawing throughout, with no cuts or fades. Keep text inside x 110-970 and y 230-1430, and hold the end for 1.5 seconds.

Bonus: the lines that stop it looking AI-made

The most-liked AI motion prompts tell the AI what NOT to do. Add any of these to the end of a prompt:


Made by Shaan Johari (@viashaan).