New Presets - Sunburst: Interactive Hierarchy Drill-Down Animation (Batch 2/11) #342
Description
[
{
"prompt": "Create a typokinetic sunburst hierarchy preset that reveals category text labels in concentric ring formations. Start with a central category word that pulses and glows, then animate outer ring labels radiating outward like a sunburst diagram expanding. Each ring represents a hierarchy level - use TextAtom components positioned absolutely in circular arrangements using CSS transforms (rotate + translateX). Words should fade-in sequentially from center outward with staggered timing (0.15s delays per ring level). Apply scale-up animations (0.8 to 1.0) combined with opacity (0 to 1) as each word appears. The central hub word should have a subtle continuous pulse effect using scale oscillation (1.0 to 1.05). Use caption data to extract hierarchy keywords - leverage word metadata 'impact' scores to size text proportionally (higher impact = larger font). Implement a 'drill-down' effect where hovering/focusing causes the selected ring segment to scale up (1.15x) while others dim (opacity 0.4). The animation timeline should build outward like data visualization reveals - fast initial burst, then settling into position.",
"technicalSpecs": "Structure: Nested BaseLayout containers - outer wrapper with 'relative w-full h-full flex items-center justify-center', inner containers for each ring level positioned absolutely. Use containerProps.className for ring containers: 'absolute inset-0 flex items-center justify-center'. TextAtom components per word with individual rotation transforms calculated from index (360deg / wordCount * index). Effects: Generic keyframe effects for opacity [0, 1], scale [0.8, 1.0], translateX [-20, 0] with ease-out easing. Central word gets waveform effect with subtle scale (sensitivity: 0.05) for pulse. Timing: Relative timing per ring - ring 1 starts at 0, ring 2 at 0.3 relative, ring 3 at 0.6 relative. Use fitDurationTo: 'children' for adaptive duration. Caption integration: Map caption words to hierarchy levels, use word.metadata.impact for fontSize calculation (clamp between 14-48px). Performance: Use transform and opacity only for GPU acceleration, avoid layout-triggering properties."
},
{
"prompt": "Design an interactive data-drill typography preset mimicking Nivo sunburst zoom interactions. Implement a 'zoom-into-category' animation where clicking/selecting a category word triggers a dramatic zoom (scale 1 to 3) centered on that word while surrounding words blur and fade out. Use a radial layout with TextAtom words arranged in arc segments - each arc represents a data category. The zoom animation should use spring easing for organic feel (tension: 180, friction: 12 equivalent). Include breadcrumb trail typography at top showing hierarchy path with slash separators, animated with slide-in from left. When 'drilling down', new sub-category words should burst outward from the zoomed parent using staggered radial animations. Implement depth-of-field effect with blur increasing for words further from focus point. Use caption sentence structure to group related words into category arcs.",
"technicalSpecs": "Structure: Main BaseLayout 'relative w-full h-full overflow-hidden bg-black', breadcrumb container 'absolute top-4 left-4 flex gap-2 text-white/70', sunburst container 'absolute inset-0 flex items-center justify-center'. Arc segments use CSS clip-path or positioned TextAtoms with transform: rotate(Xdeg) translateX(radius). Effects: Create internal effect preset 'zoom-focus' with scale [1, 3], blur neighbors [0, 8px], opacity neighbors [1, 0.2]. Spring easing via custom bezier approximation (0.175, 0.885, 0.32, 1.275). Blur effect on non-focused words using filter: blur() in effects array. Timing: Zoom duration 0.6s, sub-category burst 0.4s with 0.05s stagger. Use relative timing - zoom starts at 0, blur at 0.1, fade at 0.15, sub-burst at 0.5. Caption: Group words by sentence for category grouping, use word.wordIndex for positioning within arc. Performance: will-change: transform, filter on animated elements. Use opacity and transform for main animations, filter: blur() sparingly."
},
{
"prompt": "Build a concentric ring typography reveal preset inspired by sunburst chart segments. Each ring is a sentence from captions, with words arranged in circular paths. Animate rings spinning into view with different rotation speeds - outer rings slower, inner rings faster (parallax depth effect). Words should typewriter-reveal along each ring's path, following the circular trajectory. Implement segment highlighting where related category words glow together when any word in the segment is emphasized. Use color coding per ring/category level (gradient from warm center to cool outer). The overall effect should feel like data visualization coming alive - clinical precision with organic motion. Include subtle continuous rotation on outer rings (0.5deg/s) for ambient movement after initial reveal.",
"technicalSpecs": "Structure: Concentric BaseLayout containers with 'absolute rounded-full flex items-center justify-center' for each ring, sized progressively (ring1: w-32 h-32, ring2: w-64 h-64, etc.). TextAtom positioned using transform: rotate(angle) translateX(radius) rotate(-angle) to keep text upright. Use containerProps.style for dynamic ring sizing based on hierarchy depth. Effects: Ring rotation using rotate keyframes [random start angle, final angle] with ease-out. Word reveal: opacity [0, 1], scale [0.5, 1] staggered by word.wordIndex * 0.1. Continuous ambient rotation via waveform effect with very low sensitivity for subtle drift. Timing: Each ring has relative duration - calculate based on word count in ring. Use fitDurationTo: 'scene' for overall timing. Caption: Map sentences to rings, word.relativeStartTime for typewriter effect within ring. Tailwind: 'transform-gpu' for hardware acceleration, ring color via 'text-orange-400' (inner) to 'text-blue-400' (outer)."
},
{
"prompt": "Create a hierarchy breakdown typokinetic preset with cascading drill-down animation. Visualize data hierarchy as nested boxes that expand on interaction - parent category word centered, child categories arranged below in smaller text. When drilling down, the parent zooms to fill frame while children slide up and become the new parent level. Implement accordion-style vertical expansion with words stacking and restacking. Use weight/size changes to indicate hierarchy level (bold 700 for parents, 400 for children). Include connecting lines (using ShapeAtom) that animate drawing between parent and children nodes. The visual metaphor is a org-chart or tree-map being navigated through text alone.",
"technicalSpecs": "Structure: Vertical flex layout BaseLayout 'flex flex-col items-center justify-center gap-8 w-full h-full'. Parent word container 'text-4xl font-bold', children container 'flex flex-wrap justify-center gap-4'. ShapeAtom for connecting lines with stroke-dasharray animation for draw effect. Use repeatChildrenProps for consistent child styling. Effects: Parent zoom [scale 1 to 1.5, translateY 0 to -30%], children slide [translateY 50 to 0, opacity 0 to 1] with 0.1s stagger. Line draw effect: strokeDashoffset animation from full length to 0. Use ease-in-out for organic feel. Timing: Parent zoom 0.4s, line draw 0.3s delayed 0.2s, children reveal 0.5s delayed 0.4s. All relative timing within 1.5s total sequence. Caption: Use sentence structure for hierarchy - first word as parent, remaining as children. Font: 'Inter:700:normal' for parents, 'Inter:400:normal' for children. Sub-preset: Create 'hierarchy-node' sub-preset for reusable parent-children structure."
},
{
"prompt": "Design an audio-reactive sunburst typography preset where ring segments pulse and scale with beat detection. Words arranged in concentric circles respond to audio - bass frequencies affect inner rings (scale pulse), mid frequencies affect middle rings (brightness pulse), treble affects outer rings (blur pulse). Category words have persistent glow effects that intensify on beats. Implement beat-synchronized word reveals where new category words appear precisely on detected beats. The visual should feel like a music visualizer merged with data visualization - analytical structure with rhythmic life. Use waveform effects extensively with different audio properties per ring level.",
"technicalSpecs": "Structure: Concentric ring BaseLayouts with 'absolute inset-0 flex items-center justify-center'. Each ring has distinct audio binding. Use containerProps for ring-specific styling. Effects: Inner ring waveform effect - audioProperty: 'bass', effectType: 'scale', sensitivity: 0.3, baseValue: 1, range: 0.2. Middle ring - audioProperty: 'mid', effectType: 'exposure', sensitivity: 0.4. Outer ring - audioProperty: 'treble', effectType: 'blur', sensitivity: 0.2, baseValue: 0, range: 3. Word reveals use audio analysis API: fetch beats, filter impactful beats (intensity > 0.7), map to word reveal times. Timing: Use audio analysis timestamps for word.relativeStartTime override. fitDurationTo: 'audio' source. Caption: Words distributed across rings by metadata.impact score (high impact = inner, low = outer). AudioAtom included for playback sync. Performance: Limit waveform effects to 3 concurrent for performance, use will-change: transform on pulsing elements."
},
{
"prompt": "Build a data exploration typography preset with hover-zoom micro-interactions. Display category words in a sunburst arrangement where each word is independently interactive - hovering scales up the word (1.2x) and reveals related sub-category words that orbit around it. Implement magnetic cursor effect where nearby words slightly attract toward interaction point. Use depth layering with z-index changes on hover - focused word comes to front while others recede with slight scale-down (0.95x) and desaturation. Include smooth transitions between states with spring physics. The effect should feel like exploring a mind-map or concept diagram through tactile interaction.",
"technicalSpecs": "Structure: Main BaseLayout 'relative w-full h-full' with TextAtom words positioned absolutely using percentage-based positioning (top: X%, left: Y%) calculated from radial coordinates. Each word wrapped in interactive container. Use containerProps.style for dynamic positioning. Effects: Hover state - scale [1, 1.2], z-index change (handled via className), shadow [none, '0 4px 20px rgba(0,0,0,0.3)']. Non-hovered neighbors - scale [1, 0.95], filter: saturate [1, 0.7], opacity [1, 0.7]. Sub-category reveal - opacity [0, 1], scale [0.5, 1], rotate orbit animation around parent. Timing: Hover transitions 0.25s with spring easing (0.68, -0.55, 0.265, 1.55). Sub-reveal stagger 0.08s per word. Magnetic effect calculated via translateX/Y based on cursor proximity. Caption: Parent words from sentence starts, sub-categories from remaining words in sentence. Tailwind: 'transition-all duration-300 ease-out cursor-pointer' for interactive words. 'hover:z-50' for depth management."
},
{
"prompt": "Create a sequential drill-down narrative preset that tells a story through hierarchy exploration. Start with overview showing all top-level categories arranged in sunburst, then automatically animate through each category - zooming in, revealing children, pausing for comprehension, then zooming out and moving to next. This creates a guided tour through data hierarchy as video content. Use chapter-like transitions between categories with fade-to-black or blur transitions. Include progress indicator (dots or bar) showing position in hierarchy exploration. Voice-over timing can sync with caption data for narrated data exploration videos.",
"technicalSpecs": "Structure: Scene-type preset with sequential category explorations. Main container 'relative w-full h-full bg-gradient-to-br from-slate-900 to-slate-800'. Progress indicator 'absolute bottom-8 left-1/2 -translate-x-1/2 flex gap-2'. Each category exploration as sub-preset with zoom-in, hold, zoom-out phases. Use containerProps.className for consistent styling. Effects: Category zoom - scale [1, 2], others opacity [1, 0] over 0.5s. Hold phase - subtle float animation translateY [0, -5, 0]. Zoom out - reverse of zoom in. Transition between categories - blur [0, 10, 0] as wipe effect. Progress dots - scale [1, 1.3] and backgroundColor change for active. Timing: Each category sequence ~3s (0.5s zoom in, 2s hold, 0.5s zoom out). Total duration = categories * 3s. Use relative timing within each sub-preset. fitDurationTo: 'scene'. Caption: Map sentences to categories, word timing for narration sync. Use word.absoluteStartTime for voiceover alignment. Sub-presets: 'category-exploration' sub-preset for each zoom sequence, composed in main scene preset."
},
{
"prompt": "Design a particle-burst category reveal preset where words explode outward from center point then settle into sunburst positions. Initial state: all words stacked at center, invisible. Animation: words burst outward with physics-like motion (fast initial velocity, deceleration), slight overshoot past final position, then spring back to settle. Each ring level has different burst timing - inner first, outer last (reverse of typical sunburst build). Add particle trails using pseudo-elements or small ShapeAtoms that follow word paths briefly then fade. The effect should feel explosive and energetic - perfect for reveal moments in data storytelling videos.",
"technicalSpecs": "Structure: Single BaseLayout 'relative w-full h-full flex items-center justify-center overflow-hidden'. TextAtom words all start at center (top-50% left-50% transform -translate-x-1/2 -translate-y-1/2). Particle trails as small ShapeAtom circles positioned along word trajectory. Effects: Burst animation - translateX [0, finalX * 1.15, finalX], translateY [0, finalY * 1.15, finalY] creating overshoot. Scale [0.3, 1.2, 1] for punch effect. Opacity [0, 1, 1]. Easing: ease-out for burst, spring for settle. Particle trails - opacity [0.8, 0], scale [1, 0.3], follow word path with 0.1s delay. Timing: Inner ring burst at 0s, middle at 0.15s, outer at 0.3s. Each burst 0.6s duration with settle. Particles fade over 0.4s. Total sequence ~1.2s. Caption: Distribute words to rings by sentence order (first sentence = inner, etc.). Calculate final positions from ring index and word index within ring. Performance: Use transform only, batch particle animations, limit to 20 particles max. Tailwind: 'will-change-transform' on all animated elements."
},
{
"prompt": "Build a focus-blur depth typography preset simulating camera rack focus through hierarchy levels. Display all sunburst rings simultaneously but with depth-of-field blur - only one ring in sharp focus at a time. Animate focus shifting from center outward (or following user attention), with smooth blur transitions creating cinematic depth. Focused ring has enhanced contrast and slight scale boost. Include subtle vignette effect darkening edges. Words in focus have text-shadow glow, out-of-focus words are desaturated. The effect mimics documentary-style data visualization cinematography with shallow depth of field aesthetic.",
"technicalSpecs": "Structure: Layered BaseLayouts for each ring with 'absolute inset-0 flex items-center justify-center'. Vignette overlay as top-layer div with 'absolute inset-0 pointer-events-none' and radial-gradient background. Effects: Ring focus state - filter: blur [8px, 0px], scale [0.98, 1.02], filter: saturate [0.6, 1], textShadow [none, '0 0 20px currentColor']. Rack focus transition between rings - blur animates 0 to 8 on leaving focus, 8 to 0 on entering. Timing: Focus hold per ring 1.5s, transition 0.4s with ease-in-out. Sequence: center ring focused 0-1.5s, transition 1.5-1.9s, ring 2 focused 1.9-3.4s, etc. Use relative timing within each focus phase. Caption: Ring assignment by sentence, focused ring words can have letter-spacing expansion [0, 2px] for emphasis. Vignette: CSS radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.6) 100%). Tailwind: 'backdrop-blur-sm' fallback, 'filter' utilities where applicable. Performance: filter: blur() is expensive - limit to 3 rings max, use will-change: filter."
},
{
"prompt": "Create a typewriter-radial preset combining classic typewriter text reveal with sunburst positioning. Words type out letter-by-letter but along circular paths - each letter appears sequentially following the ring curvature. Start from center word typing outward, then first ring types clockwise, second ring counter-clockwise (alternating direction per ring). Include cursor indicator (blinking line or underscore) that travels along the typing path. Add subtle mechanical sounds sync points in timing for video editors to add typewriter SFX. The blend of vintage typewriter aesthetic with modern data visualization creates unique retro-futuristic feel.",
"technicalSpecs": "Structure: Ring containers as before with 'absolute rounded-full'. Individual letter spans within TextAtom for letter-level animation (or use multiple TextAtoms per letter). Cursor as ShapeAtom rectangle 'w-0.5 h-6 bg-current' positioned at typing front. Effects: Letter reveal - opacity [0, 1] with 0.03s per letter stagger. Cursor blink - opacity [1, 0, 1] looping 0.5s. Cursor position - translateX/rotate following text path. Ring direction alternation via rotate direction in positioning calculation. Timing: Center word 0.5s, ring 1 clockwise 1s, ring 2 counter-clockwise 1.2s. Letter timing: word.length * 0.03s per word. Include timing markers at word completions for SFX sync (metadata in preset output). Caption: Direct word mapping, use word.word.split('') for letter access if needed, or TextAtom per word with staggered reveal. Sound sync: Output timing array with word completion timestamps for audio editor reference. Tailwind: 'font-mono' for typewriter aesthetic, 'tracking-wider' for letter spacing. Performance: Many letter elements - use opacity only, avoid per-letter transforms."
},
{
"prompt": "Create a 'Calendar Flip Timeline' typography preset that simulates rapid calendar page flipping to reveal timestamp-based text. The visual concept: stack of calendar pages in 3D perspective that flip upward rapidly (like a flip clock), with each page revealing a different date/time marker until landing on the final timestamp where the main title text appears with kinetic emphasis. Structure uses nested BaseLayouts - outer container with perspective ('perspective-[1000px]'), inner flip container with preserve-3d, and individual page elements that rotate on X-axis. Each calendar page is a TextAtom showing date numbers with a paper texture background (cream/off-white with subtle shadow). The flip animation uses rotateX transforms from 0deg to -180deg with ease-in timing for the 'falling' feel. As pages flip faster, apply increasing motion blur via the blur effect property. Final page holds 2-3 frames longer before the title text scales up from the timestamp position. Use caption data to time the final title reveal - each word expands outward from center with spring easing. The rapid flip sequence should occupy first 40% of duration, blur transition 10%, and title kinetics 50%. Include paper flutter sound sync points in timing.",
"technicalSpecs": "Structure: Outer BaseLayout (containerProps.className: 'relative w-full h-full flex items-center justify-center perspective-[1000px] bg-gradient-to-b from-slate-800 to-slate-900'), Inner BaseLayout for flip stack (className: 'relative preserve-3d'), 8-12 calendar page BaseLayouts each containing TextAtom for dates. Effects: Generic keyframe effects for rotateX animation on each page with staggered delays (page1: 0-0.1, page2: 0.05-0.15, etc.), blur effect ramping from 0 to 4px during flip sequence then back to 0. Use repeatChildrenProps for calendar pages with incrementing z-index. Final title uses TextAtom with caption word-level timing, each word gets scale effect (0.3 to 1.0) and opacity (0 to 1) with spring easing. Timing: fitDurationTo 'scene', all child timings relative. Performance: Use transform and opacity only for flips (GPU compositing), will-change on actively animating elements. Calendar pages use Tailwind: 'absolute w-64 h-48 bg-amber-50 rounded shadow-xl border border-amber-200 flex items-center justify-center font-mono text-6xl text-slate-700'."
},
{
"prompt": "Build a 'Horizontal Timeline Scrub' preset featuring a filmstrip-style horizontal timeline that rapidly scrubs left-to-right, stopping at key timestamps where text elements pop out with kinetic typography. Visualize a horizontal strip showing time markers (like a video editor timeline) that accelerates through time, with the scrub head indicator moving and timestamps blurring past. When reaching target moments, the timeline decelerates (ease-out-expo) and text labels burst from the timestamp position. Structure as a full-width BaseLayout with overflow-hidden, containing a wide inner container that translates left (negative translateX). Timeline markers are repeated BaseLayouts with TextAtoms showing timecodes. The scrub playhead is an absolutely positioned vertical line element. Text reveals use caption data - as each timestamp is reached, corresponding words from captions animate: scale from 0 with rotate wobble, then settle into position with bounce easing. Include tick marks that blur during fast scrub (motion blur via horizontal blur filter). The scrub speed varies - fast between timestamps, slow approaching them (like magnetic snapping in editors).",
"technicalSpecs": "Structure: Root BaseLayout (containerProps.className: 'relative w-full h-full overflow-hidden bg-black'), Timeline strip BaseLayout (className: 'absolute h-32 top-1/2 -translate-y-1/2 flex items-end gap-8') with dynamic width based on duration. Repeated tick marks using repeatChildrenProps on thin BaseLayouts (className: 'w-px h-16 bg-white/30'). Major timestamp markers as TextAtom with timecode format. Playhead: BaseLayout (className: 'absolute w-1 h-full bg-red-500 shadow-[0_0_10px_rgba(255,0,0,0.8)] z-50'). Effects: translateX on timeline strip using generic keyframes with custom bezier easing (fast-slow-fast pattern), blur effect on tick marks (0-3px-0 synced to velocity), playhead glow pulse at stop points. Caption text uses separate TextAtoms positioned absolutely above timeline, appearing at specific relative times with scale (0.5-1.2-1.0 overshoot) and opacity effects. Timing: Use audio analysis to detect beats for optimal stop points if audio present, otherwise evenly distributed. Each text reveal spans 15% of total duration. Tailwind for text: 'absolute text-4xl font-bold text-white tracking-wide'. Performance: Hardware-accelerated transforms only, single timeline translation rather than individual element movements."
},
{
"prompt": "Design a 'Clock Hands Speed Ramp' typography preset where analog clock hands spin rapidly, blur into motion streaks, then resolve at specific times to reveal kinetic text. The clock face is minimal/abstract - just tick marks and hands. Hands accelerate from normal speed, spin multiple rotations with increasing blur, then snap to a specific time position where the timestamp transforms into readable text. Multiple clock instances can cascade across screen. Structure: Central clock BaseLayout with circular container, hour/minute hands as rotated BaseLayout elements with ShapeAtom rectangles. During spin-up phase, rotate transforms cycle through 0-360 multiple times with ease-in acceleration. Apply radial blur effect at peak speed (simulated via layered opacity trails). Resolution phase uses ease-out-back for satisfying snap. Text emerges from clock center - use caption words that expand outward radially, each word positioned at different angles like clock positions (12, 3, 6, 9 o'clock). Words scale up with slight rotation matching their angular position. Final composition holds with subtle tick animation on second hand.",
"technicalSpecs": "Structure: Root BaseLayout (containerProps.className: 'relative w-full h-full bg-slate-950 flex items-center justify-center'), Clock container BaseLayout (className: 'relative w-80 h-80 rounded-full border-4 border-white/20'), Tick marks via repeatChildrenProps (12 items, each rotated 30deg increments, className: 'absolute w-1 h-4 bg-white/60 top-2 left-1/2 -translate-x-1/2 origin-[center_156px]'), Hour hand BaseLayout (className: 'absolute w-2 h-24 bg-white rounded-full bottom-1/2 left-1/2 -translate-x-1/2 origin-bottom'), Minute hand similar but h-32. Effects: rotate effect on hands - keyframes [0, 0deg], [0.3, 1080deg], [0.5, 1440deg], [0.7, targetAngle] with custom easing. Blur effect [0, 0], [0.3, 8px], [0.5, 12px], [0.7, 0] for motion blur simulation. Trail effect via 3-4 duplicate hand elements with decreasing opacity and slight rotation offset. Caption text: 4-8 TextAtoms positioned radially using Tailwind 'absolute' with calculated top/left or transform positioning. Each word effect: scale [0-1], opacity [0-1], slight rotate to face outward. Timing: Spin sequence 0-0.6, resolution 0.6-0.75, text reveal 0.75-1.0. Use spring easing for final text settle."
},
{
"prompt": "Create a 'VHS Timestamp Glitch' preset combining retro video timestamp aesthetics with glitch typography. The look: VHS-style timestamp counter (like camcorder date/time overlay) that fast-forwards through time with scan line interference, RGB split glitches, and tracking errors. Numbers roll like an odometer accelerating, occasionally glitching/stuttering. When timestamp reaches target, it fragments apart and reassembles as the main title text with chromatic aberration trails. Structure uses monospace TextAtoms for timestamp display (format: 00:00:00:00), with duplicate layers offset for RGB split (red and blue channels). Overlay scan lines via repeating gradient pattern. Glitch moments introduce horizontal slice displacement (clip-path or translateY on segments). The number roll uses vertical translateY cycling through digit sprites. Final text assembly: caption words materialize from timestamp fragments, each carrying residual glitch effects that settle over time.",
"technicalSpecs": "Structure: Root BaseLayout (containerProps.className: 'relative w-full h-full bg-black overflow-hidden'), VHS overlay BaseLayout (className: 'absolute inset-0 pointer-events-none bg-[repeating-linear-gradient(0deg,transparent,transparent_2px,rgba(0,0,0,0.3)_2px,rgba(0,0,0,0.3)_4px)]'), Timestamp container BaseLayout (className: 'absolute bottom-8 right-8 font-mono'), Three TextAtom layers for RGB split - red (className: 'absolute text-red-500 mix-blend-screen'), base white, blue (className: 'absolute text-blue-500 mix-blend-screen'). Effects: translateX offset on RGB layers - red [-3px], blue [3px] base, with random jumps during glitch frames. translateY on digit containers cycling through number sequences. Random opacity flickers [1, 0.7, 1, 0.5, 1] at irregular keyframes for glitch. Horizontal slice effect via multiple clip-path regions with varying translateX. Filter effects: brightness spikes, contrast fluctuations. Caption text assembly: TextAtoms for each word, initial state scattered/rotated, animate to final positions with lingering RGB split that reduces over time. Timing: Timestamp roll 0-0.5 with glitch bursts at 0.15, 0.3, 0.42, fragmentation 0.5-0.65, text assembly 0.65-0.9, settle 0.9-1.0. Use ease-out for settling, linear for rolls, step functions for glitch snaps."
},
{
"prompt": "Build a 'Perpetual Calendar Mosaic' preset where calendar grid cells rapidly shuffle and reorganize, creating a mosaic pattern that resolves into typography. Concept: 7x5 grid of calendar day cells (like a month view) that scramble positions chaotically, dates blurring together, then snap into formation spelling out words or framing key text. Each cell is a small square with a date number. During shuffle phase, cells translate to random positions with rotation, overlapping chaotically. Resolution phase: cells slide to final positions - some form letter shapes (negative space typography), others frame the main text content. Use caption data to determine text content - words appear in sequence as grid stabilizes. The grid can pulse/breathe slightly after settling, with subtle color shifts on individual cells to create living texture. Include paper texture on cells and drop shadows for depth.",
"technicalSpecs": "Structure: Root BaseLayout (containerProps.className: 'relative w-full h-full bg-slate-800 flex items-center justify-center p-8'), Grid container BaseLayout (className: 'relative'), 35 calendar cells as BaseLayouts using repeatChildrenProps (each className: 'absolute w-16 h-16 bg-white rounded-lg shadow-lg flex items-center justify-center'), TextAtom in each cell showing date number (className: 'text-2xl font-medium text-slate-600'). Define target positions using CSS Grid coordinates (7 columns x 5 rows) converted to absolute pixel positions. Effects: Each cell gets translateX/translateY effects - initial random scatter positions (range -200 to 200), keyframes [0, random], [0.15, random2], [0.4, random3], [0.7, finalX/Y] creating chaotic movement. rotate effects [-45 to 45 initial, 0 final]. scale effects [0.8-1.2 during shuffle, 1.0 final]. Blur [2-4px during fast movement, 0 at rest]. Caption text: Central TextAtom (className: 'absolute text-5xl font-bold text-white z-50') with word-level timing, each word fades and scales in sequence. Post-settle: subtle scale oscillation (1.0-1.02) on cells with staggered phase for breathing effect. Timing: Shuffle chaos 0-0.6, resolution 0.6-0.85, text reveal 0.7-1.0, breathing loop continuous. Use ease-in-out-back for resolution snap."
},
{
"prompt": "Design a 'Timeline Zoom Burst' preset simulating the experience of zooming into a timeline at hyperspeed, passing through time markers that burst with text as you approach. Like flying through a tunnel of dates/times. Structure: Central vanishing point perspective with time markers arranged in Z-depth, scaling up rapidly as they 'approach' the camera. Each marker starts small and distant, grows as it approaches, then flies past camera (scale beyond 100%, blur, fade). As markers pass, they explode into word fragments that settle into readable typography. Use dramatic depth-of-field blur - distant markers blurry, passing markers sharp briefly then motion-blurred. Text from captions reveals progressively - each passing timestamp triggers next word/phrase. Final composition: all revealed words arranged in impactful layout. Include particle debris from passing markers for extra dynamism.",
"technicalSpecs": "Structure: Root BaseLayout (containerProps.className: 'relative w-full h-full bg-gradient-radial from-slate-700 to-black overflow-hidden perspective-[800px]'), Tunnel container (className: 'absolute inset-0 preserve-3d'), 8-12 timestamp markers as BaseLayouts with TextAtoms, positioned at varying translateZ depths (starting from -2000px to -200px). Each marker className: 'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 px-6 py-3 bg-white/10 backdrop-blur border border-white/30 rounded'. Effects: translateZ animation on each marker - staggered start times, moving from initial Z to +500px (past camera). scale coupled with Z position for correct perspective. blur effect: [0, 4px], [0.3, 0], [0.7, 0], [1.0, 8px] creating focus-blur-blur pattern. opacity: fade in at distance, full at center, fade out past. Word burst: TextAtom children of markers with explosion effect - translateX/Y radiating outward, then collecting at designated screen positions. Use childrenProps for burst animation timing. Particles: Small ShapeAtom circles with random trajectories post-burst. Caption timing: Each marker pass triggers next caption segment. Final text: className: 'absolute text-6xl font-black text-white text-center'. Timing: Stagger markers at 0.1 intervals, burst duration 0.15 each, collection phase final 0.3. Easing: ease-in for approach, ease-out for departure, spring for text collection."
},
{
"prompt": "Create a 'Mechanical Counter Roll' typography preset inspired by split-flap displays and mechanical counters (like airport departure boards). Individual character slots flip through alphanumeric sequences before landing on final letters. Each slot is a split-flap mechanism - top and bottom halves that flip independently with 3D rotation. Characters cycle rapidly (A-Z, 0-9) before stopping at target. Timing is staggered - first characters resolve before last, creating left-to-right reveal wave. Include mechanical sound sync opportunities at each flip. The flipping creates subtle shadows and depth. Once all characters resolve, add subtle glow or emphasis effect on complete word. Use caption data words as targets - each word gets its own counter bank that resolves in sequence.",
"technicalSpecs": "Structure: Root BaseLayout (containerProps.className: 'relative w-full h-full bg-slate-900 flex flex-col items-center justify-center gap-8'), Word row BaseLayouts for each caption word, Character slot BaseLayouts within each row (className: 'relative w-16 h-24 bg-slate-800 rounded overflow-hidden'), Each slot contains: top flap (className: 'absolute top-0 w-full h-1/2 bg-slate-700 origin-bottom overflow-hidden border-b border-slate-600'), bottom flap (className: 'absolute bottom-0 w-full h-1/2 bg-slate-700 origin-top overflow-hidden'), TextAtom in each half. Effects: rotateX on top flap [0deg to -90deg] and bottom flap [-90deg to 0deg] for flip mechanism - use step(1) or very fast ease-in for mechanical feel. Character content changes at flip midpoint. Shadow effect: dynamic box-shadow during flip [0, '0 0 0 rgba(0,0,0,0)'], [0.5, '0 10px 20px rgba(0,0,0,0.5)'], [1, '0 0 0 rgba(0,0,0,0)']. Multiple flip cycles before landing (3-8 flips per character). Stagger: leftmost characters start at 0, each subsequent adds 0.05 delay. Final state glow: text-shadow or filter brightness pulse on complete word. Tailwind for text: 'text-4xl font-bold text-white font-mono tracking-tighter'. Timing: Use caption word timing for each word bank reveal start, character resolution 0.3-0.5s per word depending on length. Sound markers at each flip apex for audio sync."
},
{
"prompt": "Build a 'Dateline News Ticker' preset combining breaking news urgency with timestamp precision. Lower-third news ticker aesthetic with scrolling timestamp that accelerates, flashes urgently, then reveals headline text. Structure: Lower portion of screen with gradient background bar, timestamp on left that counts/scrolls rapidly, separator line/element, then headline text that types in or slides in from right. Add 'BREAKING' or 'LIVE' badge that pulses. The timestamp scroll creates urgency - numbers blur during acceleration. When target time reached, visual 'lock' effect (flash, border pulse) before headline reveals. Headline uses caption data - words type in sequentially with cursor blink, or slide in word-by-word. Include subtle screen shake on 'lock' moment for impact. Color scheme: urgent reds, clean whites, professional blacks.",
"technicalSpecs": "Structure: Root BaseLayout (containerProps.className: 'relative w-full h-full bg-slate-950'), Lower-third bar BaseLayout (containerProps.className: 'absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-r from-red-900 via-red-800 to-slate-900 border-t-4 border-red-500', containerProps.style: {boxShadow: '0 -10px 30px rgba(220,38,38,0.3)'}), Badge BaseLayout (className: 'absolute -top-4 left-8 px-4 py-1 bg-red-600 rounded text-white font-bold text-sm tracking-wider'), Timestamp section (className: 'absolute left-8 top-1/2 -translate-y-1/2 font-mono text-3xl text-white'), Separator (className: 'absolute left-64 top-4 bottom-4 w-1 bg-red-500'), Headline area (className: 'absolute left-72 right-8 top-1/2 -translate-y-1/2'). Effects: Timestamp TextAtom with rapid number cycling via content changes + blur during scroll (0-4px-0). Badge opacity pulse [1, 0.6, 1] looping. Lock moment: brightness flash [1, 2, 1] over 0.1s, screen shake via translateX/Y on root [-3, 3, -2, 2, 0] rapid sequence, border color intensity pulse. Headline: TextAtom per word with staggered opacity [0-1] and translateX [20px-0] reveals. Optional cursor ShapeAtom that blinks during type effect. Timing: Timestamp acceleration 0-0.4, lock at 0.4 (0.1s duration), headline reveal 0.5-0.95, settle 0.95-1.0. Caption word timing maps to headline reveal sequence. Use ease-out for word slides, step for timestamp digits."
},
{
"prompt": "Design a 'Time Vortex Spiral' preset where timestamps and text spiral around a central vortex, creating a hypnotic time-travel effect. Concept: Multiple timestamp strings arranged in a spiral pattern, rotating around center. Outer timestamps move slower, inner ones faster (creating parallax depth). As spiral tightens, timestamps blur and merge, then explode outward as resolved typography. Use polar coordinate positioning - elements placed at varying distances and angles from center. Rotation speeds vary by radius layer. The vortex pull effect: elements drift toward center with increasing speed. Climax: implosion to single point, then burst outward with final text radiating and settling. Caption words become the spiral elements - starting as timecodes, morphing into readable words as they approach center.",
"technicalSpecs": "Structure: Root BaseLayout (containerProps.className: 'relative w-full h-full bg-black overflow-hidden'), Vortex container (className: 'absolute inset-0 flex items-center justify-center'), 20-30 timestamp/word elements as TextAtoms positioned using absolute positioning with transform for polar-to-cartesian conversion (calculate x = rcos(θ), y = rsin(θ) for initial positions). Outer ring elements (r=300-400px), middle ring (r=150-250px), inner ring (r=50-120px). Effects: rotate on entire container for global spin [0deg to 720deg+ depending on duration]. Individual element effects: translateX/Y pulling toward center (0,0), scale decreasing as approaching center, opacity fluctuating with radial blur. Ring-specific rotation speeds via separate containers with different rotate rates (outer: 90deg/s, middle: 180deg/s, inner: 360deg/s). Blur increases toward center [0-8px]. Implosion: all elements scale to 0 at center simultaneously at 0.7 mark. Explosion: new positions calculated for final layout, elements scale from 0 with outward translateX/Y to reading positions. Caption integration: Initial content shows timecodes, crossfade to actual words at 0.5 mark using opacity swap between two text layers. Final layout: words arranged in clean grid or flowing layout. Tailwind: 'absolute text-xl font-light text-white/80' for spiral elements, 'text-5xl font-bold text-white' for final text. Timing: Spiral build 0-0.65, implosion 0.65-0.72, explosion 0.72-0.85, settle 0.85-1.0. Use ease-in for pull, ease-out-back for explosion."
},
{
"prompt": "Create an 'Editorial Timestamp Stack' preset with sophisticated magazine/editorial aesthetic where timestamps stack and shuffle like cards before revealing refined typography. Think high-end fashion editorial or documentary title sequence. Clean, minimal timestamp cards (showing dates, times, years) in elegant serif or thin sans-serif typography. Cards stack with slight rotation offsets, shuffle/reorganize positions, then fan out or cascade to reveal the main title text beneath. Movement is smooth and deliberate, not frantic - conveying importance of the moment being timestamped. Use generous whitespace, subtle shadows, and refined color palette (black, white, cream, single accent). Caption text appears with letter-spacing animation (tight to normal) and fade-in per word. Include subtle paper texture overlays for tactile quality.",
"technicalSpecs": "Structure: Root BaseLayout (containerProps.className: 'relative w-full h-full bg-stone-100 flex items-center justify-center'), Card stack container (className: 'relative w-96'), 5-7 timestamp cards as BaseLayouts (className: 'absolute inset-0 bg-white shadow-2xl rounded-sm p-8 flex flex-col justify-center'), each containing TextAtom for date/time in elegant typography (className: 'text-4xl font-serif text-stone-800 tracking-widest'). Stacking: Cards have slight random rotation (-3 to 3deg) and offset positions via transform, z-index ordering for depth. Effects: Shuffle sequence - cards translate and rotate to new positions, exchanging z-order (requires careful keyframe choreography). Fan-out: cards translate to side positions with rotation, revealing center. Main title: TextAtom (className: 'absolute text-6xl font-serif text-stone-900 tracking-tight') that was hidden behind cards, fades in with letterSpacing animation ['0.2em', '0.05em'] for refined reveal. Per-word caption: staggered opacity and translateY [10px, 0] with ease-out. Texture overlay: BaseLayout with background-image noise pattern, mix-blend-multiply, low opacity. Shadow animation: box-shadow intensity varies during movement [light when moving, deeper when settled]. Timing: Initial stack hold 0-0.1, shuffle 0.1-0.4, fan-out 0.4-0.6, title reveal 0.6-0.85, subtitle/caption 0.85-1.0. Easing: ease-in-out throughout for elegance, no sharp movements. Colors via Tailwind: 'text-stone-800', 'bg-white', 'shadow-stone-300/50'."
},
{
"prompt": "Create a chromatic aberration RGB split shake transition preset that simulates a violent visual jolt between clips. During a 0.3-0.4 second overlap period, the outgoing media should experience rapid horizontal shake (±15-25px oscillation at 30-40Hz) while splitting into RGB channels - red channel shifts left, blue shifts right, green stays centered. The incoming media fades in from 0 opacity with its own RGB split converging from extreme separation (±40px) to aligned. Use three separate effect layers targeting the same media atoms with different translateX values and color filters (hue-rotate or color-matrix equivalents). The shake should use a custom easing with sharp reversals (steps or linear segments) to create that nervous twitch feel. BaseLayout contains both media atoms absolutely positioned, with outgoing media fading to 0 opacity while shaking apart, incoming media assembling from RGB chaos.",
"technicalSpecs": "BaseLayout: duration = media1.duration + media2.duration - 0.35s, containerProps className 'absolute inset-0 overflow-hidden'. Outgoing VideoAtom/ImageAtom: startAt 0, duration = media1.duration, zIndex 10. Incoming media: startAt = media1.duration - 0.35s, duration = media2.duration, zIndex 20. Effects in provider mode: outgoing opacity [1,1,0] over last 0.35s, translateX keyframes [0,25,-20,15,-10,0] with linear easing for shake. RGB split simulated via 3 overlapping atoms with mix-blend-mode screen/multiply, red/blue shifted translateX ±30px. Incoming media: opacity [0,0.5,1], RGB convergence translateX from [±40,±20,0] synchronized. Use will-change: transform, filter for GPU acceleration."
},
{
"prompt": "Design an impact vibration transition with escalating intensity - start with subtle micro-tremors and build to a violent RGB-split climax. The transition spans 0.5 seconds of overlap. Outgoing media begins with gentle 2-3px random position jitter, escalating to 20px shake amplitude while RGB channels progressively separate. At peak intensity (middle of transition), implement a brief 50ms freeze-frame with maximum channel separation before the incoming media slams in with a sharp scale punch (1.0 to 1.05 to 1.0). The incoming media should appear already slightly RGB-split, then rapidly converge to clean alignment as it takes over. This creates a 'building tension then release' narrative arc typical of YouTube impact moments.",
"technicalSpecs": "BaseLayout: duration = media1.duration + media2.duration - 0.5s. Overlap period: 0.5s. Outgoing media: shake amplitude keyframes [2,5,10,20,20,15,0]px over overlap, RGB split [0,10,25,40,35,20,0]px. Use cubic-bezier(0.4,0,0.6,1) for escalation, steps(1) for freeze frame. Opacity [1,1,0.8,0] with delayed fade. Incoming media: startAt = media1.duration - 0.5s, scale keyframes [0.95,1.05,1.0] with cubic-bezier(0.68,-0.55,0.265,1.55) for overshoot. RGB convergence from 30px to 0 over 0.3s. Provider mode effects with targetIds for each media atom. Container overflow-hidden to clip shake movement."
},
{
"prompt": "Create a nervous twitch glitch transition inspired by corrupted video signals. The 0.25-0.3 second overlap features rapid, irregular position jumps (not smooth shake) where both media items randomly snap between offset positions. Implement chromatic aberration as horizontal RGB banding - thin strips of the image offset at different rates. The outgoing media should appear to 'break apart' into horizontal scan lines that shift independently, while incoming media assembles from similar chaos. Use step easing functions to create harsh, digital-feeling movement rather than organic shake. Include brief moments where the image appears to 'stick' before jumping again.",
"technicalSpecs": "BaseLayout duration = media1.duration + media2.duration - 0.28s. Transition effects use steps(8, jump-none) easing for stuttery movement. Outgoing media: translateY keyframes [0,5,-3,8,-2,0,6,-4] with steps easing, translateX [0,15,-10,20,-15,25,-5,0] for RGB shift feel. Opacity drops [1,1,0.9,0.7,0.4,0] non-linearly. Incoming media: inverse pattern, translateY [6,-4,2,-5,3,-1,0], opacity rises [0,0.2,0.5,0.7,1,1]. Consider using clipPath or pseudo-elements for scan line effect simulation. Both media atoms absolute positioned with will-change: transform, opacity. Provider mode required with separate targetIds."
},
{
"prompt": "Design a distortion wave RGB split transition where chromatic aberration ripples outward from the center of frame. During 0.4 second overlap, the outgoing media experiences a radial distortion effect simulated through scale oscillation combined with RGB channel separation that follows a wave pattern - channels split, converge, split again in decreasing amplitude. The incoming media emerges from the center with inverted wave timing, appearing to 'punch through' the distortion. Implement using layered atoms with offset timing and blend modes to create the RGB separation illusion. The shake component adds subtle rotation wobble (±2-3 degrees) synchronized with the wave peaks.",
"technicalSpecs": "BaseLayout: single container, duration = sum - 0.4s overlap. Outgoing media: 3 overlapping atoms (R/G/B simulation) with mix-blend-mode: screen. Scale keyframes [1,1.03,0.98,1.01,0.99,0.95] for wave distortion. RGB atoms offset translateX: red [-20,-10,0,5,-3,0], blue [20,10,0,-5,3,0], green stays centered. Rotation [0,2,-1.5,1,-0.5,0] degrees synced with scale peaks. Opacity [1,0.9,0.7,0.4,0]. Incoming media: scale from center [0.9,1.02,0.99,1], opacity [0,0.4,0.8,1], RGB convergence inverse pattern. Use cubic-bezier(0.25,0.1,0.25,1) for smooth wave feel. Container needs perspective for depth enhancement."
},
{
"prompt": "Create a YouTube-style 'bass drop' RGB shake transition optimized for music video cuts. The transition is short and punchy (0.2 seconds) with extreme intensity. On the last frame of outgoing media, implement a dramatic RGB explosion - channels separate 50-60px horizontally with simultaneous downward slam (translateY +30px) and scale punch to 1.1x. The incoming media appears instantly at full opacity but with matching RGB split that snaps to alignment within 3-4 frames. Add motion blur simulation through slight vertical stretch (scaleY 1.05) during peak impact. This is designed for beat-synced cuts where visual impact must match audio intensity.",
"technicalSpecs": "BaseLayout: very short overlap, 0.2s maximum. Duration calculation accounts for minimal overlap. Outgoing media: final 0.2s effects - translateX [0,0,60] for blue channel sim, translateY [0,0,30], scale [1,1,1.1], scaleY additional [1,1,1.05], opacity [1,1,0]. Use cubic-bezier(0.95,0.05,0.795,0.035) for explosive out-ease. Incoming media: startAt = media1.duration - 0.2s, translateX from 50px to 0, translateY from 20px to 0, scale [1.08,1.02,1], opacity [0,1,1] with very fast attack. RGB split atoms use absolute positioning with pointer-events-none, mix-blend-mode screen. Container overflow-hidden critical."
},
{
"prompt": "Design a paranoid surveillance camera glitch transition with chromatic aberration suggesting equipment malfunction. The 0.45 second transition mimics security footage corruption - irregular frame drops (hold frames), horizontal tearing (translateX jumps mid-frame), and RGB misalignment that drifts rather than snaps. The outgoing media should appear to 'lose signal' with increasing RGB drift and occasional frame freezes. Incoming media 'acquires signal' with similar artifacts that stabilize. Include subtle scanline overlay effect through repeating gradient or pseudo-element. The movement should feel mechanical and broken rather than designed.",
"technicalSpecs": "BaseLayout: duration = media1.duration + media2.duration - 0.45s. Container needs pseudo-element for scanline overlay (repeating-linear-gradient simulated through nested BaseLayout). Outgoing media: irregular keyframe timing - opacity [1,1,0.95,0.9,0.6,0.3,0] with steps(3) segments for frame hold effect. TranslateX [0,0,8,0,15,-5,20,0] with mixed easing (some steps, some linear). RGB drift: slow separation over time [0,5,10,18,25,30] asymmetric per channel. Incoming: inverse pattern with signal acquisition feel, translateX jitter decreasing [25,15,8,3,0], RGB convergence [35,20,10,3,0]. Both use will-change for performance. Provider mode with targetIds essential."
},
{
"prompt": "Create a high-energy esports/gaming transition with aggressive RGB split and multi-axis shake. During 0.35 second overlap, implement simultaneous X/Y/rotation shake creating chaotic movement while RGB channels separate diagonally (not just horizontally). The outgoing media shakes violently while fragmenting into offset color channels. Add scale pulses (quick 1.0→1.08→1.0 micro-animations) synchronized with shake peaks for added impact. The incoming media should enter with a sharp zoom-in (scale 1.15 to 1.0) combined with its own RGB convergence and counter-rotation. Include a brief brightness flash (filter brightness spike) at transition midpoint.",
"technicalSpecs": "BaseLayout: duration = media1.duration + media2.duration - 0.35s. Outgoing effects over final 0.35s: translateX [0,20,-15,25,-10,0], translateY [0,-10,15,-8,12,0], rotate [0,3,-2,4,-1,0] degrees, scale [1,1.08,1,1.05,1,0.95]. RGB diagonal: red translate [10,8], blue translate [-10,-8], green [0,0]. Opacity [1,0.9,0.7,0.3,0]. Brightness filter [1,1,1.5,1,0.8] for flash. Incoming: scale [1.15,1.02,1], rotation [-5,1,0], RGB convergence from diagonal offset. Easing: cubic-bezier(0.19,1,0.22,1) for elastic feel. Z-index: incoming above outgoing. Container overflow-hidden absolute inset-0."
},
{
"prompt": "Design a subtle professional RGB aberration transition for corporate YouTube content - chromatic effects present but refined. The 0.5 second overlap uses gentle, smooth movements. Outgoing media fades with minimal RGB separation (8-12px maximum) that appears as a soft color fringe rather than harsh split. Movement is a gentle drift rather than shake - slow, smooth translation creating an elegant 'sliding apart' feel. Incoming media cross-fades with inverse gentle drift. The effect should feel premium and intentional, not glitchy. Include subtle blur increase on outgoing media (filter blur 0→2px) to enhance depth transition.",
"technicalSpecs": "BaseLayout: duration = media1.duration + media2.duration - 0.5s. Longer overlap for smoother feel. Outgoing media: opacity [1,0.9,0.6,0.3,0] with ease-in-out, translateX [0,5,10,12,15] slow drift, RGB separation subtle [0,3,6,10,12]px. Filter blur [0,0,0.5,1,2]px increasing. Scale [1,0.99,0.98] subtle shrink. Incoming: opacity [0,0.2,0.5,0.8,1], translateX from -15px to 0 (counter-drift), RGB convergence [10,6,3,0], scale [1.02,1.01,1]. All animations use cubic-bezier(0.4,0,0.2,1) for smooth professional feel. Mix-blend-mode: normal (no harsh blending). Provider mode with gentle synchronized timing."
},
{
"prompt": "Create an anxiety-inducing rapid-fire twitch transition with erratic RGB splitting for horror/thriller content. The 0.3 second overlap features unpredictable, jarring movements - the shake pattern should feel random and unsettling. Implement multiple micro-transitions within the overlap: brief moments of stability punctuated by violent jerks. RGB channels should split asymmetrically (red moves more than blue, green shifts vertically). Add occasional inversion or high contrast moments (filter invert or contrast spikes). The outgoing media should feel like it's being 'torn away' while incoming media 'forces its way in' aggressively.",
"technicalSpecs": "BaseLayout: duration = media1.duration + media2.duration - 0.3s. Outgoing: translateX keyframes [0,0,25,-30,0,40,-20,0] with irregular timing (not evenly spaced), translateY [0,5,-8,3,-10,2,0] creating diagonal chaos. RGB asymmetric: red [0,35,-20,45,-15,0], blue [0,-15,20,-25,10,0], green translateY [0,10,-5,15,-8,0]. Filter contrast [1,1,1.5,1,2,1,0.8] for harsh moments. Opacity [1,1,0.8,0.9,0.5,0.2,0] non-linear. Incoming: inverse chaos pattern, aggressive scale [1.2,0.95,1.05,1], filter invert flicker [0,0,1,0,0] brief. Steps and linear easing mixed for jarring feel. Will-change critical for performance."
},
{
"prompt": "Design a retro VHS tracking error RGB transition evoking 90s video artifacts. The 0.6 second overlap simulates tape tracking issues - horizontal bands of the image shift at different rates, RGB separation mimics color bleeding from magnetic tape degradation. The outgoing media should appear to 'lose tracking' with progressive horizontal displacement and color channel drift. Implement noise/grain suggestion through subtle opacity fluctuation. Incoming media 'finds tracking' with decreasing artifacts. Movement should have that characteristic VHS wobble - not sharp digital glitch but organic analog degradation. Include subtle vertical roll suggestion.",
"technicalSpecs": "BaseLayout: duration = media1.duration + media2.duration - 0.6s. Longer overlap for analog feel. Outgoing: translateX [0,3,-2,8,-5,15,-10,25] slow irregular drift, translateY [0,0,2,0,-1,3,0,5] subtle roll. RGB color bleed: channels drift at different rates - red fastest, blue slowest, creating rainbow edge effect over time. Opacity fluctuation [1,0.95,1,0.9,0.95,0.85,0.7,0.4,0] for noise feel. Scale subtle [1,1.005,0.998,1.002,0.995] for wobble. Incoming: inverse tracking acquisition, decreasing artifacts. Use ease-in-out primarily with occasional steps(2) for frame skip feel. Saturation filter shift [1,1.1,0.9,1.05,1] for color instability. Container may need subtle vignette overlay for period authenticity."
}
]