Slice & Split text animation: the word aimotions animated in this style
109KineticCSS

Slice & Split

The word is cut into horizontal bands that jump, slide apart and snap back together on a strict beat, mixing hard cuts with fast expo slides. A Swiss-grid take on kinetic type for fashion films, conference openers and brand loops.

Prompt · replace [TEXT]

Tool-agnostic
Set [TEXT] in a black-weight neo-grotesque, capitals, tight tracking, huge and centered on off-white paper, with thin grid labels numbering the slices in the margin. Cut the word into seven equal horizontal bands and animate them to a strict 120 bpm beat: hold the whole word, then hard-cut to bands shifted alternately left and right, snap back with a fast exponential slide, cut to a staircase offset, slide to the mirrored staircase, recombine. Next, every other band inverts to electric blue with paper-white letters; the bands spread apart vertically, fly off in opposite directions, hard-cut back in from the other sides and lock together. Hold clean between moves so the word reads most of the time. Graphic, precise, seamless loop.

Visual DNA

  • Seven horizontal slices of one ultra-black grotesque word
  • Hard cuts to offset layouts alternating with snappy expo slides
  • Alternate slices invert to electric blue with paper-white letters
  • Slices spread vertically, fly off in opposite directions and re-enter
  • Off-white paper, black ink, blue accent, numbered grid labels
Category
Kinetic Typography
Demo built with
CSS
Energy
Lively
Background
Light bg

Also known as

Support
Keep aimotions free

No paywall, no sign-up. If a prompt saved you an hour, a coffee keeps new styles coming.

Buy me a coffee

Keys: ← → browse · C copy

Use this style

  1. Step 01Copy the prompt

    It describes the Slice & Split look (composition, type, palette, texture and timing) without tying you to a tool.

  2. Step 02Replace [TEXT]

    Swap in your word, product name or headline. Short words (4–12 letters) read best in most styles.

  3. Step 03Ask for a format

    Paste it into Claude Opus 5.5, Claude Sonnet 5.5, Claude Fable 5.5, GPT-6 Astra or GPT-6.1 Sol, or a newer model, and request a single HTML file, a component, a shader or a brief. For a hero heading, use “Copy for website title”.

Website titles →Prompt guide →

111KineticCSS

Stomp Cut Edit

stomp text animation · fast cut typography · beat synced text · punchy promo titles

Details →
009ReactiveCSS

Magnetic Letters

magnetic text effect · magnetic hover · cursor attraction text · spring letters

Details →

Keep it free.

aimotions has no paywall and no sign-up. It is funded by people who found a style they love. A coffee on Ko-fi helps pay for hosting and the next batch of styles.

Support on Ko-fi ♥