[
{
"prompt": "Create a WHIP PAN HORIZONTAL SMEAR transition preset that simulates a fast lateral camera movement between two media items. The transition should use an extremely short overlap duration (0.15-0.25 seconds) to create that snappy, energetic YouTube edit feel. During the overlap: the outgoing media should slide rapidly to the left with extreme horizontal motion blur (blur-x), while the incoming media slides in from the right with matching blur. Use a sharp ease-out curve for the outgoing media and ease-in for incoming to create the characteristic 'snap' of a whip pan. Both media should reach peak motion blur at the exact midpoint of the transition, then sharpen as they settle. The BaseLayout container should use 'overflow-hidden' to clip the sliding content. Apply horizontal scale stretch (scaleX: 1.1) during peak motion to enhance the smear effect. Target high-energy content like gaming clips, vlogs, or action montages.",
"technicalSpecs": "BaseLayout: single container with 'absolute inset-0 overflow-hidden', duration = media1.duration + media2.duration - 0.2s overlap. Outgoing media: translateX keyframes [0%, -120%] with blur filter [0px, 20px, 0px] bell curve, scaleX [1, 1.15, 1] during transition. Incoming media: translateX [-120%, 0%] with matching blur curve, relative start at (media1.duration - 0.2s). Effects: provider mode with targetIds for each atom, AnimationRange arrays for transform and filter. Z-index: incoming above outgoing. Easing: cubic-bezier(0.25, 0.1, 0.25, 1) for snap feel."
},
{
"prompt": "Build a DIRECTIONAL SWISH transition with vertical motion blur streaks that creates a fast upward whip movement between scenes. This variation moves vertically instead of horizontally - outgoing media whooshes upward and out while incoming media enters from below. Use a 0.18-second ultra-fast overlap for maximum impact. Apply vertical blur filter (blur-y equivalent via transform skewY or CSS filter) combined with translateY animation. Add a subtle brightness flash at the transition midpoint (brightness: 1.3) to simulate the camera exposure change during fast movement. Include slight rotation (2-3 degrees) in the direction of movement for added dynamism. Perfect for reveal moments, topic changes, or high-energy YouTube intros.",
"technicalSpecs": "BaseLayout: 'absolute inset-0 overflow-hidden', duration calculation with 0.18s overlap. Outgoing: translateY [0%, -110%] over 0.18s, blur [0, 15px] bell curve, rotate [-2deg, 0deg]. Incoming: translateY [110%, 0%] synchronized, blur matching curve, rotate [2deg, 0deg]. Brightness effect on container: [1, 1.3, 1] during overlap. Both media use 'object-cover' for full frame. Provider mode effects with separate targetIds. Relative timing: incoming starts at outgoingDuration - 0.18s. Easing: ease-out for outgoing departure, ease-in-out for incoming arrival."
},
{
"prompt": "Design a DOUBLE WHIP PAN transition that creates a back-and-forth lateral movement - first swishing right then immediately left - before settling on the new media. This two-stage transition uses a 0.3-second overlap divided into two phases: the outgoing media slides right (0.15s) creating anticipation, then both slide sharply left (0.15s) for the actual transition. Apply progressive motion blur that intensifies through both phases. The incoming media should appear to 'catch' the momentum of the second swish. Use scaleX stretching during horizontal movement and add a subtle shake (2-3px vertical wiggle) at the transition point for impact. Great for comedic timing, reaction videos, or dramatic reveals.",
"technicalSpecs": "BaseLayout: 0.3s overlap period, 'overflow-hidden absolute inset-0'. Phase 1 (0-0.15s): outgoing translateX [0%, 15%] with blur [0, 8px], incoming hidden (opacity: 0). Phase 2 (0.15-0.3s): outgoing translateX [15%, -120%] with blur [8px, 25px, 0], incoming translateX [120%, 0%] with matching blur. ScaleX: [1, 1.08, 1.12, 1] across phases. Vertical shake: translateY oscillation [0, 3px, -3px, 0] at phase boundary. Provider mode with AnimationRange arrays covering both phases. Keyframe percentages: 0%, 50%, 100% mapping to the two-phase timing."
},
{
"prompt": "Create a MOTION SMEAR CROSSFADE hybrid transition that combines the speed of a whip pan with a brief crossfade moment. Unlike pure slide transitions, this keeps both media briefly visible at the midpoint while heavily motion-blurred. Use a 0.25-second overlap where: first 0.1s the outgoing starts sliding and blurring, middle 0.05s both are visible but extremely blurred (creating an abstract smear), final 0.1s the incoming sharpens while completing its slide-in. Apply horizontal blur values up to 30px at peak. Add saturation boost during the blur phase for vibrant color smearing. The crossfade moment creates a dreamy, almost film-like quality while maintaining whip pan energy. Suitable for music videos, travel montages, or aesthetic YouTube content.",
"technicalSpecs": "BaseLayout: 0.25s overlap, 'absolute inset-0 overflow-hidden'. Outgoing: opacity [1, 0.7, 0] across overlap, translateX [0%, -60%], blur [0, 30px, 30px]. Incoming: opacity [0, 0.7, 1], translateX [60%, 0%], blur [30px, 30px, 0]. Peak blur at 40-60% of transition creates smear moment. Saturate filter: [1, 1.4, 1] bell curve for color pop. Both media visible simultaneously at midpoint with combined blur. Z-index: incoming above outgoing throughout. Provider mode effects with synchronized AnimationRange timing. Easing: linear for blur, ease-in-out for position."
},
{
"prompt": "Build an ELASTIC WHIP transition with bounce-back physics that overshoots the final position before settling. The incoming media slides in fast from the right, overshoots slightly to the left (-5% past center), then bounces back to center position. Meanwhile, outgoing media slides out with matching elastic energy. Use a 0.35-second overlap to accommodate the bounce physics. Apply motion blur only during the fast movement phase, not during the settle. Add subtle scale pulse (1.02x) at the overshoot moment for emphasis. The elastic bounce creates a playful, energetic feel perfect for gaming content, comedic edits, or youthful brand content. Include slight rotation (1-2 degrees) that also bounces back.",
"technicalSpecs": "BaseLayout: 0.35s overlap for bounce accommodation. Outgoing: translateX [0%, -115%] with blur [0, 20px], no bounce (exits cleanly). Incoming: translateX [115%, -5%, 0%] with blur [20px, 5px, 0] - three keyframes at 0%, 70%, 100%. Scale: [1, 1.02, 1] synchronized with overshoot. Rotation: [3deg, -1deg, 0deg] for incoming. Easing: cubic-bezier(0.34, 1.56, 0.64, 1) for elastic overshoot effect. Provider mode with separate effect arrays per media. Relative timing: bounce settle phase (final 30%) has no blur for crisp landing."
},
{
"prompt": "Design a ZOOM WHIP COMBO transition that adds depth to the lateral movement by simultaneously zooming. As the whip pan occurs, both media scale up slightly (1.1x) creating a 'pushing through' sensation. The outgoing media scales up while sliding out, the incoming scales down from 1.15x to 1x while sliding in. Use 0.2-second overlap with aggressive motion blur on the horizontal axis. Add vignette darkening at the edges during transition to focus attention on the center blur zone. The zoom adds cinematic depth perception to the otherwise flat lateral movement. Perfect for action sequences, sports highlights, or dramatic moment transitions in vlogs.",
"technicalSpecs": "BaseLayout: 0.2s overlap, 'absolute inset-0 overflow-hidden'. Outgoing: translateX [0%, -100%], scale [1, 1.15], blur [0, 25px]. Incoming: translateX [100%, 0%], scale [1.15, 1], blur [25px, 0]. Vignette: box-shadow inset effect or radial gradient overlay that intensifies during transition [0%, 30%, 0%]. Transform-origin: center center for zoom. Combined transform string: 'translateX() scale()'. Z-index management for proper layering. Provider mode with transform and filter AnimationRanges. Easing: ease-out for departing, ease-in for arriving creates smooth depth shift."
},
{
"prompt": "Create a STUTTER WHIP transition with intentional micro-pauses that create a strobe-like, glitchy effect during the fast movement. Instead of smooth continuous motion, the slide happens in 3-4 rapid steps with brief holds (0.03s each) between movements. Apply motion blur only during movement phases, sharpen during holds. Use a 0.28-second overlap divided into stutter segments. Add brightness flicker during holds for strobe effect. The stuttered motion creates an edgy, modern aesthetic popular in gaming montages, music video edits, and high-energy YouTube content. Include horizontal position jumps: 0% → 30% → 60% → 100% with blur spiking between positions.",
"technicalSpecs": "BaseLayout: 0.28s overlap, 'absolute inset-0 overflow-hidden'. Outgoing translateX keyframes: [0%, -30%, -30%, -65%, -65%, -100%] at times [0%, 25%, 30%, 55%, 60%, 100%] - holds at 25-30% and 55-60%. Blur: [0, 20px, 5px, 20px, 5px, 0] matching movement/hold pattern. Brightness flicker: [1, 1, 1.2, 1, 1.2, 1] during holds. Incoming: inverse pattern starting from 100% position. Step easing: 'steps(1)' for position, linear for blur transitions between. Provider mode with complex AnimationRange arrays. Multiple keyframe percentages for stutter effect."
},
{
"prompt": "Build a DIAGONAL SWISH transition that moves at a 45-degree angle instead of pure horizontal, creating a more dynamic and unexpected whip pan direction. Outgoing media exits toward top-left corner while incoming enters from bottom-right. Use combined translateX and translateY with 0.22-second overlap. Apply directional blur that follows the diagonal movement angle. Add subtle skew transform (skewX: 5deg, skewY: 5deg) during peak motion to enhance the diagonal streak effect. The diagonal movement creates visual interest and breaks the monotony of standard horizontal transitions. Great for creative YouTube content, artistic vlogs, or stylized gaming edits.",
"technicalSpecs": "BaseLayout: 0.22s overlap, 'absolute inset-0 overflow-hidden'. Outgoing: translateX [0%, -80%], translateY [0%, -60%] combined for diagonal path, blur [0, 22px], skew [0deg, 5deg, 0deg]. Incoming: translateX [80%, 0%], translateY [60%, 0%], matching blur and skew curves. Transform combination: 'translate(X, Y) skew(X, Y)' in single transform property. Blur approximates diagonal via standard blur (no directional CSS blur available). Z-index: incoming layered above. Provider mode effects. Easing: cubic-bezier(0.4, 0, 0.2, 1) for smooth diagonal arc."
},
{
"prompt": "Design a WHIP WITH FLASH FRAME transition that inserts a brief white or colored flash frame at the peak of the whip pan movement. During the 0.24-second overlap, the transition hits a 0.04-second moment where a white overlay flashes to near-full opacity (0.8) while both media are maximally blurred. This simulates the overexposure moment of a real camera whip pan and adds punch to the transition. The flash can be tinted (warm orange for energy, cool blue for tech content). Motion blur builds to the flash, then decreases after. Perfect for impactful moment transitions, highlight reels, or energetic YouTube intros.",
"technicalSpecs": "BaseLayout: 0.24s overlap, contains media atoms plus ShapeAtom or overlay div for flash. Flash layer: white/tinted rectangle, opacity [0, 0, 0.8, 0, 0] at keyframes [0%, 40%, 50%, 60%, 100%], positioned above media with higher z-index. Outgoing: translateX [0%, -110%], blur [0, 18px, 25px, 18px, 0] peaking at flash. Incoming: translateX [110%, 0%], matching blur curve. Flash color customizable via background-color or gradient. Container: 'absolute inset-0 overflow-hidden'. Provider mode targeting all three elements (outgoing, incoming, flash). Timing: flash peaks at exact 50% of overlap duration."
},
{
"prompt": "Create a RACK FOCUS WHIP transition that combines the lateral movement with a simulated depth-of-field shift. As the whip pan occurs, the outgoing media not only slides and motion-blurs but also goes out of focus (additional gaussian blur), while incoming media starts out of focus and sharpens as it arrives. Use two blur types: directional motion blur (horizontal) for movement, plus uniform blur for focus simulation. The 0.3-second overlap allows time for the focus pull effect. Outgoing reaches peak motion blur at 0.1s, peak defocus at 0.15s, then exits. Incoming starts defocused, gains motion blur during entry, then sharpens fully. Creates a cinematic, professional transition feel for documentary-style content or premium vlogs.",
"technicalSpecs": "BaseLayout: 0.3s overlap for focus pull timing. Outgoing: translateX [0%, -100%], motion blur [0, 20px, 15px] (peaks early), focus blur [0, 0, 8px, 8px] (peaks late, maintains through exit), combined via filter: blur() with varying values. Incoming: translateX [100%, 0%], starts with focus blur [8px] at entry, motion blur [20px, 0] during movement, focus blur [8px, 0] sharpening at end. Total blur = motion + focus at each keyframe. Scale slight zoom [1, 1.03] on outgoing for depth enhancement. Provider mode with complex filter AnimationRanges. Easing: ease-in-out for organic focus pull feel."
},
{
"prompt": "Create a page turn transition preset that simulates a book page curling from the bottom-right corner. The outgoing image should appear to lift and curl diagonally toward the top-left, revealing the incoming image beneath. Use CSS transforms with perspective and rotateY/rotateX to create the 3D paper fold effect. Add a dynamic shadow gradient that follows the curl line, darkening the area beneath the lifted corner. The curl should start small at 0% of overlap, reach maximum fold at 50%, and complete the turn by 100%. Include a subtle paper texture overlay during the transition. The incoming image should have a slight brightness increase as it's 'revealed' from under the page. Target YouTube thumbnail aspect ratio (16:9) with smooth 60fps animation using GPU-accelerated transforms.",
"technicalSpecs": "BaseLayout duration = media1.duration + media2.duration - overlapDuration (overlap: 1.2s recommended). Container: 'relative w-full h-full overflow-hidden' with perspective: 1500px. Outgoing ImageAtom: absolute inset-0, z-index-20, transform-origin: bottom-right. Effects on outgoing: rotateY from 0deg to -180deg, rotateX from 0deg to 15deg, with custom cubic-bezier(0.25, 0.46, 0.45, 0.94). Shadow gradient overlay div with linear-gradient(135deg, transparent 40%, rgba(0,0,0,0.4) 100%), opacity animates 0->0.8->0 during overlap. Incoming ImageAtom: absolute inset-0, z-index-10, filter brightness animates from 0.7 to 1.0. Provider mode with targetIds for each atom."
},
{
"prompt": "Build a vertical page flip transition like turning pages in a standing book or calendar. The outgoing image rotates upward around a horizontal axis at the top edge, folding over itself to reveal the incoming image. Implement a realistic paper shadow that projects downward onto the incoming image as the page lifts. The fold should have a subtle paper curve effect using multiple layered transforms. Add a slight bounce easing at the end when the page settles. Include a thin highlight line along the fold edge to simulate light catching the paper. The incoming image should start slightly darkened (as if in shadow) and brighten as the page lifts away.",
"technicalSpecs": "BaseLayout duration calculation: total = img1Duration + img2Duration - 1.5s overlap. Container: 'relative w-full aspect-video overflow-hidden' with perspective: 2000px, perspective-origin: center top. Outgoing ImageAtom: absolute inset-0, z-index-20, transform-origin: top center. Animation: rotateX from 0deg to 180deg with ease-in-out-back. Shadow element: absolute, bottom-0, h-1/2, linear-gradient(to bottom, rgba(0,0,0,0.5), transparent), translateY and opacity synchronized with page rotation. Highlight pseudo-element: 2px white/transparent gradient line at fold axis. Incoming ImageAtom: z-index-10, brightness filter 0.6->1.0 over overlap period. Use AnimationRange[] with percentage-based keyframes."
},
{
"prompt": "Design a diagonal corner peel transition where the page curls from the top-right corner, revealing the next image with a realistic paper fold simulation. The curl should create a triangular reveal pattern that expands from corner to full page. Implement dual shadows: one cast by the curling page onto the incoming image, and one on the back of the curling page itself. The curled portion should show a slightly desaturated/darker version of the outgoing image (simulating paper back). Add subtle paper fiber texture during the peel. The reveal should accelerate - starting slow and finishing fast for dramatic effect.",
"technicalSpecs": "Overlap duration: 1.8s for smooth curl effect. BaseLayout: 'relative w-full h-full' with preserve-3d transform-style. Outgoing image container with clip-path polygon animating from 'polygon(0 0, 100% 0, 100% 100%, 0 100%)' to 'polygon(0 0, 0 0, 0 100%, 0 100%)' following diagonal path. Curl element: absolute div with same image, clip-path for triangular curl portion, rotateY(-180deg) + translateX with transform-origin at diagonal fold line. Shadow layers: drop-shadow filter on curl element (0 10px 30px rgba(0,0,0,0.3)), gradient overlay on incoming image synced to curl position. Easing: cubic-bezier(0.4, 0, 1, 1) for acceleration. Incoming ImageAtom: z-index-5, revealed progressively."
},
{
"prompt": "Create a center-fold book spread transition simulating closing a book and opening to a new page. The outgoing image splits vertically down the center, with left half folding left and right half folding right (like closing a book), then the incoming image unfolds from center outward. This creates a satisfying open-close-open sequence. Add spine shadow down the center throughout. Include page edge details (subtle white lines) on fold edges. The fold should have depth with slight skew to show page thickness. Background during fold should be a neutral paper color.",
"technicalSpecs": "Extended overlap: 2.4s (1.2s close + 1.2s open). BaseLayout with 'relative w-full aspect-video bg-amber-50' for paper backing. Outgoing image split into two ImageAtoms with clip-path: left 'polygon(0 0, 50% 0, 50% 100%, 0 100%)', right 'polygon(50% 0, 100% 0, 100% 100%, 50% 100%)'. Left half: transform-origin right, rotateY 0->-90deg (first half of overlap). Right half: transform-origin left, rotateY 0->90deg. Incoming image same split structure, animations reversed in second half: rotateY from ±90deg to 0deg. Spine shadow: absolute div, w-4, center positioned, gradient shadow, persistent. Page edge: 2px inset shadow on fold edges. Z-index management critical for proper stacking during fold."
},
{
"prompt": "Build a wind-blown page turn effect where the outgoing image ripples and flutters before turning, as if caught by a breeze. The page should have wave-like deformation during the turn, not a rigid fold. Implement using multiple transform keyframes that create a serpentine curl pattern. Add motion blur during the fastest part of the turn. The incoming image should have a subtle parallax shift as if it's a separate layer being revealed. Include floating paper particle effects (small white rectangles) during transition. Shadow should be soft and diffused, following the wave pattern.",
"technicalSpecs": "Overlap: 1.6s with complex multi-stage animation. Outgoing ImageAtom: animate with 8+ keyframes creating wave effect - combine rotateY, rotateX, skewX values that oscillate. Example keyframes: 0%: rotateY(0), 20%: rotateY(-20deg) skewX(5deg), 40%: rotateY(-60deg) skewX(-3deg), 60%: rotateY(-120deg) skewX(4deg), 100%: rotateY(-180deg). Motion blur: filter blur(2px) at 40-60% of animation. Incoming ImageAtom: translateX from 20px to 0, translateY from -10px to 0 for parallax. Particle effects: 5-8 ShapeAtom rectangles (w-2 h-3 bg-white/60) with randomized float animations - translateY, translateX, rotate, opacity. Soft shadow: filter drop-shadow with large blur radius (20px+), opacity following wave peaks."
},
{
"prompt": "Design a hardcover book page turn with realistic thickness simulation. Unlike paper, this transition shows page depth - the turning page has visible thickness on its edge (like cardboard or thick stock). The outgoing image turns as a rigid panel with 3D depth visible on the turning edge. Add leather texture gradient shadow from an implied book spine on the left edge. The incoming image should appear to be slightly recessed (in a book frame). Include a subtle crease/fold line texture that appears along the turn axis. Golden accent lighting on page edges for premium feel.",
"technicalSpecs": "BaseLayout: 'relative w-full aspect-video' with perspective: 1200px. Book frame: outer div with 'p-4 bg-gradient-to-r from-amber-900 to-amber-800' for leather spine effect. Page container with transform-style: preserve-3d. Outgoing image: main face with backface-visibility: hidden. Page edge: separate div 'absolute right-0 w-2 h-full bg-gradient-to-r from-amber-100 to-white' representing page thickness, rotateY synced with main page. Animation: rotateY 0 to -180deg, transform-origin: left center. Page back: duplicate image container rotated 180deg initially, backface-visibility: hidden. Incoming ImageAtom: scale(0.98) with subtle inner shadow for recessed look. Golden edge highlight: 1px border-amber-300 with subtle glow. Overlap: 1.4s."
},
{
"prompt": "Create a magazine page flip with glossy paper effect. The transition should include realistic light reflection that moves across the page surface during the turn (like light catching glossy paper). Implement a sharp, crisp fold with minimal curl - more angular like coated stock. Add a subtle color shift in the reflection (slight blue/white highlight streak). The shadow should be harder-edged than matte paper. Include a brief 'snap' moment at 80% where the page quickly settles (magazine pages flip fast at the end). The aspect ratio should support portrait magazine layouts.",
"technicalSpecs": "Portrait-optimized: aspect-[3/4] or aspect-[2/3] container. Overlap: 1.0s (faster flip for magazine feel). Outgoing ImageAtom: rotateY 0 to -180deg with custom easing cubic-bezier(0.2, 0, 0.4, 1) for snap effect. Glossy reflection: pseudo-element or overlay div with linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.4) 45%, rgba(255,255,255,0.1) 50%, transparent 55%), translateX animated from -100% to 200% during flip. Hard shadow: drop-shadow(8px 0 10px rgba(0,0,0,0.4)) with minimal blur. Snap easing: ease-in for 0-80%, then ease-out-back for 80-100%. Color tint in reflection: mix white with rgba(200,220,255,0.3) for cool highlight. Transform-origin: left center for right-to-left flip."
},
{
"prompt": "Build a notebook spiral binding page turn effect. The page turns around a visible spiral binding on the left edge, with the spiral casting shadows on both pages. The turn should have slight resistance/spring at the binding (pages don't lie perfectly flat). Implement visible spiral rings as decorative elements. The outgoing page should rotate past 180 degrees slightly then spring back (overshoot). Paper should have a slight cream/ivory tint with ruled line texture overlay. The incoming image should bounce subtly when the page lands.",
"technicalSpecs": "BaseLayout with spiral binding column: 'relative flex' with left div 'w-6 bg-gradient-to-r from-gray-400 to-gray-300' for binding. Spiral rings: 6-8 circular ShapeAtom elements 'w-4 h-4 rounded-full border-2 border-gray-500' positioned along binding edge. Page container: 'flex-1 relative' with perspective. Outgoing page: rotateY animation 0deg -> -190deg -> -180deg (overshoot and settle) using spring easing or keyframes at 0%, 85%, 100%. Paper texture: overlay div with subtle linear pattern for ruled lines, bg-amber-50/30 tint. Shadow from spiral: positioned shadows on both pages, intensity varies with page rotation. Incoming page: translateY from 3px to 0 with bounce easing on landing. Overlap: 1.3s. Binding shadow: absolute shadow elements behind spiral rings."
},
{
"prompt": "Design a weathered/vintage book page turn with aged paper effects. The page should have torn edges, slight yellowing, and the turn should be imperfect (slight wobble, not perfectly straight). Add dust particles floating during the turn. The shadow should be warm-toned (sepia). Include subtle paper crinkle texture that becomes more visible during the fold. The incoming page should have slight vignette darkening at edges. Implement a slower, heavier turn feeling - like old thick pages. Add very subtle page sound visualization through slight scale pulse.",
"technicalSpecs": "Slow overlap: 2.0s for heavy, deliberate feel. Outgoing ImageAtom: sepia(0.3) brightness(0.95) filter for aged look. Clip-path with slightly irregular polygon for torn edge effect. RotateY animation with subtle rotateZ wobble (±2deg oscillation). Dust particles: 10-15 small ShapeAtom circles 'w-1 h-1 rounded-full bg-amber-200/40' with float animations - random trajectories, slow fade out. Crinkle texture: overlay div with noise/paper texture image, opacity increases from 0.1 to 0.3 during fold. Shadow: drop-shadow with rgba(139,90,43,0.4) for warm sepia tone. Incoming page: radial-gradient vignette overlay 'bg-radial-gradient from-transparent to-black/20'. Scale pulse: subtle scale 1.0 -> 1.005 -> 1.0 synchronized with imagined page-land sound. Easing: cubic-bezier(0.4, 0, 0.2, 1) for heavy feel."
},
{
"prompt": "Create a pop-up book style transition where the outgoing image folds down flat while 3D elements from the incoming image pop up dramatically. The main incoming image should rise from a folded state to standing, with secondary decorative elements popping up at staggered times. Implement paper fold mechanics where elements unfold from creases. Add dramatic shadows that emphasize the 3D pop-up effect. Include subtle paper construction details (fold lines, tabs). The overall effect should feel playful and dimensional, perfect for children's content or creative YouTube thumbnails.",
"technicalSpecs": "Extended overlap: 2.2s for complex multi-element animation. BaseLayout: perspective: 800px for dramatic 3D, 'relative w-full aspect-video bg-gradient-to-b from-sky-100 to-sky-200' for storybook background. Outgoing image: rotateX from 0deg to 90deg (folds down flat), transform-origin: bottom. Main incoming element: rotateX from -90deg to 0deg (pops up from flat), transform-origin: bottom, delayed start 0.4s into overlap. Secondary pop-up elements: 2-3 additional divs/shapes with staggered rotateX animations, delays of 0.6s, 0.8s, 1.0s. Fold lines: thin gradient lines on fold axes 'h-px bg-gradient-to-r from-transparent via-gray-400 to-transparent'. Dynamic shadows: translateY and blur increase as elements rise, using drop-shadow filter. Tab details: small rectangular shapes at fold connections. Easing: ease-out-back for bouncy pop-up feel."
},
{
"prompt": "Create a typokinetic preset called 'GeoHeatmapPulse' that simulates geographic data points lighting up on a dark map. The visual concept: words from captions appear as glowing data points that pulse outward like heatmap intensity rings. Each word materializes at a random position within a dark grid overlay (simulating map coordinates), starting as a tight concentrated glow that expands outward with decreasing opacity - like thermal signatures spreading across a cartographic surface. Use TextAtom for each word with absolute positioning within a BaseLayout container. The dark mode aesthetic requires a near-black background (#0a0a0f) with cyan/magenta gradient glows (#00d4ff to #ff00aa). Words should fade in with scale from 0.3 to 1.0 while their text-shadow expands from 0px to 20px blur radius. Stagger word appearances by 150ms each. The expansion animation should use ease-out timing to feel like energy dissipating. Add subtle continuous rotation (0 to 2deg oscillation) to create living data visualization feel.",
"technicalSpecs": "Structure: BaseLayout with containerProps.className='relative w-full h-full bg-[#0a0a0f] overflow-hidden'. Map each caption word to TextAtom with absolute positioning using calculated grid positions. Effects: Use generic keyframe effects for each word - opacity [0,1], scale [0.3,1], textShadow animating from '0 0 2px #00d4ff' to '0 0 20px #00d4ff, 0 0 40px #ff00aa'. Timing: Word appearances staggered with relativeStartAt incrementing by 0.15 per word. Duration per word animation: 0.8s with ease-out easing. TextAtom styling: className='text-lg font-mono text-cyan-400 whitespace-nowrap'. Add subtle rotate effect [-1, 1, -1] over full duration with linear easing for ambient motion. Consider using repeatChildrenProps for consistent glow styling across all text elements."
},
{
"prompt": "Design 'DataNodeTypography' - a typokinetic preset where caption words behave like nodes in a geospatial network graph lighting up sequentially. Visualize words as data points connected by invisible geographic relationships. Each word appears with a sharp 'ping' effect - instant appearance followed by concentric ring expansions behind it (using pseudo-elements or layered ShapeAtoms). The dark map aesthetic uses deep navy (#0d1117) with electric blue (#58a6ff) and warm orange (#f0883e) accent colors mimicking data visualization palettes. Words cluster in spatial groups based on sentence boundaries, creating visual 'regions' on the map. Ring expansions use scale transforms from 1 to 3 with opacity fading from 0.8 to 0. Implement using nested BaseLayouts - outer container for dark background, inner containers for word clusters.",
"technicalSpecs": "Structure: Outer BaseLayout containerProps.className='relative w-full h-full bg-[#0d1117]'. Group words by sentence using caption.sentences data. Each sentence gets a BaseLayout cluster with containerProps.className='absolute flex flex-wrap gap-2' positioned at varied coordinates. TextAtom per word with className='text-base font-semibold text-blue-400'. Behind each TextAtom, add ShapeAtom circles for ring effect. Effects system: TextAtom gets opacity [0,1] over 0.1s (sharp appearance), ShapeAtom rings get scale [1,3] and opacity [0.8,0] over 0.6s with ease-out. Use childrenProps to apply consistent styling. Timing: relativeStartAt based on word.relativeStartAt from caption data. Ring expansion starts 0.05s after word appears. Consider internal effect preset 'ping-ring' for reusable ring expansion animation."
},
{
"prompt": "Build 'HeatmapIntensityText' - words visualized as heatmap intensity zones where typography size and glow intensity correlate to word 'impact' metadata from captions. High-impact words appear larger with more intense pulsing glows (simulating hot zones), while regular words are smaller with subtle ambient glow (cool zones). The pulsing animation creates breathing effect - scale oscillates between 1.0 and 1.15 continuously, with glow intensity following. Dark mode map uses charcoal (#1a1a2e) with temperature gradient from cool blue (#4361ee) through neutral (#f72585) to hot pink. Position words in a flowing river-like path across the screen, suggesting geographic data flow. Use caption metadata to drive visual hierarchy.",
"technicalSpecs": "Structure: BaseLayout containerProps.className='relative w-full h-full bg-[#1a1a2e] flex items-center justify-center'. Create curved path positioning using calculated x/y coordinates that form gentle S-curve across viewport. TextAtom for each word with dynamic className based on word.metadata.impact: high impact gets 'text-2xl text-pink-500', medium gets 'text-lg text-purple-400', low gets 'text-sm text-blue-400'. Effects: Continuous pulse using generic effects - scale [1, 1.15, 1] and textShadow intensity cycling. High-impact words: pulse duration 0.8s, glow blur 15px. Low-impact: pulse duration 1.2s, glow blur 5px. Use word.relativeStartAt for staggered entry with opacity [0,1] over 0.3s. Easing: ease-in-out for breathing feel. Consider creating helper function to calculate curve positions based on word index and total word count."
},
{
"prompt": "Create 'RadarSweepTypography' - caption words reveal as a radar sweep animation passes over them, simulating geographic scanning of data points. A rotating line (ShapeAtom or gradient overlay) sweeps 360 degrees across the dark map surface. Words only become visible when the sweep line passes their position, then they glow and pulse as 'detected' data points. The sweep creates dramatic reveal timing - words in the sweep's path illuminate sequentially based on their angular position from center. Dark mode uses military radar green (#00ff41) on black (#000000) with scan line leaving trails of detected typography. Words persist with gentle pulse after detection.",
"technicalSpecs": "Structure: BaseLayout containerProps.className='relative w-full h-full bg-black overflow-hidden'. Central ShapeAtom for radar sweep line - thin gradient rectangle rotating 360deg over preset duration. TextAtoms positioned radially around center point using polar-to-cartesian coordinate conversion. Effects: Sweep line uses continuous rotate [0, 360] with linear easing. Each TextAtom has opacity [0,0,1,1] keyframes where the transition point (0 to 1) is calculated based on word's angular position relative to sweep timing. Post-reveal pulse: scale [1, 1.08, 1] continuous. className for text: 'font-mono text-green-400 text-sm'. Add subtle textShadow '0 0 10px #00ff41' for CRT glow effect. Timing calculation: word reveals at (angle/360) * totalDuration. Use fitDurationTo='scene' for consistent sweep timing."
},
{
"prompt": "Design 'TopoContourText' - words arranged along topographic contour lines, expanding outward from a central peak like elevation rings on a geographic map. The visual metaphor: text forms the contour lines themselves, with inner rings (higher elevation) being brighter/bolder and outer rings progressively fading. Animation flows from center outward - innermost word ring pulses bright first, then the pulse wave propagates to outer rings with delay. Dark map aesthetic with subtle grid overlay (#0f0f23 background), contour colors shifting from hot white center (#ffffff) through cyan (#00ffff) to deep blue edges (#001133). Words on each ring animate as a unit.",
"technicalSpecs": "Structure: BaseLayout containerProps.className='relative w-full h-full bg-[#0f0f23]'. Organize caption words into concentric rings (3-5 rings based on word count). Each ring is a BaseLayout with containerProps.className='absolute inset-0 flex items-center justify-center' and border-radius creating circular paths. Use CSS for circular text layout or position words at calculated points along circles. TextAtom per word with className varying by ring: inner='text-xl font-bold text-white', middle='text-lg text-cyan-400', outer='text-sm text-blue-800'. Effects: Ring-synchronized pulse - inner ring opacity/scale pulse at 0s, each outer ring delays by 0.3s. Pulse effect: opacity [0.6, 1, 0.6], scale [0.95, 1.05, 0.95] over 1s with ease-in-out. Use repeatChildrenProps on each ring BaseLayout to apply consistent effects to all words in that ring."
},
{
"prompt": "Build 'GeoClusterBurst' - words explode outward from clustered geographic points like data visualization particles dispersing. Caption sentences represent different geographic clusters. Each cluster starts as a compressed point, then words burst outward to readable positions while maintaining spatial relationship. The burst uses spring easing for organic feel. As words settle, they pulse with heatmap glow indicating data intensity. Dark mode with deep space black (#11) and neon data colors - magenta clusters (#ff006e), cyan clusters (#00b4d8), yellow clusters (#ffd60a). Multiple clusters animate in sequence across the viewport.",
"technicalSpecs": "Structure: BaseLayout containerProps.className='relative w-full h-full bg-[#11]'. Each sentence becomes a cluster BaseLayout positioned at different viewport quadrants. Words within cluster start at center position (translateX: 0, translateY: 0) then animate to final spread positions. Effects: Burst animation using generic effects - translateX [0, finalX] and translateY [0, finalY] with spring easing over 0.6s. Final positions calculated to create circular/organic spread pattern. Post-burst pulse: scale [1, 1.1, 1] continuous with 1.5s duration. TextAtom className='text-base font-medium' with color based on cluster (use sentence index to assign cluster color). Cluster timing: sentence 1 at 0s, sentence 2 at 0.8s, etc. using relativeStartAt. Add blur [10, 0] during burst for motion blur effect. Consider sub-preset 'ClusterUnit' for reusable cluster logic."
},
{
"prompt": "Create 'NightMapFlicker' - typography appears like city lights flickering on across a dark geographic map at night. Words represent population centers or data points, with size indicating importance. The flicker effect mimics electrical grid powering up - rapid opacity oscillation (3-4 flickers) before stabilizing to steady glow. Geographic distribution: words scattered across viewport in organic clustering patterns, denser toward center. Dark midnight blue (#0a1628) background with warm light colors - amber (#fbbf24), soft white (#fef3c7), occasional cool accent (#60a5fa). After stabilizing, words emit subtle ambient glow pulse like breathing city lights.",
"technicalSpecs": "Structure: BaseLayout containerProps.className='relative w-full h-full bg-[#0a1628]'. Scatter TextAtoms using pseudo-random positioning based on word index (seeded random for consistency). TextAtom className='absolute font-sans' with text-sm to text-xl based on word.metadata.impact or word length. Effects: Flicker sequence using opacity keyframes [0, 0.8, 0.2, 1, 0.4, 1, 1] over 0.4s with linear easing for sharp on/off feel. Post-flicker ambient pulse: opacity [0.85, 1, 0.85] and textShadow blur [5px, 10px, 5px] over 2s with ease-in-out, looping. Color assignment: 70% amber (#fbbf24), 20% soft white, 10% cool blue for variety. Stagger word appearances using relativeStartAt with 0.1-0.2s random variation for organic power-up feel. Use helper function to generate deterministic pseudo-random positions."
},
{
"prompt": "Design 'DataStreamFlow' - words flow like streaming geographic data points along invisible pathways, simulating real-time data visualization on a dark map interface. Words enter from edges of screen, flow along curved paths (like rivers or roads on a map), and exit or settle at destination points. Multiple streams can cross, creating layered data flow visualization. Speed varies - some words rush through (high-velocity data), others drift slowly (ambient data). Dark UI aesthetic (#111827) with streaming colors: fast streams in electric cyan (#22d3ee), slow streams in muted teal (#0d9488). Words leave motion trails using blur and opacity.",
"technicalSpecs": "Structure: BaseLayout containerProps.className='relative w-full h-full bg-[#111827] overflow-hidden'. Define 3-4 bezier curve paths across viewport. Assign words to paths based on sentence grouping. Effects: Complex translateX/translateY animations following path keypoints - e.g., translateX ['-100%', '20%', '50%', '80%', '110%'] with corresponding translateY values for curve. Fast words: 1.5s duration, slow words: 4s duration. Motion blur: filter blur [2px, 0px, 0px, 0px, 2px] - blurred at edges, sharp in middle. Opacity trail: opacity [0, 1, 1, 1, 0]. Easing: linear for constant flow feel. TextAtom className='text-sm font-mono whitespace-nowrap'. Color based on speed: fast='text-cyan-400', slow='text-teal-600'. Layer multiple stream BaseLayouts with different z-index for depth. Consider fitDurationTo='scene' with calculated word timing offsets."
},
{
"prompt": "Build 'SeismicWaveText' - words ripple outward from impact points like seismic waves on a geographic visualization. When a word appears, it creates expanding circular wave that affects neighboring words - they briefly distort (scale pulse, slight position shake) as the wave passes through them. Creates interconnected reactive typography field. Multiple impact points trigger throughout the duration, creating overlapping wave interference patterns. Dark tectonic aesthetic: charcoal (#1c1917) with seismic orange (#ea580c) for impact points, wave ripples in cooler brown (#78716c). Wave intensity decreases with distance from impact.",
"technicalSpecs": "Structure: BaseLayout containerProps.className='relative w-full h-full bg-[#1c1917]'. Position all TextAtoms in grid-like distribution. Designate certain words (high impact metadata or keywords) as 'epicenters'. Effects: Epicenter words get dramatic entry - scale [0, 1.3, 1] with opacity [0, 1] over 0.3s, color text-orange-600. Calculate distance from each epicenter to all other words. Non-epicenter words receive delayed reaction effects based on distance: scale [1, 1.05, 1] and translateY [0, -2, 0] shake. Delay = distance * 0.05s for wave propagation speed. Wave effect duration: 0.2s with ease-out. Multiple epicenters trigger at different times based on word.relativeStartAt. TextAtom base className='text-base text-stone-400'. Use generic effects with calculated startAt for each word's reaction to each epicenter. Complex but achievable with helper function to calculate all distance-based timings."
},
{
"prompt": "Create 'SatelliteOverlayType' - words appear as data labels on a satellite/aerial map view, with professional GIS annotation styling. Each word fades in with a connecting line (leader line) pointing to its 'location' on the map. Labels have semi-transparent dark backgrounds like map UI overlays. Animation sequence: dot appears at location, line draws from dot to label position, label fades in. Creates technical, professional geographic data visualization feel. Dark satellite imagery aesthetic: very dark desaturated (#0c0c0c) with UI overlay colors - labels in clean white (#f8fafc) on dark glass backgrounds (rgba), accent markers in satellite blue (#3b82f6). Systematic, grid-aligned label positioning.",
"technicalSpecs": "Structure: BaseLayout containerProps.className='relative w-full h-full bg-[#0c0c0c]'. Each word gets a group: ShapeAtom for location dot, ShapeAtom for leader line, BaseLayout for label container with TextAtom inside. Label container: containerProps.className='absolute px-2 py-1 bg-black/70 backdrop-blur-sm rounded border border-white/10'. Effects sequence per word: 1) Dot: opacity [0,1] and scale [0,1] over 0.15s; 2) Line: scaleX [0,1] (transform-origin left) over 0.2s starting at 0.1s; 3) Label: opacity [0,1] and translateY [5,0] over 0.2s starting at 0.25s. Easing: ease-out for professional feel. TextAtom className='text-xs font-mono text-slate-100 uppercase tracking-wide'. Position dots in organic scatter, labels offset to avoid overlap. Stagger word groups by 0.4s each. Use sub-preset 'AnnotationLabel' containing dot+line+label logic for reusability. Leader line as thin ShapeAtom rectangle rotated to connect dot to label."
}
]
[
{
"prompt": "Create a WHIP PAN HORIZONTAL SMEAR transition preset that simulates a fast lateral camera movement between two media items. The transition should use an extremely short overlap duration (0.15-0.25 seconds) to create that snappy, energetic YouTube edit feel. During the overlap: the outgoing media should slide rapidly to the left with extreme horizontal motion blur (blur-x), while the incoming media slides in from the right with matching blur. Use a sharp ease-out curve for the outgoing media and ease-in for incoming to create the characteristic 'snap' of a whip pan. Both media should reach peak motion blur at the exact midpoint of the transition, then sharpen as they settle. The BaseLayout container should use 'overflow-hidden' to clip the sliding content. Apply horizontal scale stretch (scaleX: 1.1) during peak motion to enhance the smear effect. Target high-energy content like gaming clips, vlogs, or action montages.",
"technicalSpecs": "BaseLayout: single container with 'absolute inset-0 overflow-hidden', duration = media1.duration + media2.duration - 0.2s overlap. Outgoing media: translateX keyframes [0%, -120%] with blur filter [0px, 20px, 0px] bell curve, scaleX [1, 1.15, 1] during transition. Incoming media: translateX [-120%, 0%] with matching blur curve, relative start at (media1.duration - 0.2s). Effects: provider mode with targetIds for each atom, AnimationRange arrays for transform and filter. Z-index: incoming above outgoing. Easing: cubic-bezier(0.25, 0.1, 0.25, 1) for snap feel."
},
{
"prompt": "Build a DIRECTIONAL SWISH transition with vertical motion blur streaks that creates a fast upward whip movement between scenes. This variation moves vertically instead of horizontally - outgoing media whooshes upward and out while incoming media enters from below. Use a 0.18-second ultra-fast overlap for maximum impact. Apply vertical blur filter (blur-y equivalent via transform skewY or CSS filter) combined with translateY animation. Add a subtle brightness flash at the transition midpoint (brightness: 1.3) to simulate the camera exposure change during fast movement. Include slight rotation (2-3 degrees) in the direction of movement for added dynamism. Perfect for reveal moments, topic changes, or high-energy YouTube intros.",
"technicalSpecs": "BaseLayout: 'absolute inset-0 overflow-hidden', duration calculation with 0.18s overlap. Outgoing: translateY [0%, -110%] over 0.18s, blur [0, 15px] bell curve, rotate [-2deg, 0deg]. Incoming: translateY [110%, 0%] synchronized, blur matching curve, rotate [2deg, 0deg]. Brightness effect on container: [1, 1.3, 1] during overlap. Both media use 'object-cover' for full frame. Provider mode effects with separate targetIds. Relative timing: incoming starts at outgoingDuration - 0.18s. Easing: ease-out for outgoing departure, ease-in-out for incoming arrival."
},
{
"prompt": "Design a DOUBLE WHIP PAN transition that creates a back-and-forth lateral movement - first swishing right then immediately left - before settling on the new media. This two-stage transition uses a 0.3-second overlap divided into two phases: the outgoing media slides right (0.15s) creating anticipation, then both slide sharply left (0.15s) for the actual transition. Apply progressive motion blur that intensifies through both phases. The incoming media should appear to 'catch' the momentum of the second swish. Use scaleX stretching during horizontal movement and add a subtle shake (2-3px vertical wiggle) at the transition point for impact. Great for comedic timing, reaction videos, or dramatic reveals.",
"technicalSpecs": "BaseLayout: 0.3s overlap period, 'overflow-hidden absolute inset-0'. Phase 1 (0-0.15s): outgoing translateX [0%, 15%] with blur [0, 8px], incoming hidden (opacity: 0). Phase 2 (0.15-0.3s): outgoing translateX [15%, -120%] with blur [8px, 25px, 0], incoming translateX [120%, 0%] with matching blur. ScaleX: [1, 1.08, 1.12, 1] across phases. Vertical shake: translateY oscillation [0, 3px, -3px, 0] at phase boundary. Provider mode with AnimationRange arrays covering both phases. Keyframe percentages: 0%, 50%, 100% mapping to the two-phase timing."
},
{
"prompt": "Create a MOTION SMEAR CROSSFADE hybrid transition that combines the speed of a whip pan with a brief crossfade moment. Unlike pure slide transitions, this keeps both media briefly visible at the midpoint while heavily motion-blurred. Use a 0.25-second overlap where: first 0.1s the outgoing starts sliding and blurring, middle 0.05s both are visible but extremely blurred (creating an abstract smear), final 0.1s the incoming sharpens while completing its slide-in. Apply horizontal blur values up to 30px at peak. Add saturation boost during the blur phase for vibrant color smearing. The crossfade moment creates a dreamy, almost film-like quality while maintaining whip pan energy. Suitable for music videos, travel montages, or aesthetic YouTube content.",
"technicalSpecs": "BaseLayout: 0.25s overlap, 'absolute inset-0 overflow-hidden'. Outgoing: opacity [1, 0.7, 0] across overlap, translateX [0%, -60%], blur [0, 30px, 30px]. Incoming: opacity [0, 0.7, 1], translateX [60%, 0%], blur [30px, 30px, 0]. Peak blur at 40-60% of transition creates smear moment. Saturate filter: [1, 1.4, 1] bell curve for color pop. Both media visible simultaneously at midpoint with combined blur. Z-index: incoming above outgoing throughout. Provider mode effects with synchronized AnimationRange timing. Easing: linear for blur, ease-in-out for position."
},
{
"prompt": "Build an ELASTIC WHIP transition with bounce-back physics that overshoots the final position before settling. The incoming media slides in fast from the right, overshoots slightly to the left (-5% past center), then bounces back to center position. Meanwhile, outgoing media slides out with matching elastic energy. Use a 0.35-second overlap to accommodate the bounce physics. Apply motion blur only during the fast movement phase, not during the settle. Add subtle scale pulse (1.02x) at the overshoot moment for emphasis. The elastic bounce creates a playful, energetic feel perfect for gaming content, comedic edits, or youthful brand content. Include slight rotation (1-2 degrees) that also bounces back.",
"technicalSpecs": "BaseLayout: 0.35s overlap for bounce accommodation. Outgoing: translateX [0%, -115%] with blur [0, 20px], no bounce (exits cleanly). Incoming: translateX [115%, -5%, 0%] with blur [20px, 5px, 0] - three keyframes at 0%, 70%, 100%. Scale: [1, 1.02, 1] synchronized with overshoot. Rotation: [3deg, -1deg, 0deg] for incoming. Easing: cubic-bezier(0.34, 1.56, 0.64, 1) for elastic overshoot effect. Provider mode with separate effect arrays per media. Relative timing: bounce settle phase (final 30%) has no blur for crisp landing."
},
{
"prompt": "Design a ZOOM WHIP COMBO transition that adds depth to the lateral movement by simultaneously zooming. As the whip pan occurs, both media scale up slightly (1.1x) creating a 'pushing through' sensation. The outgoing media scales up while sliding out, the incoming scales down from 1.15x to 1x while sliding in. Use 0.2-second overlap with aggressive motion blur on the horizontal axis. Add vignette darkening at the edges during transition to focus attention on the center blur zone. The zoom adds cinematic depth perception to the otherwise flat lateral movement. Perfect for action sequences, sports highlights, or dramatic moment transitions in vlogs.",
"technicalSpecs": "BaseLayout: 0.2s overlap, 'absolute inset-0 overflow-hidden'. Outgoing: translateX [0%, -100%], scale [1, 1.15], blur [0, 25px]. Incoming: translateX [100%, 0%], scale [1.15, 1], blur [25px, 0]. Vignette: box-shadow inset effect or radial gradient overlay that intensifies during transition [0%, 30%, 0%]. Transform-origin: center center for zoom. Combined transform string: 'translateX() scale()'. Z-index management for proper layering. Provider mode with transform and filter AnimationRanges. Easing: ease-out for departing, ease-in for arriving creates smooth depth shift."
},
{
"prompt": "Create a STUTTER WHIP transition with intentional micro-pauses that create a strobe-like, glitchy effect during the fast movement. Instead of smooth continuous motion, the slide happens in 3-4 rapid steps with brief holds (0.03s each) between movements. Apply motion blur only during movement phases, sharpen during holds. Use a 0.28-second overlap divided into stutter segments. Add brightness flicker during holds for strobe effect. The stuttered motion creates an edgy, modern aesthetic popular in gaming montages, music video edits, and high-energy YouTube content. Include horizontal position jumps: 0% → 30% → 60% → 100% with blur spiking between positions.",
"technicalSpecs": "BaseLayout: 0.28s overlap, 'absolute inset-0 overflow-hidden'. Outgoing translateX keyframes: [0%, -30%, -30%, -65%, -65%, -100%] at times [0%, 25%, 30%, 55%, 60%, 100%] - holds at 25-30% and 55-60%. Blur: [0, 20px, 5px, 20px, 5px, 0] matching movement/hold pattern. Brightness flicker: [1, 1, 1.2, 1, 1.2, 1] during holds. Incoming: inverse pattern starting from 100% position. Step easing: 'steps(1)' for position, linear for blur transitions between. Provider mode with complex AnimationRange arrays. Multiple keyframe percentages for stutter effect."
},
{
"prompt": "Build a DIAGONAL SWISH transition that moves at a 45-degree angle instead of pure horizontal, creating a more dynamic and unexpected whip pan direction. Outgoing media exits toward top-left corner while incoming enters from bottom-right. Use combined translateX and translateY with 0.22-second overlap. Apply directional blur that follows the diagonal movement angle. Add subtle skew transform (skewX: 5deg, skewY: 5deg) during peak motion to enhance the diagonal streak effect. The diagonal movement creates visual interest and breaks the monotony of standard horizontal transitions. Great for creative YouTube content, artistic vlogs, or stylized gaming edits.",
"technicalSpecs": "BaseLayout: 0.22s overlap, 'absolute inset-0 overflow-hidden'. Outgoing: translateX [0%, -80%], translateY [0%, -60%] combined for diagonal path, blur [0, 22px], skew [0deg, 5deg, 0deg]. Incoming: translateX [80%, 0%], translateY [60%, 0%], matching blur and skew curves. Transform combination: 'translate(X, Y) skew(X, Y)' in single transform property. Blur approximates diagonal via standard blur (no directional CSS blur available). Z-index: incoming layered above. Provider mode effects. Easing: cubic-bezier(0.4, 0, 0.2, 1) for smooth diagonal arc."
},
{
"prompt": "Design a WHIP WITH FLASH FRAME transition that inserts a brief white or colored flash frame at the peak of the whip pan movement. During the 0.24-second overlap, the transition hits a 0.04-second moment where a white overlay flashes to near-full opacity (0.8) while both media are maximally blurred. This simulates the overexposure moment of a real camera whip pan and adds punch to the transition. The flash can be tinted (warm orange for energy, cool blue for tech content). Motion blur builds to the flash, then decreases after. Perfect for impactful moment transitions, highlight reels, or energetic YouTube intros.",
"technicalSpecs": "BaseLayout: 0.24s overlap, contains media atoms plus ShapeAtom or overlay div for flash. Flash layer: white/tinted rectangle, opacity [0, 0, 0.8, 0, 0] at keyframes [0%, 40%, 50%, 60%, 100%], positioned above media with higher z-index. Outgoing: translateX [0%, -110%], blur [0, 18px, 25px, 18px, 0] peaking at flash. Incoming: translateX [110%, 0%], matching blur curve. Flash color customizable via background-color or gradient. Container: 'absolute inset-0 overflow-hidden'. Provider mode targeting all three elements (outgoing, incoming, flash). Timing: flash peaks at exact 50% of overlap duration."
},
{
"prompt": "Create a RACK FOCUS WHIP transition that combines the lateral movement with a simulated depth-of-field shift. As the whip pan occurs, the outgoing media not only slides and motion-blurs but also goes out of focus (additional gaussian blur), while incoming media starts out of focus and sharpens as it arrives. Use two blur types: directional motion blur (horizontal) for movement, plus uniform blur for focus simulation. The 0.3-second overlap allows time for the focus pull effect. Outgoing reaches peak motion blur at 0.1s, peak defocus at 0.15s, then exits. Incoming starts defocused, gains motion blur during entry, then sharpens fully. Creates a cinematic, professional transition feel for documentary-style content or premium vlogs.",
"technicalSpecs": "BaseLayout: 0.3s overlap for focus pull timing. Outgoing: translateX [0%, -100%], motion blur [0, 20px, 15px] (peaks early), focus blur [0, 0, 8px, 8px] (peaks late, maintains through exit), combined via filter: blur() with varying values. Incoming: translateX [100%, 0%], starts with focus blur [8px] at entry, motion blur [20px, 0] during movement, focus blur [8px, 0] sharpening at end. Total blur = motion + focus at each keyframe. Scale slight zoom [1, 1.03] on outgoing for depth enhancement. Provider mode with complex filter AnimationRanges. Easing: ease-in-out for organic focus pull feel."
},
{
"prompt": "Create a page turn transition preset that simulates a book page curling from the bottom-right corner. The outgoing image should appear to lift and curl diagonally toward the top-left, revealing the incoming image beneath. Use CSS transforms with perspective and rotateY/rotateX to create the 3D paper fold effect. Add a dynamic shadow gradient that follows the curl line, darkening the area beneath the lifted corner. The curl should start small at 0% of overlap, reach maximum fold at 50%, and complete the turn by 100%. Include a subtle paper texture overlay during the transition. The incoming image should have a slight brightness increase as it's 'revealed' from under the page. Target YouTube thumbnail aspect ratio (16:9) with smooth 60fps animation using GPU-accelerated transforms.",
"technicalSpecs": "BaseLayout duration = media1.duration + media2.duration - overlapDuration (overlap: 1.2s recommended). Container: 'relative w-full h-full overflow-hidden' with perspective: 1500px. Outgoing ImageAtom: absolute inset-0, z-index-20, transform-origin: bottom-right. Effects on outgoing: rotateY from 0deg to -180deg, rotateX from 0deg to 15deg, with custom cubic-bezier(0.25, 0.46, 0.45, 0.94). Shadow gradient overlay div with linear-gradient(135deg, transparent 40%, rgba(0,0,0,0.4) 100%), opacity animates 0->0.8->0 during overlap. Incoming ImageAtom: absolute inset-0, z-index-10, filter brightness animates from 0.7 to 1.0. Provider mode with targetIds for each atom."
},
{
"prompt": "Build a vertical page flip transition like turning pages in a standing book or calendar. The outgoing image rotates upward around a horizontal axis at the top edge, folding over itself to reveal the incoming image. Implement a realistic paper shadow that projects downward onto the incoming image as the page lifts. The fold should have a subtle paper curve effect using multiple layered transforms. Add a slight bounce easing at the end when the page settles. Include a thin highlight line along the fold edge to simulate light catching the paper. The incoming image should start slightly darkened (as if in shadow) and brighten as the page lifts away.",
"technicalSpecs": "BaseLayout duration calculation: total = img1Duration + img2Duration - 1.5s overlap. Container: 'relative w-full aspect-video overflow-hidden' with perspective: 2000px, perspective-origin: center top. Outgoing ImageAtom: absolute inset-0, z-index-20, transform-origin: top center. Animation: rotateX from 0deg to 180deg with ease-in-out-back. Shadow element: absolute, bottom-0, h-1/2, linear-gradient(to bottom, rgba(0,0,0,0.5), transparent), translateY and opacity synchronized with page rotation. Highlight pseudo-element: 2px white/transparent gradient line at fold axis. Incoming ImageAtom: z-index-10, brightness filter 0.6->1.0 over overlap period. Use AnimationRange[] with percentage-based keyframes."
},
{
"prompt": "Design a diagonal corner peel transition where the page curls from the top-right corner, revealing the next image with a realistic paper fold simulation. The curl should create a triangular reveal pattern that expands from corner to full page. Implement dual shadows: one cast by the curling page onto the incoming image, and one on the back of the curling page itself. The curled portion should show a slightly desaturated/darker version of the outgoing image (simulating paper back). Add subtle paper fiber texture during the peel. The reveal should accelerate - starting slow and finishing fast for dramatic effect.",
"technicalSpecs": "Overlap duration: 1.8s for smooth curl effect. BaseLayout: 'relative w-full h-full' with preserve-3d transform-style. Outgoing image container with clip-path polygon animating from 'polygon(0 0, 100% 0, 100% 100%, 0 100%)' to 'polygon(0 0, 0 0, 0 100%, 0 100%)' following diagonal path. Curl element: absolute div with same image, clip-path for triangular curl portion, rotateY(-180deg) + translateX with transform-origin at diagonal fold line. Shadow layers: drop-shadow filter on curl element (0 10px 30px rgba(0,0,0,0.3)), gradient overlay on incoming image synced to curl position. Easing: cubic-bezier(0.4, 0, 1, 1) for acceleration. Incoming ImageAtom: z-index-5, revealed progressively."
},
{
"prompt": "Create a center-fold book spread transition simulating closing a book and opening to a new page. The outgoing image splits vertically down the center, with left half folding left and right half folding right (like closing a book), then the incoming image unfolds from center outward. This creates a satisfying open-close-open sequence. Add spine shadow down the center throughout. Include page edge details (subtle white lines) on fold edges. The fold should have depth with slight skew to show page thickness. Background during fold should be a neutral paper color.",
"technicalSpecs": "Extended overlap: 2.4s (1.2s close + 1.2s open). BaseLayout with 'relative w-full aspect-video bg-amber-50' for paper backing. Outgoing image split into two ImageAtoms with clip-path: left 'polygon(0 0, 50% 0, 50% 100%, 0 100%)', right 'polygon(50% 0, 100% 0, 100% 100%, 50% 100%)'. Left half: transform-origin right, rotateY 0->-90deg (first half of overlap). Right half: transform-origin left, rotateY 0->90deg. Incoming image same split structure, animations reversed in second half: rotateY from ±90deg to 0deg. Spine shadow: absolute div, w-4, center positioned, gradient shadow, persistent. Page edge: 2px inset shadow on fold edges. Z-index management critical for proper stacking during fold."
},
{
"prompt": "Build a wind-blown page turn effect where the outgoing image ripples and flutters before turning, as if caught by a breeze. The page should have wave-like deformation during the turn, not a rigid fold. Implement using multiple transform keyframes that create a serpentine curl pattern. Add motion blur during the fastest part of the turn. The incoming image should have a subtle parallax shift as if it's a separate layer being revealed. Include floating paper particle effects (small white rectangles) during transition. Shadow should be soft and diffused, following the wave pattern.",
"technicalSpecs": "Overlap: 1.6s with complex multi-stage animation. Outgoing ImageAtom: animate with 8+ keyframes creating wave effect - combine rotateY, rotateX, skewX values that oscillate. Example keyframes: 0%: rotateY(0), 20%: rotateY(-20deg) skewX(5deg), 40%: rotateY(-60deg) skewX(-3deg), 60%: rotateY(-120deg) skewX(4deg), 100%: rotateY(-180deg). Motion blur: filter blur(2px) at 40-60% of animation. Incoming ImageAtom: translateX from 20px to 0, translateY from -10px to 0 for parallax. Particle effects: 5-8 ShapeAtom rectangles (w-2 h-3 bg-white/60) with randomized float animations - translateY, translateX, rotate, opacity. Soft shadow: filter drop-shadow with large blur radius (20px+), opacity following wave peaks."
},
{
"prompt": "Design a hardcover book page turn with realistic thickness simulation. Unlike paper, this transition shows page depth - the turning page has visible thickness on its edge (like cardboard or thick stock). The outgoing image turns as a rigid panel with 3D depth visible on the turning edge. Add leather texture gradient shadow from an implied book spine on the left edge. The incoming image should appear to be slightly recessed (in a book frame). Include a subtle crease/fold line texture that appears along the turn axis. Golden accent lighting on page edges for premium feel.",
"technicalSpecs": "BaseLayout: 'relative w-full aspect-video' with perspective: 1200px. Book frame: outer div with 'p-4 bg-gradient-to-r from-amber-900 to-amber-800' for leather spine effect. Page container with transform-style: preserve-3d. Outgoing image: main face with backface-visibility: hidden. Page edge: separate div 'absolute right-0 w-2 h-full bg-gradient-to-r from-amber-100 to-white' representing page thickness, rotateY synced with main page. Animation: rotateY 0 to -180deg, transform-origin: left center. Page back: duplicate image container rotated 180deg initially, backface-visibility: hidden. Incoming ImageAtom: scale(0.98) with subtle inner shadow for recessed look. Golden edge highlight: 1px border-amber-300 with subtle glow. Overlap: 1.4s."
},
{
"prompt": "Create a magazine page flip with glossy paper effect. The transition should include realistic light reflection that moves across the page surface during the turn (like light catching glossy paper). Implement a sharp, crisp fold with minimal curl - more angular like coated stock. Add a subtle color shift in the reflection (slight blue/white highlight streak). The shadow should be harder-edged than matte paper. Include a brief 'snap' moment at 80% where the page quickly settles (magazine pages flip fast at the end). The aspect ratio should support portrait magazine layouts.",
"technicalSpecs": "Portrait-optimized: aspect-[3/4] or aspect-[2/3] container. Overlap: 1.0s (faster flip for magazine feel). Outgoing ImageAtom: rotateY 0 to -180deg with custom easing cubic-bezier(0.2, 0, 0.4, 1) for snap effect. Glossy reflection: pseudo-element or overlay div with linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.4) 45%, rgba(255,255,255,0.1) 50%, transparent 55%), translateX animated from -100% to 200% during flip. Hard shadow: drop-shadow(8px 0 10px rgba(0,0,0,0.4)) with minimal blur. Snap easing: ease-in for 0-80%, then ease-out-back for 80-100%. Color tint in reflection: mix white with rgba(200,220,255,0.3) for cool highlight. Transform-origin: left center for right-to-left flip."
},
{
"prompt": "Build a notebook spiral binding page turn effect. The page turns around a visible spiral binding on the left edge, with the spiral casting shadows on both pages. The turn should have slight resistance/spring at the binding (pages don't lie perfectly flat). Implement visible spiral rings as decorative elements. The outgoing page should rotate past 180 degrees slightly then spring back (overshoot). Paper should have a slight cream/ivory tint with ruled line texture overlay. The incoming image should bounce subtly when the page lands.",
"technicalSpecs": "BaseLayout with spiral binding column: 'relative flex' with left div 'w-6 bg-gradient-to-r from-gray-400 to-gray-300' for binding. Spiral rings: 6-8 circular ShapeAtom elements 'w-4 h-4 rounded-full border-2 border-gray-500' positioned along binding edge. Page container: 'flex-1 relative' with perspective. Outgoing page: rotateY animation 0deg -> -190deg -> -180deg (overshoot and settle) using spring easing or keyframes at 0%, 85%, 100%. Paper texture: overlay div with subtle linear pattern for ruled lines, bg-amber-50/30 tint. Shadow from spiral: positioned shadows on both pages, intensity varies with page rotation. Incoming page: translateY from 3px to 0 with bounce easing on landing. Overlap: 1.3s. Binding shadow: absolute shadow elements behind spiral rings."
},
{
"prompt": "Design a weathered/vintage book page turn with aged paper effects. The page should have torn edges, slight yellowing, and the turn should be imperfect (slight wobble, not perfectly straight). Add dust particles floating during the turn. The shadow should be warm-toned (sepia). Include subtle paper crinkle texture that becomes more visible during the fold. The incoming page should have slight vignette darkening at edges. Implement a slower, heavier turn feeling - like old thick pages. Add very subtle page sound visualization through slight scale pulse.",
"technicalSpecs": "Slow overlap: 2.0s for heavy, deliberate feel. Outgoing ImageAtom: sepia(0.3) brightness(0.95) filter for aged look. Clip-path with slightly irregular polygon for torn edge effect. RotateY animation with subtle rotateZ wobble (±2deg oscillation). Dust particles: 10-15 small ShapeAtom circles 'w-1 h-1 rounded-full bg-amber-200/40' with float animations - random trajectories, slow fade out. Crinkle texture: overlay div with noise/paper texture image, opacity increases from 0.1 to 0.3 during fold. Shadow: drop-shadow with rgba(139,90,43,0.4) for warm sepia tone. Incoming page: radial-gradient vignette overlay 'bg-radial-gradient from-transparent to-black/20'. Scale pulse: subtle scale 1.0 -> 1.005 -> 1.0 synchronized with imagined page-land sound. Easing: cubic-bezier(0.4, 0, 0.2, 1) for heavy feel."
},
{
"prompt": "Create a pop-up book style transition where the outgoing image folds down flat while 3D elements from the incoming image pop up dramatically. The main incoming image should rise from a folded state to standing, with secondary decorative elements popping up at staggered times. Implement paper fold mechanics where elements unfold from creases. Add dramatic shadows that emphasize the 3D pop-up effect. Include subtle paper construction details (fold lines, tabs). The overall effect should feel playful and dimensional, perfect for children's content or creative YouTube thumbnails.",
"technicalSpecs": "Extended overlap: 2.2s for complex multi-element animation. BaseLayout: perspective: 800px for dramatic 3D, 'relative w-full aspect-video bg-gradient-to-b from-sky-100 to-sky-200' for storybook background. Outgoing image: rotateX from 0deg to 90deg (folds down flat), transform-origin: bottom. Main incoming element: rotateX from -90deg to 0deg (pops up from flat), transform-origin: bottom, delayed start 0.4s into overlap. Secondary pop-up elements: 2-3 additional divs/shapes with staggered rotateX animations, delays of 0.6s, 0.8s, 1.0s. Fold lines: thin gradient lines on fold axes 'h-px bg-gradient-to-r from-transparent via-gray-400 to-transparent'. Dynamic shadows: translateY and blur increase as elements rise, using drop-shadow filter. Tab details: small rectangular shapes at fold connections. Easing: ease-out-back for bouncy pop-up feel."
},
{
"prompt": "Create a typokinetic preset called 'GeoHeatmapPulse' that simulates geographic data points lighting up on a dark map. The visual concept: words from captions appear as glowing data points that pulse outward like heatmap intensity rings. Each word materializes at a random position within a dark grid overlay (simulating map coordinates), starting as a tight concentrated glow that expands outward with decreasing opacity - like thermal signatures spreading across a cartographic surface. Use TextAtom for each word with absolute positioning within a BaseLayout container. The dark mode aesthetic requires a near-black background (#0a0a0f) with cyan/magenta gradient glows (#00d4ff to #ff00aa). Words should fade in with scale from 0.3 to 1.0 while their text-shadow expands from 0px to 20px blur radius. Stagger word appearances by 150ms each. The expansion animation should use ease-out timing to feel like energy dissipating. Add subtle continuous rotation (0 to 2deg oscillation) to create living data visualization feel.",
"technicalSpecs": "Structure: BaseLayout with containerProps.className='relative w-full h-full bg-[#0a0a0f] overflow-hidden'. Map each caption word to TextAtom with absolute positioning using calculated grid positions. Effects: Use generic keyframe effects for each word - opacity [0,1], scale [0.3,1], textShadow animating from '0 0 2px #00d4ff' to '0 0 20px #00d4ff, 0 0 40px #ff00aa'. Timing: Word appearances staggered with relativeStartAt incrementing by 0.15 per word. Duration per word animation: 0.8s with ease-out easing. TextAtom styling: className='text-lg font-mono text-cyan-400 whitespace-nowrap'. Add subtle rotate effect [-1, 1, -1] over full duration with linear easing for ambient motion. Consider using repeatChildrenProps for consistent glow styling across all text elements."
},
{
"prompt": "Design 'DataNodeTypography' - a typokinetic preset where caption words behave like nodes in a geospatial network graph lighting up sequentially. Visualize words as data points connected by invisible geographic relationships. Each word appears with a sharp 'ping' effect - instant appearance followed by concentric ring expansions behind it (using pseudo-elements or layered ShapeAtoms). The dark map aesthetic uses deep navy (#0d1117) with electric blue (#58a6ff) and warm orange (#f0883e) accent colors mimicking data visualization palettes. Words cluster in spatial groups based on sentence boundaries, creating visual 'regions' on the map. Ring expansions use scale transforms from 1 to 3 with opacity fading from 0.8 to 0. Implement using nested BaseLayouts - outer container for dark background, inner containers for word clusters.",
"technicalSpecs": "Structure: Outer BaseLayout containerProps.className='relative w-full h-full bg-[#0d1117]'. Group words by sentence using caption.sentences data. Each sentence gets a BaseLayout cluster with containerProps.className='absolute flex flex-wrap gap-2' positioned at varied coordinates. TextAtom per word with className='text-base font-semibold text-blue-400'. Behind each TextAtom, add ShapeAtom circles for ring effect. Effects system: TextAtom gets opacity [0,1] over 0.1s (sharp appearance), ShapeAtom rings get scale [1,3] and opacity [0.8,0] over 0.6s with ease-out. Use childrenProps to apply consistent styling. Timing: relativeStartAt based on word.relativeStartAt from caption data. Ring expansion starts 0.05s after word appears. Consider internal effect preset 'ping-ring' for reusable ring expansion animation."
},
{
"prompt": "Build 'HeatmapIntensityText' - words visualized as heatmap intensity zones where typography size and glow intensity correlate to word 'impact' metadata from captions. High-impact words appear larger with more intense pulsing glows (simulating hot zones), while regular words are smaller with subtle ambient glow (cool zones). The pulsing animation creates breathing effect - scale oscillates between 1.0 and 1.15 continuously, with glow intensity following. Dark mode map uses charcoal (#1a1a2e) with temperature gradient from cool blue (#4361ee) through neutral (#f72585) to hot pink. Position words in a flowing river-like path across the screen, suggesting geographic data flow. Use caption metadata to drive visual hierarchy.",
"technicalSpecs": "Structure: BaseLayout containerProps.className='relative w-full h-full bg-[#1a1a2e] flex items-center justify-center'. Create curved path positioning using calculated x/y coordinates that form gentle S-curve across viewport. TextAtom for each word with dynamic className based on word.metadata.impact: high impact gets 'text-2xl text-pink-500', medium gets 'text-lg text-purple-400', low gets 'text-sm text-blue-400'. Effects: Continuous pulse using generic effects - scale [1, 1.15, 1] and textShadow intensity cycling. High-impact words: pulse duration 0.8s, glow blur 15px. Low-impact: pulse duration 1.2s, glow blur 5px. Use word.relativeStartAt for staggered entry with opacity [0,1] over 0.3s. Easing: ease-in-out for breathing feel. Consider creating helper function to calculate curve positions based on word index and total word count."
},
{
"prompt": "Create 'RadarSweepTypography' - caption words reveal as a radar sweep animation passes over them, simulating geographic scanning of data points. A rotating line (ShapeAtom or gradient overlay) sweeps 360 degrees across the dark map surface. Words only become visible when the sweep line passes their position, then they glow and pulse as 'detected' data points. The sweep creates dramatic reveal timing - words in the sweep's path illuminate sequentially based on their angular position from center. Dark mode uses military radar green (#00ff41) on black (#000000) with scan line leaving trails of detected typography. Words persist with gentle pulse after detection.",
"technicalSpecs": "Structure: BaseLayout containerProps.className='relative w-full h-full bg-black overflow-hidden'. Central ShapeAtom for radar sweep line - thin gradient rectangle rotating 360deg over preset duration. TextAtoms positioned radially around center point using polar-to-cartesian coordinate conversion. Effects: Sweep line uses continuous rotate [0, 360] with linear easing. Each TextAtom has opacity [0,0,1,1] keyframes where the transition point (0 to 1) is calculated based on word's angular position relative to sweep timing. Post-reveal pulse: scale [1, 1.08, 1] continuous. className for text: 'font-mono text-green-400 text-sm'. Add subtle textShadow '0 0 10px #00ff41' for CRT glow effect. Timing calculation: word reveals at (angle/360) * totalDuration. Use fitDurationTo='scene' for consistent sweep timing."
},
{
"prompt": "Design 'TopoContourText' - words arranged along topographic contour lines, expanding outward from a central peak like elevation rings on a geographic map. The visual metaphor: text forms the contour lines themselves, with inner rings (higher elevation) being brighter/bolder and outer rings progressively fading. Animation flows from center outward - innermost word ring pulses bright first, then the pulse wave propagates to outer rings with delay. Dark map aesthetic with subtle grid overlay (#0f0f23 background), contour colors shifting from hot white center (#ffffff) through cyan (#00ffff) to deep blue edges (#001133). Words on each ring animate as a unit.",
"technicalSpecs": "Structure: BaseLayout containerProps.className='relative w-full h-full bg-[#0f0f23]'. Organize caption words into concentric rings (3-5 rings based on word count). Each ring is a BaseLayout with containerProps.className='absolute inset-0 flex items-center justify-center' and border-radius creating circular paths. Use CSS for circular text layout or position words at calculated points along circles. TextAtom per word with className varying by ring: inner='text-xl font-bold text-white', middle='text-lg text-cyan-400', outer='text-sm text-blue-800'. Effects: Ring-synchronized pulse - inner ring opacity/scale pulse at 0s, each outer ring delays by 0.3s. Pulse effect: opacity [0.6, 1, 0.6], scale [0.95, 1.05, 0.95] over 1s with ease-in-out. Use repeatChildrenProps on each ring BaseLayout to apply consistent effects to all words in that ring."
},
{
"prompt": "Build 'GeoClusterBurst' - words explode outward from clustered geographic points like data visualization particles dispersing. Caption sentences represent different geographic clusters. Each cluster starts as a compressed point, then words burst outward to readable positions while maintaining spatial relationship. The burst uses spring easing for organic feel. As words settle, they pulse with heatmap glow indicating data intensity. Dark mode with deep space black (#11) and neon data colors - magenta clusters (#ff006e), cyan clusters (#00b4d8), yellow clusters (#ffd60a). Multiple clusters animate in sequence across the viewport.",
"technicalSpecs": "Structure: BaseLayout containerProps.className='relative w-full h-full bg-[#11]'. Each sentence becomes a cluster BaseLayout positioned at different viewport quadrants. Words within cluster start at center position (translateX: 0, translateY: 0) then animate to final spread positions. Effects: Burst animation using generic effects - translateX [0, finalX] and translateY [0, finalY] with spring easing over 0.6s. Final positions calculated to create circular/organic spread pattern. Post-burst pulse: scale [1, 1.1, 1] continuous with 1.5s duration. TextAtom className='text-base font-medium' with color based on cluster (use sentence index to assign cluster color). Cluster timing: sentence 1 at 0s, sentence 2 at 0.8s, etc. using relativeStartAt. Add blur [10, 0] during burst for motion blur effect. Consider sub-preset 'ClusterUnit' for reusable cluster logic."
},
{
"prompt": "Create 'NightMapFlicker' - typography appears like city lights flickering on across a dark geographic map at night. Words represent population centers or data points, with size indicating importance. The flicker effect mimics electrical grid powering up - rapid opacity oscillation (3-4 flickers) before stabilizing to steady glow. Geographic distribution: words scattered across viewport in organic clustering patterns, denser toward center. Dark midnight blue (#0a1628) background with warm light colors - amber (#fbbf24), soft white (#fef3c7), occasional cool accent (#60a5fa). After stabilizing, words emit subtle ambient glow pulse like breathing city lights.",
"technicalSpecs": "Structure: BaseLayout containerProps.className='relative w-full h-full bg-[#0a1628]'. Scatter TextAtoms using pseudo-random positioning based on word index (seeded random for consistency). TextAtom className='absolute font-sans' with text-sm to text-xl based on word.metadata.impact or word length. Effects: Flicker sequence using opacity keyframes [0, 0.8, 0.2, 1, 0.4, 1, 1] over 0.4s with linear easing for sharp on/off feel. Post-flicker ambient pulse: opacity [0.85, 1, 0.85] and textShadow blur [5px, 10px, 5px] over 2s with ease-in-out, looping. Color assignment: 70% amber (#fbbf24), 20% soft white, 10% cool blue for variety. Stagger word appearances using relativeStartAt with 0.1-0.2s random variation for organic power-up feel. Use helper function to generate deterministic pseudo-random positions."
},
{
"prompt": "Design 'DataStreamFlow' - words flow like streaming geographic data points along invisible pathways, simulating real-time data visualization on a dark map interface. Words enter from edges of screen, flow along curved paths (like rivers or roads on a map), and exit or settle at destination points. Multiple streams can cross, creating layered data flow visualization. Speed varies - some words rush through (high-velocity data), others drift slowly (ambient data). Dark UI aesthetic (#111827) with streaming colors: fast streams in electric cyan (#22d3ee), slow streams in muted teal (#0d9488). Words leave motion trails using blur and opacity.",
"technicalSpecs": "Structure: BaseLayout containerProps.className='relative w-full h-full bg-[#111827] overflow-hidden'. Define 3-4 bezier curve paths across viewport. Assign words to paths based on sentence grouping. Effects: Complex translateX/translateY animations following path keypoints - e.g., translateX ['-100%', '20%', '50%', '80%', '110%'] with corresponding translateY values for curve. Fast words: 1.5s duration, slow words: 4s duration. Motion blur: filter blur [2px, 0px, 0px, 0px, 2px] - blurred at edges, sharp in middle. Opacity trail: opacity [0, 1, 1, 1, 0]. Easing: linear for constant flow feel. TextAtom className='text-sm font-mono whitespace-nowrap'. Color based on speed: fast='text-cyan-400', slow='text-teal-600'. Layer multiple stream BaseLayouts with different z-index for depth. Consider fitDurationTo='scene' with calculated word timing offsets."
},
{
"prompt": "Build 'SeismicWaveText' - words ripple outward from impact points like seismic waves on a geographic visualization. When a word appears, it creates expanding circular wave that affects neighboring words - they briefly distort (scale pulse, slight position shake) as the wave passes through them. Creates interconnected reactive typography field. Multiple impact points trigger throughout the duration, creating overlapping wave interference patterns. Dark tectonic aesthetic: charcoal (#1c1917) with seismic orange (#ea580c) for impact points, wave ripples in cooler brown (#78716c). Wave intensity decreases with distance from impact.",
"technicalSpecs": "Structure: BaseLayout containerProps.className='relative w-full h-full bg-[#1c1917]'. Position all TextAtoms in grid-like distribution. Designate certain words (high impact metadata or keywords) as 'epicenters'. Effects: Epicenter words get dramatic entry - scale [0, 1.3, 1] with opacity [0, 1] over 0.3s, color text-orange-600. Calculate distance from each epicenter to all other words. Non-epicenter words receive delayed reaction effects based on distance: scale [1, 1.05, 1] and translateY [0, -2, 0] shake. Delay = distance * 0.05s for wave propagation speed. Wave effect duration: 0.2s with ease-out. Multiple epicenters trigger at different times based on word.relativeStartAt. TextAtom base className='text-base text-stone-400'. Use generic effects with calculated startAt for each word's reaction to each epicenter. Complex but achievable with helper function to calculate all distance-based timings."
},
{
"prompt": "Create 'SatelliteOverlayType' - words appear as data labels on a satellite/aerial map view, with professional GIS annotation styling. Each word fades in with a connecting line (leader line) pointing to its 'location' on the map. Labels have semi-transparent dark backgrounds like map UI overlays. Animation sequence: dot appears at location, line draws from dot to label position, label fades in. Creates technical, professional geographic data visualization feel. Dark satellite imagery aesthetic: very dark desaturated (#0c0c0c) with UI overlay colors - labels in clean white (#f8fafc) on dark glass backgrounds (rgba), accent markers in satellite blue (#3b82f6). Systematic, grid-aligned label positioning.",
"technicalSpecs": "Structure: BaseLayout containerProps.className='relative w-full h-full bg-[#0c0c0c]'. Each word gets a group: ShapeAtom for location dot, ShapeAtom for leader line, BaseLayout for label container with TextAtom inside. Label container: containerProps.className='absolute px-2 py-1 bg-black/70 backdrop-blur-sm rounded border border-white/10'. Effects sequence per word: 1) Dot: opacity [0,1] and scale [0,1] over 0.15s; 2) Line: scaleX [0,1] (transform-origin left) over 0.2s starting at 0.1s; 3) Label: opacity [0,1] and translateY [5,0] over 0.2s starting at 0.25s. Easing: ease-out for professional feel. TextAtom className='text-xs font-mono text-slate-100 uppercase tracking-wide'. Position dots in organic scatter, labels offset to avoid overlap. Stagger word groups by 0.4s each. Use sub-preset 'AnnotationLabel' containing dot+line+label logic for reusability. Leader line as thin ShapeAtom rectangle rotated to connect dot to label."
}
]