Ringed title word, then card cut
Plain take for a beat, a heavy title word wipes in behind the hands and a hand-drawn ring circles it while handwritten lowercase words build; the first hard cut to a cream card lands at 2.7-4.5 s. Open a personal-advice clip with one named idea and promise a visual reset later.
Preview unavailable
Open my video with this hook: "Ringed title word, then card cut" from the 24fps video editor library.
Preset JSON: https://24fps.dev/video-editor/hooks/ring-title-then-card-cut-hook-e2x/preset.json (pass its "preset" to the engine).
Engine (MIT, no dependencies, ES module): https://24fps.dev/editor/engine.js. Download the engine next to your page (curl -O) rather than importing cross-origin, then import { mount } from "./engine.js" in a <script type="module"> served over http.
Wiring: root = a position:relative box at the video's size. media = { main, fg }: main is a wrapper holding my video, filling the root. Then const fx = mount(root, { kind: "text", preset, media }) and call fx.render(seconds) every frame. The preset runs 3s from t = 0; offset t to place it later. It is seek-safe: drive it from the GSAP timeline in HyperFrames or call render(frame / fps) in Remotion. Before capturing frames, await (fx.ready ?? document.fonts.ready). Check it on my footage: if text is hidden behind the subject or doesn't read against my colours, nudge the layer positions or colours.
This look needs a cut-out of the person: fg is a second copy of my video with the background removed (video with alpha, e.g. WebM VP9 or HEVC with alpha; e.g. npx hyperframes remove-background clip.mp4 -o clip.fg.webm, or any person-segmentation tool such as rembg or MediaPipe), stacked above the other clips.
Replace the demo text with mine: set preset.layers[n].text (use \n for line breaks); if none given, write lines that fit my footage and tell me.
Hook formula: [one-word key idea] wipes in ringed above the hands while the sentence 'one [key] [noun] i can share is [promise]' writes itself word by word
Pair with captions preset handwritten-lowercase-soft-white (https://24fps.dev/video-editor/captions/handwritten-lowercase-soft-white/preset.json); the captions kind takes script as [{ w, s, e, emph }], plus karaoke and activeColor.
Field reference: https://24fps.dev/video-editor/llms.txt. Keep sizes as fractions of the frame height so it works at any resolution. Credit: 24fps.dev/video-editor- Formula
- [one-word key idea] wipes in ringed above the hands while the sentence 'one [key] [noun] i can share is [promise]' writes itself word by word
- Example lines
- one key insight i can share is to really focus on your why · so many of you ask how i stay motivated · one thing i've learned is self-advocacy is crucial
- Beats
- 0.0s plain talking head, no graphics (3 of 3 clips) → 0.1s first handwritten caption word rises in at lower-chest height → 0.1s heavy title word wipes in left to right with a stripe-mask, tucked behind the speaker's hand → 0.3s brush-stroke ring draws around the title (two overlapping loops) → 0.9s caption line builds word by word on two short lines, title and ring hold → 2.7s business clip only: hard cut to cream keyword card (other clips cut at 4.5 s)
- Same idea
- Also called: Sketch (AI Edit)
- Technique
- Common AI-edit hook: ringed title word over a handwritten caption build, card cut after the first sentence
- Footage
- Man talking and gesturing, Pexels