Pick the effect, not the code.בחר את האפקט, לא את הקוד.
A live, scrollable catalog of every motion graphic, caption style, transition, marker highlight, and sound effect you can pull into your videos. Each card has a tap-to-copy effect ID. Spot one you like, copy its ID, then tell me "use karaoke.scale-pop + marker.circle on brand names" and I'll wire it into the next edit.קטלוג חי וגליל של כל מוטיון גרפיק, סגנון כתוביות, מעבר, סימון, ואפקט קול שאפשר להוסיף לסרטונים שלך. בכל כרטיס יש מזהה אפקט להעתקה. איתרת אחד שאתה אוהב, העתק את המזהה ואז תגיד לי "השתמש ב-karaoke.scale-pop + marker.circle על שמות מותגים" ואני אחבר את זה לעריכה הבאה.
How to use this catalog.איך להשתמש בקטלוג.
1. Scroll. Every card is a real, looping demo — what you see is what your video will look like (same GSAP, same CSS).
2. Click any effect.id chip — it copies to your clipboard.
3. When commissioning a video, paste the IDs into the prompt:
"edit this with style.swiss-pulse, captions karaoke.scale-pop, marker.circle on stats, transition.blur-crossfade, sfx whoosh on every cut, sfx impact on hero word"
4. Mix freely. Captions are stackable with marker highlights. Visual styles set the overall mood. Transitions glue scenes. SFX punch beats.
1. גלול למטה. כל כרטיס הוא דמו אמיתי שרץ בלולאה — מה שאתה רואה הוא מה שהסרטון שלך ייראה (אותו GSAP, אותו CSS).
2. לחץ על כל צ'יפ effect.id — הוא יועתק ללוח.
3. כשאתה מזמין סרטון, הדבק את המזהים בפרומפט:
"ערוך לי את זה עם style.swiss-pulse, captions karaoke.scale-pop, marker.circle על הסטטיסטיקות, transition.blur-crossfade, sfx whoosh בכל חיתוך, sfx impact על מילת הגיבור"
4. ערבב חופשי. כתוביות מצטברות עם סימוני הדגשה. סגנונות חזותיים קובעים את האווירה הכללית. מעברים מחברים סצנות. אפקטי קול מדגישים ביטים.
★ Open-source skills · קוד פתוח
Get the skills. Run forever.
התקן את הסקילים פעם אחת. השתמש לתמיד.
Two open-source skills power this entire catalog. Install both, drop them in ~/.claude/skills/, restart your AI agent (Claude Code, Cursor, Codex, Gemini-CLI) — every video edit and every web build picks them up automatically. Permanent. Free. Apache 2.0 + MIT.
שני סקילים בקוד פתוח מפעילים את כל הקטלוג הזה. מתקינים את שניהם, שמים בתיקיית ~/.claude/skills/, מפעילים מחדש את סוכן ה-AI שלך (Claude Code, Cursor, Codex, Gemini-CLI) — כל עריכת וידאו וכל בניית אתר ימצאו אותם אוטומטית. קבוע. חינם. רישיון Apache 2.0 + MIT.
Captions are the most-used layer. Every viral short uses a karaoke baseline — full sentence on screen,
inactive words at 45–55% opacity, the active word at 100% with a scale pop and accent color. The variants below
differ only in intensity: high-energy = bigger pop + glow, low-energy = subtle white shift.
THISISHOWYOUWIN
Karaoke · Scale Pop
Inactive words at 45% opacity, active word slams to 1.0 with a yellow accent on emphasis tokens. The single most-used caption pattern.
captions.karaoke.scale-popWhen · hype, launches, social
FROMZEROTOVIRALFAST
Karaoke · Color Pop
Active words shift to brand pink with a soft pink halo. Use when you want the caption to carry brand color rather than a generic yellow accent.
captions.karaoke.color-popWhen · brand-led promos
ככהבוניםסרטוןויראלי
Karaoke · Hebrew RTL
Same karaoke, Rubik Black instead of Anton, RTL container so words flow right-to-left. Active token gets the yellow glow. The exact pattern your YUV.AI shorts use.
captions.karaoke.hebrew-rtlWhen · Hebrew content
SLOWDELIBERATEPREMIUM
Karaoke · Subtle
3% scale change, no color accent, only an opacity shift to white. For corporate/luxury scripts where karaoke must not steal focus.
Words shrink and fade together, falling into the floor. Calm, intentional ending — pairs with low-energy karaoke.
captions.exit.collapseWhen · winding down, end of section
FEELTHEBEAT
Karaoke · Audio Reactive
Word scale + glow modulated by pre-extracted audio bands (bass = scale, treble = glow). For music-driven shorts.
captions.karaoke.audio-reactiveWhen · music videos, beat drops
02Marker Highlightsהדגשות סימון
5 modes · layer over karaoke for emphasis words
Marker highlights stack on top of karaoke captions to call out specific words — brand names, stats, ALL CAPS shouts.
Use sparingly: at most one or two emphasis tokens per group.
THIS IS HUGE.
Marker · Highlight Sweep
Yellow marker bar sweeps in left-to-right behind the word. Most common mode. Works on any background.
marker.highlightWhen · standard emphasis on key terms
STATS
Marker · Circle Ring
Pink hand-drawn ellipse rings the word with a back-out wobble. The most "viral" of the markers — highest attention.
12 radiating lines explode out of the word with a stagger. Pure hype — comic-book "POW".
marker.burstWhen · explosive reveals, hero words
underlined
Marker · Scribble
Wavy SVG line draws itself underneath the word via stroke-dashoffset. Hand-made feel.
marker.scribbleWhen · subtle emphasis, casual tone
old price
Marker · Sketchout
Two cross-hatched pink lines slash through the word. Use to negate something — old price, the wrong way, deprecated.
marker.sketchoutWhen · negation, "before" frame, old vs new
03Cards & Glassכרטיסים וזכוכית
Real backdrop-filter · 3D tilt entrance · idle float
Cards float over the speaker on the opposite half of the frame, never covering the face.
All glass uses real backdrop-filter, not pre-baked blur PNGs — what you see is what renders.
FACT 0198% FasterToken-level streaming with prompt caching enabled.
Card · Liquid Glass (Light)
Apple-style liquid glass — translucent white over a vibrant background, real CSS backdrop-filter: blur(22px) saturate(160%). 3D tilt entrance with overshoot.
card.glass-lightWhen · stat callouts, fact cards, key claims
RULENever Cover The FaceCards always live on the opposite half of the speaker.
Card · Liquid Glass (Dark)
Same glass treatment with a dark fill instead of white. Better contrast over warm/colorful backgrounds.
card.glass-darkWhen · over bright backgrounds, dark-mode polish
3D ENTRANCETilt-Popscale 0.85 → 1.0, rotationY -12° → 0°, y +60 → 0, ease back.out(1.7)
Card · 3D Tilt-Pop Entrance
Card pops in with perspective tilt + overshoot. Default for ALL cards in YUV.AI viral shorts. Never use a flat fade.
card.entrance.tilt-popWhen · always (this is the default entrance)
AFirstTitle appears, body fills in afterward — feels alive.
BSecondTwo-card composition with staggered reveals.
Card · Inner Stagger
Card frame appears first; eyebrow → title → body stagger in 0.10s apart. Card "fills itself" with content rather than appearing all at once.
card.inner-staggerWhen · multi-line cards, nested information
ALIVEIdle Float±8px y-drift, sine.inOut, repeating. Keeps cards alive between beats.
Card · Idle Float
After entrance, cards breathe with a gentle ±8px vertical sway. Without it, cards feel "dead" between beats.
card.idle-floatWhen · always (combine with tilt-pop entrance)
04Visual Stylesסגנונות עיצוב
8 named systems · pick one per video
Each style sets the entire video's visual personality — palette, type, motion energy, transition family.
Pick one per video; mixing styles produces incoherent edits. Match mood first, content second.
01 / SWISS PULSE
Clinical. Precise.
Müller-Brockmann · expo.out
Style · Swiss Pulse
Black + white + ONE electric accent. Grid-locked, numbers dominate at 80–120px, hard cuts. Counters from 0.
style.swiss-pulseWhen · SaaS, dev tools, dashboards, metrics
A transition tells the viewer how two scenes relate. Crossfade = "this continues." Push slide = "next point."
Glitch = "instability." Pick ONE primary transition for 60–70% of cuts and 1–2 accents — never use a different transition for every scene.
SCENE A
SCENE B
Transition · Blur Crossfade
Both scenes blur, opacity-cross, then sharpen. Premium, calm, "drift with me" feel.
These are the heading-and-headline animations — used for the title card, chapter breaks, big reveals.
Combine sparingly; one hero text effect per scene.
FROM ZERO TO VIRAL
Text · SplitText Reveal
Headline split into characters; each char rises from below with a stagger. The classic GSAP hero entrance.
NO pie charts. NO multi-axis charts. NO 6-panel dashboards. Numbers need visual weight — pair every metric
with a fill bar, a ring, or a shape that gives it presence in motion.
CAPACITY · 0%
Data · Fill Bar
Horizontal bar fills 0 → target % with synced number count. Track has 10% white fill so it reads even at 0%.
One number, 140px, fills the frame. Counter from 0, label below in pink Anton. The Swiss Pulse bread-and-butter.
data.big-statWhen · single hero metric per scene
08Sound Effectsאפקטי קול
7 audio cues · ElevenLabs sound-generation · mix in base layer
SFX are the audio half of every cut. Generated once per project via make_sfx.py using ElevenLabs sound-gen,
then mixed into the base.mp4 BEFORE hyperframes composes the visual layer. Visual demos below approximate
what each SFX feels like — the actual audio is generated on render.
BAM
SFX · Impact
Punchy hit + sub-bass thud. Pair with text.slam or hero word reveal. The signature "BAM" beat.
sfx.impactWhen · hero words, hook, WOW reveals
BOOM
SFX · Bass Drop
Long sub-bass swell. Layer UNDER impact for the full "boom" — never alone, always paired.
sfx.bass-dropWhen · always layered with sfx.impact
SFX · Whoosh
Air-rush sweep. The default cut transition SFX — every whip-pan, push-slide, or scene change gets one.
sfx.whooshWhen · every cut transition
RISE
SFX · Riser
2–3 second build that crescendos into the next beat. Front-loaded onto a punchline or reveal.
sfx.riserWhen · build-up before climax / reveal
✦
SFX · Ding
Short bright bell. UI pop on card reveals, per-bar "ding" on chart entrance, every checkmark.
sfx.dingWhen · card pops, UI reveals, checkmarks, list items
▓▒░ ERR
SFX · Glitch
Short digital tear / stutter. Pair with transition.glitch for full effect.
sfx.glitchWhen · with glitch transitions, tech edginess
▶
SFX · Typing
Mechanical keyboard tick under any terminal/code typewriter card. Synced 1:1 with the typewriter pace.
sfx.typingWhen · paired with text.typewriter
09Layout Archetypesארכיטיפי פריסה
2 archetypes · per-beat decision
The first decision after transcribing is what the source footage actually is. Pick one archetype per beat —
or mix them across beats if the source is hybrid.
SCREEN-SHARE / DASHBOARD
SPEAKER PIP
CARD ON SCREENTop zone
בולטKEY MOMENT
Archetype · Screen-share + PIP
Top 2/3 = screen content. Bottom 1/3 = speaker PIP with rounded mask. Cards float over the screen content. The screen IS the visual story — never hide it.
Speaker fills the frame. Layout A (emotional beats) = full-frame; Layout B (explanatory) = speaker shrunk to top-right PIP, glass cards fill bottom 2/3.
archetype.selfieWhen · talking-head, hot takes, monologue
Hyperframes' visual layer is GSAP under the hood. Every effect above is a GSAP timeline.
These cards are the vocabulary — pick an easing, a stagger, a text-split, and tell me which to apply.
back.out(1.7)
power3.out
expo.out
sine.inOut
elastic.out(1.2,0.5)
GSAP · Easing Compare
Five canonical easings, same distance + duration. back.out = card entrances. power3.out = SplitText reveals. expo.out = slam beats. sine.inOut = idle floats. elastic = playful overshoots.
gsap.easing.back-outWhen · pick the right ease for the energy
from:start
from:end
from:center
from:random
GSAP · Stagger Patterns
How a list of N elements becomes N coordinated entrances. start for left-to-right reveals, end for outros, center for hero pops, random for chaos.
gsap.stagger.centerWhen · any list of cards, words, or chips
REVEAL BY CHARS
SplitText · Chars
Each character animates independently. Highest detail, longest stagger. The signature GSAP hero entrance.
gsap.split.charsWhen · short hero headlines (≤ 30 chars)
REVEAL BY WORDS
SplitText · Words
Each word animates as a unit. Faster than chars, reads as a phrase rhythm. Best for medium-length titles.
gsap.split.wordsWhen · 3–8 word titles
REVEAL BYFULL LINES
SplitText · Lines
Whole lines slide in. Calmest of the three. Pairs naturally with velvet-standard and soft-signal styles.
Every Hyperframes composition is one GSAP master timeline with named labels (tl.addLabel("intro", 0)). Each label is a checkpoint you can seek to during preview.
Element traces an SVG path with synced rotation. For UI cursors, "data flying into a chart", or anything that should follow a curve rather than a straight line.
Pre-extract audio bands offline (no Web Audio API at render time), then drive any GSAP-tweenable property — scale, textShadow, filter, even SVG attributes.
gsap.audio-reactiveWhen · music videos, beat-synced reveals
11Prompt Libraryספריית פרומפטים
8 production-ready prompts · copy & paste
Drop the source path, copy a prompt, paste, send. The skill takes over.
Each prompt mixes effect IDs from the catalog above — change any of them to swap behavior without re-writing the prompt.
01 · Minimal
Just edit it
Zero direction. Skill picks archetype, style, and pacing from the source itself. Use this 80% of the time.
edit this: ~/Movies/source.mov
archetype:autostyle:auto
02 · Product launch (MrBeast pace)
Cursor walkthrough · 45s
Screen-recording with cursor demo. Fast cuts, every feature gets a beat, hero number slammed at climax.
edit this product walkthrough into a 45s viral short:
~/Movies/launch.mov
style: style.maximalist-type
archetype: archetype.screen-share# top 2/3 = screen, bottom = me PIP
pace: MrBeast — avg 1.8s shots, no static moments
captions: captions.karaoke.scale-pop
markers: marker.circle on every feature name,
marker.highlight on every CTA verb (click, drag, ship)
per beat:
HOOK (0-3s) text.slam + sfx.impact + sfx.bass-drop
PROBLEM (3-12s) card.glass-dark · 3 pain chips · sfx.ding per chip
SOLUTION(12-30s) one feature per cut · transition.whip-pan · sfx.whoosh
WOW (30-38s) hero number · data.big-stat + marker.burst + impact
CTA (38-45s) URL card · sfx.riser → transition.color-dip
render both 9:16 and 16:9, save as final__V1.mp4
For thought-leadership / educational content. Long holds, generous whitespace, soft motion only.
edit this explainer into a 60s premium short:
~/Movies/explainer.mov
style: style.velvet-standard
archetype: archetype.selfie# layout B — speaker top-right PIP
pace: 3.5s avg shot length · long holds · no frantic motion
captions: captions.karaoke.subtle# 3% scale, no color accent
markers: marker.scribble only, max 2 per scene
transitions: transition.blur-crossfade ONLY (no whips, no glitches)
per scene:
INTRO gsap.split.lines reveal of topic title
BODY 3× card.glass-light · one concept each · card.idle-float
hold each card 12-15s
OUTRO closing thought · transition.color-dip
sfx: only soft sfx.ding on card reveals · no whooshes, no impacts
render both 9:16 and 16:9
Editor + browser + me narrating. Each browser refresh is a beat. Each working feature gets a freeze + ding.
edit my "I built X in 30 min" recording into a 60s short:
~/Movies/build.mov
style: style.deconstructed
archetype: 16:9 full-frame editor · me as bottom-right PIP
pace: 2.5s shots · faster on UI changes
captions: captions.karaoke.scale-pop
markers: marker.highlight in yellow on brand names + lib names
per beat:
TYPING zoom into editor · text.typewriter over diff
+ sfx.typing synced 1:1 with the typewriter
REFRESH transition.shutter + sfx.whoosh + sfx.ding when UI lands
FEATURE freeze 0.4s · marker.circle on the feature
+ sfx.impact · then continue
WOW final demo · transition.zoom-through
+ text.slam "DONE" + impact + bass-drop
end on transition.color-dip
render both aspects
For architecture diagrams, user flows, automation pipelines. Each node = a beat. Zoom + glass card per step.
edit this flow walkthrough into a 75s explainer:
~/Movies/flow.mov
style: style.data-drift# futuristic, immersive
archetype: full-frame screen · NO PIP · the flow IS the content
captions: captions.karaoke.color-pop
(RTL with Rubik Black if Hebrew narration)
per step:
freeze frame · push-in zoom on the active node
card.glass-light on the side · 1-line description
data.counter if a number is involved
transition.staggered-blocks to next step # the "data" transitionsfx.ding on every step reveal
end:
zoom-out reveal full flow
marker.highlight on most-important node
sfx.riser → transition.color-dip
render both aspects
Pure speaker content, RTL bilingual, fast-paced opinion piece. The default for X / IG posts.
edit my hot take into a 30s viral short:
~/Movies/hottake.mov
style: style.maximalist-type with pink/yellow
archetype: archetype.selfie · alternate Layout A / B per beat
pace: 1.5-2s avg · one beat per sentence
captions: captions.karaoke.hebrew-rtl
English brand tokens use Anton uppercase
markers: marker.circle on opinions
marker.sketchout on the wrong way ("don't do this")
beats:
HOOK text.slam opening claim + sfx.impact
POINT 1 Layout B card on the right · ding
POINT 2 Layout A full-frame · marker.circle on the verb
POINT 3 Layout B card on the left · ding
CTA "follow for more" · sfx.riser → dip
every cut: sfx.whoosh + transition.whip-pan
render both aspects
archetype.selfiecaptions.karaoke.hebrew-rtl
07 · Tutorial / How-To
Numbered steps · 90s
For step-by-step guides where the structure IS the content. Each step gets its own card + beat.
edit this tutorial into a 90s how-to:
~/Movies/tutorial.mov
style: style.swiss-pulse# clinical, precise
archetype: archetype.screen-share
pace: tutorial pacing · 2.5s shots · longer holds on numbered steps
captions: captions.karaoke.scale-pop
markers: marker.circle on the number for each step
structure:
TITLE gsap.split.chars reveal of the tutorial title
STEP N big number "01 / 02 / 03 ..." in pink Anton
card.glass-light · 4-word step title · card.inner-staggertransition.push-slide between steps
sfx.ding on each step number
RECAP all step numbers fly back in via gsap.stagger.center
CTA transition.color-dip
render both aspects
style.swiss-pulsetransition.push-slide
08 · Founder pitch / origin story
Personal narrative · 60s
Storytelling-first. Start small, build to the climax, end on a quiet beat. Light leak is the signature transition.
edit this origin story into a 60s pitch:
~/Movies/origin.mov
style: style.soft-signal# intimate, warm
archetype: full-frame selfie · close-up framing
pace: storytelling · varies (slow start → fast climax → slow outro)
captions: captions.karaoke.subtle warm-toned
markers: none (let the story breathe)
transitions: transition.light-leak primary,
transition.blur-crossfade accent
beats:
OPEN soft gsap.split.lines "It started when..."
RISING 3 short scenes connected by light-leak
card.glass-light on year markers (2018, 2021, 2024)
CLIMAX data.big-stat the breakthrough number
+ sfx.impact (subtle, no bass-drop)
CLOSE speaker breathing · final line · transition.color-dip
sfx: sfx.ding sparingly on year markers · soft sfx.riser into climax
render both aspects
style.soft-signaltransition.light-leak
12Use Case Scenariosתרחישי שימוש
6 visual scenarios · what each video looks like before you commission it
Each scenario is a live mockup of how the finished video will be composed — speaker placement, card position, where the cursor goes,
where stats land. Pair the visual with the prompt directly below it.
app.yuv.ai
FACT 023× faster
SCENARIO · PRODUCT LAUNCH
Cursor walkthrough, MrBeast pace
Use when launching a SaaS / app / dashboard. The cursor IS the actor — it draws the eye through the UI while glass cards punch up the killer features. PIP keeps you in-frame for hooks and reactions; the screen content is the star the rest of the time.
edit this launch walkthrough into a 45s viral short:
~/Movies/launch.mov
style: style.maximalist-type
archetype: archetype.screen-share
captions: captions.karaoke.scale-pop · marker.circle on features
per beat: HOOK text.slam + impact / SOLUTION whip-pan per feature
+ sfx.whoosh / WOW data.big-stat hero number / CTA sfx.riser → dip
render 9:16 and 16:9
archetype.screen-sharestyle.maximalist-type
CONCEPT 01Why caching matters
SCENARIO · TOPIC EXPLAINER
Calm thought-leader, premium polish
Use when teaching a concept. Speaker is the authority; cards reinforce, never distract. Long holds let the audience absorb. No whooshes, no slams — restraint is the brand.
edit this explainer into a 60s premium short:
~/Movies/explainer.mov
style: style.velvet-standard
archetype: archetype.selfie · Layout B
pace: 3.5s avg · long holds · no frantic motion
captions: captions.karaoke.subtle
markers: marker.scribble on key terms only
transitions: transition.blur-crossfade only
3× card.glass-light · one concept each · card.idle-float
sfx: only soft sfx.ding on card reveals
render 9:16 and 16:9
Use when shipping a build-in-public video. Editor on left, browser preview on right. Each diff is a beat, each refresh is a transition, each working feature freezes 0.4s for the audience to register the win.
edit this build session into a 60s live-code short:
~/Movies/build.mov
style: style.deconstructed
archetype: 16:9 full-frame editor · me as bottom-right PIP
captions: captions.karaoke.scale-pop · marker.highlight on lib/brand names
TYPING: text.typewriter + sfx.typing
REFRESH: transition.shutter + whoosh + ding when UI lands
FEATURE: freeze 0.4s · marker.circle + impact
WOW: transition.zoom-through + text.slam "DONE"
end on transition.color-dip · render both aspects
style.deconstructedtext.typewriter
INPUT
PARSE
RENDER
SHIP
SCENARIO · FLOW / DIAGRAM
Pipeline walkthrough, node by node
Use for architecture diagrams, automation pipelines, user flows. Each node is a beat — push-in zoom, glass-card description, ding, then staggered-blocks transition to the next node. Final pull-out reveals the whole system.
edit this flow walkthrough into a 75s explainer:
~/Movies/flow.mov
style: style.data-drift
archetype: full-frame screen · NO PIP
per step: freeze · push-in zoom · card.glass-light on side
+ data.counter if a number is involved
+ transition.staggered-blocks to next step
+ sfx.ding on every step reveal
end: zoom-out reveal full flow · marker.highlight on key node
+ sfx.riser → transition.color-dip
render 9:16 and 16:9
style.data-drifttransition.staggered-blocks
01
Install deps
02
Configure env
03
Run command
04
Ship
SCENARIO · TUTORIAL / HOW-TO
Numbered steps, clinical precision
Use when the structure IS the content (4–6 steps). Each step gets its own card with a giant pink number. Push-slide transitions between steps reinforce "next, next, next." Recap fly-in at the end.
edit this tutorial into a 90s how-to:
~/Movies/tutorial.mov
style: style.swiss-pulse
archetype: archetype.screen-share
TITLE: gsap.split.chars reveal of the title
STEP N: big "01/02/03..." pink Anton number
+ card.glass-light 4-word title with card.inner-stagger
+ transition.push-slide between steps
+ sfx.ding on each number
RECAP: all numbers fly back in via gsap.stagger.center
render 9:16 and 16:9
style.swiss-pulsetransition.push-slide
דעה
למה זה לא עובד
ככהבוניםתוכן
SCENARIO · HEBREW HOT TAKE
RTL talking-head, fast cuts
Use for X / Instagram Hebrew shorts where you have a strong opinion to drop. Rubik Black RTL captions, English brand tokens stay Anton. Layout alternates A/B per beat to keep it kinetic. The default for Yuval shorts.
ערוך לי את הסרטון הזה כסרטון ויראלי של 30 שניות:
~/Movies/hottake.mov
style: style.maximalist-type · pink + yellow
archetype: archetype.selfie · alternate Layout A/B per beat
pace: 1.5-2s avg · one beat per sentence
captions: captions.karaoke.hebrew-rtl
markers: marker.circle on opinions · marker.sketchout on negations
transitions: transition.whip-pan + sfx.whoosh every cut
HOOK: text.slam + sfx.impact
CTA: sfx.riser → transition.color-dip
render 9:16 and 16:9
archetype.selfiecaptions.karaoke.hebrew-rtl
13Device Mockupsמוקאפי מכשירים
iPhone · MacBook · Watch · CSS3D · GSAP-driven
Pure CSS3D devices — no flat PNGs, every pixel rendered live so they animate, tilt, scroll, and respond to GSAP.
Drop your UI inside, swap the screen content per beat. Because Hyperframes captures DOM, the device IS in the rendered MP4.
9:415G ▮▮▮
YUV.AI
Device · iPhone Scroll
Phone tilts in with 3D perspective, content scrolls inside the screen, fill-bar progresses. The whole frame is real DOM — Hyperframes captures it pixel-perfect.
device.iphone.scrollWhen · app demos, mobile UI walkthroughs
9:415G ▮▮▮
LOCK
YUV.AI · NOW
Your video is ready · 9:16 + 16:9
Device · iPhone Notification
Lock screen with a push notification sliding in from the top with the iOS-native rubber-band overshoot. Use to dramatize a "and then this dropped" moment.
The effects people don't expect AI-edited video to have. Glitch text, liquid morphs, kinetic typography sweeps,
spotlight reveals, aurora gradients, particle fields. Pair with a hot take and people stop scrolling.
HACKED.
Magic · Glitch Text
Three layers of the same text — base, cyan offset, pink offset — jittered with random per-frame displacements. Feels broken in the best way.
Real WebGL 3D, rendered live in the browser. Hyperframes captures via headless Chromium → these go straight into your MP4.
Three.js is loaded once and shared across all 3D demos.
three.js · WebGL
TORUS KNOT SHIPPING
3D · Wireframe Torus Knot
Auto-rotating torus knot with brand-pink wireframe + ambient hot-spot lighting. The "tech-forward intro" hero.
three.torus-knotWhen · AI demos, abstract tech intros, hero loops
three.js · 1500 pts
PARTICLE CLOUD
3D · Particle Cloud
1500 GPU-rendered particles drifting through 3D space, color-mapped pink → yellow by depth. Auto-rotating camera.
three.particle-cloudWhen · data scenes, neural-network visuals
three.js · ExtrudeGeometry
EXTRUDED WORDMARK
3D · Extruded Wordmark
"YUV" extruded into 3D, slowly rotating with rim-light. CSS3D fallback when fonts can't be loaded into Three.js.
Bar race · line · donut · radar · map · sparklines
Beyond the basic data section: race-style ranking, animated line charts, donut breakdowns, radar comparisons,
pinned world maps. Built with GSAP + SVG/Canvas — no D3, no Chart.js, fully Hyperframes-capturable.
REELS0
SHORTS0
TIKTOK0
X0
LINKEDIN0
Charts · Bar Race
Five horizontal bars race to their values with synced number tickers. The premium way to show "platform engagement".
The full feature surface of heygen-com/hyperframes.
Most users only know about half. Here's the lot — voice-over, audio mixing, sub-compositions, lint, deterministic render, RTL, multi-aspect, frame adapters.
FEATURE 01
HTML is the source of truth
Compositions are plain HTML files with data-* attributes for timing. No React, no proprietary DSL, no build step. The browser plays your composition as-is.
Same input = identical output, frame-perfect. No Date.now(), no Math.random(), no async fetches inside timelines. Built for automated agent pipelines.
npx hyperframes render
FEATURE 03
ElevenLabs TTS · voiceover
Built-in text-to-speech via ElevenLabs. Generate narration from a script, get word-level timestamps for caption sync, mix into the audio track automatically.
npx hyperframes tts script.txt --voice rachel
FEATURE 04
Scribe transcription + word timestamps
ElevenLabs Scribe transcribes existing audio with per-word timing, speaker diarization, audio-event tags (laughter, hesitation). Drives every karaoke caption.
npx hyperframes transcribe audio.mp3
FEATURE 05
Multi-track audio mix
Stack voiceover + background music + SFX on independent tracks. Auto-ducking on the music when voiceover is active, 30 ms crossfades on every cut, deterministic mix.
data-track-index="0|1|2"
FEATURE 06
Sub-compositions
Reuse compositions inside other compositions via data-composition-src. Build a karaoke caption layer once, drop it into 50 videos. Composability scales.
data-composition-src="captions.html"
FEATURE 07
Frame adapters · GSAP / Lottie / CSS / custom
Bring your own animation runtime. GSAP timelines (default, frame-accurate), Lottie JSON imports, plain CSS keyframes, or write your own adapter for any clock-based system.
window.__timelines["hero"] = tl
FEATURE 08
RTL · LTR · bilingual first-class
Hebrew / Arabic / Farsi out-of-the-box via CSS dir="rtl". Mixed Hebrew+English in one caption: per-word language detection routes glyphs to Rubik / Anton automatically.
<div dir="rtl"> ... </div>
FEATURE 09
Multi-aspect render · 9:16 + 16:9
Render the same composition in multiple aspects from one source. The yuv-viral-video skill renders both vertical and horizontal in a single command — no manual reframing.
--aspect 9x16,16x9
FEATURE 10
Lint validator
Static-checks compositions before render: missing exits, captions never killed, opacity left at 0, scenes overflowing duration. Catches bugs that would otherwise surface as visual glitches in the MP4.
npx hyperframes lint
FEATURE 11
Live preview · hot reload
Browser preview with millisecond live-reload. Edit the HTML, see the change instantly. Scrub the timeline like a video editor.
npx hyperframes preview
FEATURE 12
Audio-reactive extraction
Pre-extract per-frame RMS energy and 8-band frequency spectrum to JSON. Drive any GSAP property with the bands. No Web Audio API at render time.
5 marker drawing modes (highlight / circle / burst / scribble / sketchout) for emphasis-word callouts. Fully GSAP-controlled, no external library.
/marker-highlight
FEATURE 15
fitTextFontSize runtime helper
Calculates the largest font size that keeps text on one line at a given max-width. Prevents overflow on long Hebrew phrases or portrait-mode captions.
window.__hyperframes.fitTextFontSize(text, opts)
FEATURE 16
pretext · pure-arithmetic measurement
Measure text dimensions without DOM reflow. 0.0002ms per call. Use for shrinkwrap containers, per-frame text reflow, layout pre-computation.
window.__hyperframes.pretext.layout(prep, w, h)
FEATURE 17
npx skills add one-line install
Auto-installs the hyperframes / gsap / hyperframes-cli / website-to-hyperframes skills into your AI agent (Claude Code, Cursor, Codex, Gemini-CLI). Run once, write video by chat forever.
npx skills add heygen-com/hyperframes
FEATURE 18
Apache 2.0 · fully open source
No per-render fees, no seat caps, no enterprise threshold. Use it commercially at any scale. Genuinely open source — not "source-available".
github.com/heygen-com/hyperframes
FEATURE 19
website-to-hyperframes
Companion skill that scrapes a URL and converts it into a starting Hyperframes composition. Drop a marketing page in, get an animated promo out.
/website-to-hyperframes <url>
FEATURE 20
Image / video primitive clips
Native <video>, <img>, <audio> with data-start/data-duration. Auto-mute, auto-loop, frame-accurate seek. The HTML you already know.
<video data-start="0" muted />
19How It Works · איך זה עובד
EN + עברית · plain-language explainer of every layer
Every demo above runs on a stack of open-source tools. Below — what each one is, why it's there, and how it fits, in English and Hebrew side-by-side.
Hebrew uses Google's Assistant font (the body counterpart to Rubik display).
01
Hyperframes
HTML → MP4 · open-source
An open-source video rendering framework by HeyGen that turns plain HTML into a frame-perfect MP4. You write the scene as an HTML file with data-start / data-duration attributes for timing — Hyperframes opens it in headless Chromium, captures every frame, and stitches them into a video. Same input always produces the same output, so it's safe for AI agents to drive end-to-end.
הייפרפריימס
HTML → MP4 · קוד פתוח
פלטפורמת רינדור וידאו של HeyGen שהופכת קובץ HTML פשוט לסרטון MP4 ברמת פריים. כותבים סצנה כקובץ HTML עם תכונות תזמון (data-start / data-duration), והכלי פותח את הקובץ בכרום ללא ממשק, מצלם כל פריים ומשרשר אותם לוידאו. אותה כניסה תמיד תיתן את אותה יציאה — כך שזה בטוח לסוכני AI להפעיל מקצה לקצה.
02
video-use
Cuts · transcription · ffmpeg
An open-source skill by browser-use. It transcribes your raw footage with ElevenLabs Scribe (word-level timestamps), picks cut boundaries on word edges, color-grades each segment, mixes 30 ms audio fades over every cut, and produces a clean base.mp4. This is the "cuts + grade" layer that runs before Hyperframes adds the visual polish.
video-use
חיתוכים · תמלול · ffmpeg
סקיל קוד פתוח של browser-use. הוא מתמלל את הצילום הגולמי עם ElevenLabs Scribe (חותמות זמן ברמת מילה), בוחר נקודות חיתוך בגבולות מילים, מבצע תיקוני צבע לכל קטע, מערבב פאדים של 30 מילישניות בכל מעבר, ומפיק קובץ base.mp4 נקי. זו שכבת "חיתוכים + צבע" שרצה לפני ש-Hyperframes מוסיפה את הליטוש החזותי.
03
yuv-viral-video
YUV.AI editorial style · the conductor
The skill I built — it sits on top of Hyperframes + video-use and tells them how YUV.AI videos look. Liquid-glass cards, MrBeast pacing, karaoke captions with active-word highlight, "never cover the speaker's face," Anton for English / Rubik Black for Hebrew, always 9:16 + 16:9, always versioned saves. One skill installed, full editorial style applied automatically.
yuv-viral-video
סטייל ה-YUV.AI · המנצח
הסקיל שאני בניתי — הוא יושב מעל Hyperframes ו-video-use ומסביר להם איך סרטוני YUV.AI אמורים להיראות. כרטיסי זכוכית, קצב MrBeast, כתוביות קריוקי שמדגישות את המילה הפעילה, "אף פעם לא לכסות את הפרצוף של הדובר", Anton לאנגלית / Rubik Black לעברית, תמיד 9:16 ו-16:9, תמיד שמירה ממוספרת. סקיל אחד מותקן, סטייל מלא מוחל אוטומטית.
04
GSAP
Animation library · seekable timelines
The animation engine. Every entrance, exit, scale-pop, idle float, and transition you scrolled past is a GSAP timeline — meaning you can scrub it backwards and forwards, seek to any second, and Hyperframes can capture it frame-perfect. Since 2024 the entire library (including SplitText, MotionPath, ScrollTrigger) is free to use commercially.
GSAP
ספריית אנימציה · ציר זמן ניווטי
מנוע האנימציה. כל כניסה, יציאה, פעימת סקייל, ריחוף, ומעבר שגללת מעליו הוא ציר זמן של GSAP — כלומר אפשר לעבור אחורה וקדימה, לדלג לכל שנייה, ו-Hyperframes יכולה לצלם את זה בדיוק מושלם. מאז 2024 כל הספרייה (כולל SplitText, MotionPath, ScrollTrigger) חופשית לשימוש מסחרי.
05
ElevenLabs Scribe
Word-level transcription · diarization
ElevenLabs' speech-to-text model. We feed it raw audio and it returns every spoken word with millisecond-precise start/end timestamps, speaker diarization (who said what), and audio-event tags (laughter, hesitation, music). These timestamps are what makes the active-word karaoke captions snap to the speaker.
ElevenLabs Scribe
תמלול ברמת מילה · זיהוי דוברים
מודל תמלול הדיבור של ElevenLabs. מזינים אותו באודיו גולמי והוא מחזיר כל מילה שנאמרה עם חותמות זמן מדויקות ברמת מילישניה, זיהוי דוברים (מי אמר מה), ותגי אירועי שמע (צחוק, היסוס, מוזיקה). חותמות הזמן האלה הן מה שגורם לכתוביות הקריוקי להידבק לדובר במדויק.
06
ElevenLabs TTS · Voiceover
Text-to-speech · voice cloning
The reverse direction: write a script, get a natural-sounding voiceover. ElevenLabs voice synthesis (with optional voice cloning) generates the audio, returns word-level timestamps for caption sync, and Hyperframes mixes it into the audio track. Use it for narration over screen-recordings or when you want a video without filming yourself.
ElevenLabs TTS · קריינות
המרת טקסט לדיבור · שכפול קול
הכיוון ההפוך: כותבים תסריט, מקבלים קריינות טבעית. סינתזת הקול של ElevenLabs (עם אפשרות לשכפול הקול שלך) מייצרת את האודיו, מחזירה חותמות זמן ברמת מילה לסנכרון כתוביות, ו-Hyperframes מערבבת את זה לתוך פס הקול. שימושי לקריינות מעל הקלטות מסך או כשרוצים סרטון בלי לצלם את עצמך.
07
Three.js
WebGL 3D · runs in the browser
The 3D engine. Powers the rotating wireframe knot and the 1500-particle cloud you saw above. Because Hyperframes captures the live DOM (including WebGL canvases), real 3D scenes go straight into the rendered MP4 — no separate 3D pipeline, no exporting from Blender. Same browser, same engine, MP4 out.
Three.js
WebGL תלת-ממדי · רץ בדפדפן
מנוע התלת-ממד. מפעיל את הטורוס הסיבובי וענן 1500 החלקיקים שראית למעלה. מכיוון ש-Hyperframes מצלמת את ה-DOM החי (כולל קנבסי WebGL), סצנות תלת-ממד אמיתיות נכנסות ישר לתוך ה-MP4 שמתרנדר — בלי פייפליין נפרד לתלת-ממד, בלי לייצא מ-Blender. אותו דפדפן, אותו מנוע, MP4 בסוף.
08
Chromium · Headless
The render engine · pixel-perfect
The same browser engine that powers Chrome — but running headless (no UI). Hyperframes spins up a Chromium instance, opens your composition, and captures every frame at the requested resolution and frame rate. This is why CSS that works in Chrome works in your video.
Chromium · ללא ממשק
מנוע הרינדור · דיוק פיקסל
אותו מנוע דפדפן שמפעיל את Chrome — אבל רץ ללא ממשק גרפי. Hyperframes מרים מופע של Chromium, פותח את הקומפוזיציה שלך, ומצלם כל פריים ברזולוציה וקצב הפריימים שביקשת. בגלל זה CSS שעובד ב-Chrome יעבוד בסרטון שלך.
09
ffmpeg
Video swiss-army knife
The encoder that takes the captured frames + audio tracks and muxes them into a final MP4. Also handles the cut-and-concat in video-use, the 30 ms audio crossfades, the multi-aspect rendering. It's the most-installed video tool on Earth — and it runs locally, no cloud upload.
ffmpeg
סכין הצבא השוויצרי של הוידאו
הקודק שלוקח את הפריימים שנלכדו + פסי האודיו ומשלב אותם ל-MP4 סופי. גם מבצע את החיתוכים והשרשור ב-video-use, פאדי האודיו של 30 מילישניות, רינדור במספר יחסי גובה-רוחב. הכלי הוידאו הכי מותקן בעולם — ורץ מקומית, בלי להעלות לענן.
10
Anton · Rubik · Inter · Assistant
Free Google Fonts · the YUV.AI type stack
Free Google Fonts. Anton (English display, all uppercase) and Rubik Black (Hebrew display, weight 900) for headlines and karaoke. Inter (English) and Assistant (Hebrew) for body. The browser auto-routes per-glyph: Latin chars → Anton/Inter, Hebrew chars → Rubik/Assistant. One font-family declaration handles bilingual text.
Anton · Rubik · Inter · Assistant
גוגל פונטס חינמי · ערימת הפונטים של YUV.AI
פונטים חינמיים מגוגל. Anton (פונט תצוגה לאנגלית, אותיות גדולות בלבד) ו-Rubik Black (פונט תצוגה לעברית, משקל 900) לכותרות ולקריוקי. Inter (אנגלית) ו-Assistant (עברית) לגוף הטקסט. הדפדפן מנתב אוטומטית לפי גליף: תווים לטיניים → Anton/Inter, תווים בעברית → Rubik/Assistant. הצהרת font-family אחת מטפלת בטקסט דו-לשוני.
11
RTL · LTR · bilingual rendering
Hebrew + English in one frame · first-class
Adding dir="rtl" to a container flips text flow for Hebrew/Arabic/Farsi. Mixed-language captions work because the browser handles bidirectional text natively — Hebrew reads right-to-left, English brand tokens stay LTR inside the same line. No hacks, no manual reordering, no Python preprocessing.
ימין-לשמאל · שמאל-לימין · רינדור דו-לשוני
עברית + אנגלית באותו פריים · מובנה
הוספת dir="rtl" לקונטיינר הופכת את כיוון הטקסט עבור עברית/ערבית/פרסית. כתוביות מעורבות עובדות כי הדפדפן מטפל בטקסט דו-כיווני באופן מובנה — עברית נקראת מימין לשמאל, מילי מותג באנגלית נשארות LTR בתוך אותה שורה. בלי טריקים, בלי סידור ידני, בלי עיבוד מקדים בפייתון.
12
How a video gets made — the loop
Source → MP4 in one prompt
You drop a path to your raw .mov and one sentence: "edit this with karaoke.scale-pop and marker.circle on stats." The skill transcribes (Scribe), picks beats, builds a base via ffmpeg, generates an HTML composition with GSAP timelines + glass cards + karaoke, runs Hyperframes (Chromium captures frame-by-frame), and ffmpeg muxes the final MP4 — both 9:16 and 16:9, saved as final_<aspect>_V<N>.mp4. Two minutes, two files, your style.
איך סרטון נוצר — הלולאה
מקור → MP4 בפרומפט אחד
אתה זורק נתיב לקובץ .mov גולמי ומשפט אחד: "ערוך לי את זה עם karaoke.scale-pop ו-marker.circle על הסטטיסטיקות." הסקיל מתמלל (Scribe), בוחר ביטים, בונה בייס דרך ffmpeg, מייצר קומפוזיציית HTML עם צירי זמן של GSAP + כרטיסי זכוכית + קריוקי, מריץ את Hyperframes (Chromium מצלם פריים-בפריים), ו-ffmpeg משלב ל-MP4 סופי — גם 9:16 וגם 16:9, נשמר כ-final_<יחס>_V<מספר>.mp4. שתי דקות, שני קבצים, הסטייל שלך.
Course by Yuval Avidaniהקורס של יובל אבידני
Master Claude Desktop. Practical AI Training.
תשתלטו על Claude Desktop. קורס מעשי, צעד אחר צעד.
A recorded, step-by-step Hebrew course where Yuval teaches you to make Claude Desktop your most powerful work tool. Connect Claude to Gmail and Calendar, analyze emails, organize files and folders, extract information from documents, build apps without code, run Skills automations — everything from one tool, one window, in full control.
קורס מוקלט, מעשי, צעד-אחר-צעד שבו יובל מלמד אתכם להפוך את Claude Desktop לכלי העבודה הכי חזק שיש לכם. נחבר את Claude ל-Gmail וליומן, ננתח מיילים, נסדר את הבלגן בקבצים ובתיקיות, נחלץ מידע ממסמכים, נבנה אפליקציות בלי קוד, נריץ אוטומציות עם Skills — הכל מכלי אחד, חלון אחד, בשליטה מלאה.
01 · COREFull Claude Masteryשליטה מלאה ב-ClaudeChat / Co-Work / Code Mode · install + advanced settings · the assistant that remembers everything and works non-stop.Chat / Co-Work / Code Mode · התקנה והגדרות מתקדמות · העוזר שזוכר הכל ועובד בלי הפסקה.
02 · BUILDNo-Code Developmentפיתוח בלי קודGames, apps, websites — in one conversation. Custom Chrome extension. A Flappy Bird clone in 60 seconds.משחקים, אפליקציות, אתרים — בשיחה אחת. תוסף Chrome מותאם אישית. משחק Flappy Bird ב-60 שניות.
03 · INBOXEmail + Calendar Autoמייל ויומן על אוטומטGmail filtering + auto-summary · smart Google Calendar sync · 1+ hour saved every day.סינון וסיכום אוטומטי של Gmail · סנכרון חכם עם Google Calendar · חיסכון של שעה+ ביום.
04 · DATAPro Data Analysisניתוח נתונים כמו מומחהExcels, receipts, reports · CSV comparison + image classification · insights from data sitting in folders for months.ניתוח אקסלים, קבלות, דוחות · השוואת CSV וסיווג תמונות · תובנות מנתונים שישבו בתיקיות חודשים.
05 · AUTOSkills + AutomationsSkills ואוטומציותBuild custom Skills · connect to Slack, Netlify, Chrome · daily automation: stock + report analysis.יצירת Skills מותאמים אישית · חיבור ל-Slack, Netlify, Chrome · אוטומציה יומית: ניתוח מניות ודוחות.
06 · CODEClaude CodeClaude CodeSenior-developer-grade automations · publishing websites live · end-to-end work pipelines.אוטומציות ברמה של מפתח בכיר · פרסום אתרים לאוויר · pipeline עבודה מקצה לקצה.
🎁 Bonus · Free🎁 מתנה · חינם~200 ready-to-use prompts guide (PDF) — worth ₪497, included free with the course. Tagged by tool (Chat / Co-Work / Code) and by domain (legal, finance, HR, marketing, design, management, entrepreneurship, dev, data, security, education, academia).מדריך כ-200 פרומפטים מוכנים לשימוש מיידי (PDF) — שווי ₪497, חינם עם הקורס. מסומנים לפי כלי (Chat / Co-Work / Code) ולפי תחום מקצועי (משפט, פיננסים, HR, שיווק, עיצוב, ניהול, יזמות, פיתוח, דאטה, סייבר, חינוך, אקדמיה).
₪1,480One-time · VAT includedתשלום חד-פעמי · כולל מע"מ
★ GitHub Star × 2★ GitHub Star × 2★ AWS Gen AI Superstar × 2★ AWS Gen AI Superstar × 2~19 years in tech~19 שנות ניסיון בטכנולוגיהFeatured on Israeli mediaמתראיין בתקשורת הישראליתSpeaks worldwideמרצה בארץ ובעולם
🔒 Secure payment · instant email access · watch from any device · unlimited viewing · lifetime updates · studio-quality production
🔒 תשלום מאובטח · גישה מיידית למייל · צפייה מכל מכשיר · ללא הגבלת זמן · עדכונים שוטפים לכל החיים · הפקת אולפן באיכות גבוהה
Built by Yuval Avidani · Find me everywhereנבנה על ידי יובל אבידני · מצאו אותי בכל מקום
CONNECT. SHIP VIRAL.בואו נתחבר. נשלח ויראלי.
I'm Yuval Avidani — I build AI tools, teach Claude Code on practical.yuv.ai, and ship videos with the exact pipeline you're scrolling through. Catch me on any of these — DMs open for collabs, questions, and "how did you build that" threads.אני יובל אבידני — בונה כלי AI, מלמד Claude Code ב-practical.yuv.ai, ושולח סרטונים עם בדיוק הפייפליין שגללת מעליו. תפסו אותי בכל אחד מאלה — ה-DM פתוח לשיתופי פעולה, שאלות, ושיחות בסגנון "איך בנית את זה".