New Presets - Victory Candlestick: Stock Market Animation (Batch 8/11) #348
Description
[
{
"prompt": "Create a typokinetic preset that visualizes stock market candlestick data as animated vertical bars representing OHLC (Open, High, Low, Close) values. Each candlestick should be composed of a central body (rectangle showing open-close range) and wicks (thin lines showing high-low range). Use caption words to label price points or ticker symbols, with each word appearing synchronized to candlestick formation. The candlesticks should animate vertically from a baseline, with green candlesticks (bullish/up) scaling upward and red candlesticks (bearish/down) scaling downward. Apply a staggered reveal where each candlestick builds sequentially across a horizontal timeline, mimicking a real-time chart update. Use TextAtom for price labels that fade in with scale-up effects as their corresponding candlestick completes its animation. The victory theme should climax with the final candlestick showing a dramatic upward surge accompanied by a celebratory text reveal.",
"technicalSpecs": "Structure: Use BaseLayout with 'flex items-end justify-center gap-2 h-full w-full bg-slate-900 p-8' for the chart container. Create nested BaseLayouts for each candlestick column with 'flex flex-col items-center relative'. ShapeAtom for candlestick bodies (rectangles) and wicks (thin lines). TextAtom for price labels positioned with 'absolute -top-8'. Effects: Generic keyframe effects for scaleY animations on candlestick bodies from 0 to 1 with ease-out easing over 400ms, staggered by 200ms per candlestick. Wicks animate with translateY effects. Use repeatChildrenProps for candlestick generation based on data points. Timing: Relative timing with each candlestick's animation starting after the previous completes (sequential reveal). Final victory candlestick uses spring easing for dramatic bounce effect. Performance: Use transform-based animations (scaleY, translateY) for GPU acceleration. Set transform-origin to bottom for proper scaling direction."
},
{
"prompt": "Design a kinetic typography preset where stock market terminology and price numbers cascade down the screen like a financial data waterfall, then coalesce into recognizable candlestick chart formations. Caption words like 'OPEN', 'HIGH', 'LOW', 'CLOSE' should fall with physics-based easing, bouncing slightly upon landing at their designated positions within candlestick structures. The candlesticks themselves are formed by the accumulated text, with numbers stacking vertically to create the visual height of each bar. Use word metadata to identify 'impact' words (like significant price changes) which receive glow effects and larger scaling. The animation should feel like watching a victory lap as green upward-trending text dominates the composition.",
"technicalSpecs": "Structure: BaseLayout with 'relative w-full h-full overflow-hidden bg-gradient-to-b from-slate-950 to-slate-900'. Individual TextAtom components for each word/number, positioned absolutely. Use containerProps.style for custom CSS variables controlling fall trajectories. Effects: Generic keyframe effects with translateY from -100vh to final position, combined with opacity fade-in. Use spring easing (damping: 0.6, stiffness: 100) for bounce effect on landing. Impact words from caption metadata get additional glow effect via textShadow keyframes ('0 0 20px #22c55e'). Timing: Word-level timing from caption data drives stagger - earlier words in sentence fall first. Each word's duration is 600ms with 80ms stagger. Final formation holds for 2 seconds. Typography: Use monospace font 'JetBrains Mono:700' for financial data aesthetic. Green (#22c55e) for bullish, red (#ef4444) for bearish values. Performance: Batch similar animations, use will-change: transform on falling elements."
},
{
"prompt": "Build a typokinetic candlestick chart where each candle is actually constructed from animated text characters - the body made of stacked dollar signs ($) or price digits, and wicks made of vertical pipe characters (|). As the animation progresses, characters rapidly type in from top to bottom to form each candlestick shape, creating a retro terminal/Bloomberg aesthetic. Caption data provides the actual price numbers which animate into position at key points (open, high, low, close markers). The victory moment is emphasized when the final candlestick's text rapidly expands with a glitch effect, showing 'WINNER' or 'BULL RUN' composed of the same character-based visual language.",
"technicalSpecs": "Structure: BaseLayout grid container with 'grid grid-cols-5 gap-1 h-full w-full bg-black p-4 font-mono'. Each candlestick is a BaseLayout column with 'flex flex-col items-center'. TextAtom for each character row, using letterSpacing for spacing control. Effects: Typewriter-style reveal using opacity keyframes with step easing (steps(1)) for instant character appearance. Character-by-character timing at 30ms intervals. Glitch effect on victory text uses translateX oscillation (-2px to 2px) combined with color shifts between #22c55e and #00ff00. Timing: Each candlestick column animates sequentially with 800ms duration, 200ms gap between columns. Use fitDurationTo: 'children' to auto-calculate total duration. Typography: TextAtom with 'Fira Code:400' font, text-green-500 for bullish, text-red-500 for bearish. Size varies by importance - price labels larger (text-lg) than structural characters (text-xs). Performance: Use CSS containment via containerProps.style: { contain: 'layout paint' }."
},
{
"prompt": "Create a dramatic split-screen typokinetic preset showing candlestick chart evolution. The left half displays raw financial numbers (prices, percentages, timestamps) animating in a scrolling ticker fashion, while the right half shows these numbers transforming into visual candlestick representations in real-time. Use caption words to narrate the market action ('SURGE', 'DIP', 'RECOVERY', 'VICTORY') appearing as overlay text that pulses with the rhythm of price movements. The candlesticks on the right should resize dynamically based on the 'intensity' of the corresponding caption words, creating a visual symphony of market data.",
"technicalSpecs": "Structure: Root BaseLayout with 'flex w-full h-full'. Left panel: BaseLayout with 'w-1/2 overflow-hidden bg-slate-950 flex flex-col' containing scrolling TextAtoms. Right panel: BaseLayout with 'w-1/2 bg-slate-900 flex items-end justify-center gap-3 p-6'. Divider ShapeAtom with 'w-px h-full bg-green-500/50'. Effects: Left ticker uses continuous translateY animation looping infinitely. Right candlesticks use scaleY effects mapped to caption word intensity metadata (impact score). Overlay narration text uses scale and opacity keyframes with ease-out, plus textShadow glow pulsing. Timing: Ticker scrolls continuously (use negative delay for seamless loop). Candlesticks animate with 500ms duration, staggered 150ms. Narration words sync to caption timing data. Sub-presets: Create 'TickerScroll' sub-preset for reusable scrolling text, 'CandlestickBar' sub-preset for individual candles. Performance: Use translateY for ticker (GPU-accelerated), avoid layout-triggering properties."
},
{
"prompt": "Design an audio-reactive candlestick chart typokinetic preset where the height and animation intensity of each candlestick responds to audio beats. Use waveform effects to make candlesticks pulse on bass hits, with the body expanding and contracting rhythmically. Caption words representing price action ('BUY', 'SELL', 'HOLD', 'WIN') should appear at beat timestamps, scaling up with impact. The overall composition should feel like a music visualizer merged with financial data, where victory is expressed through increasingly intense audio-visual synchronization as the chart trends upward.",
"technicalSpecs": "Structure: BaseLayout with 'flex items-end justify-center gap-4 h-full w-full bg-gradient-to-t from-slate-950 via-slate-900 to-slate-950 p-8'. Candlestick BaseLayouts with 'relative flex flex-col items-center'. ShapeAtom for candle bodies, thin ShapeAtoms for wicks. TextAtom for price labels and action words. Effects: Waveform effects on candlestick bodies with property: 'scaleY', audioProperty: 'bass', sensitivity: 1.5, threshold: 0.3. Additional waveform effect on opacity with audioProperty: 'intensity'. Generic keyframe effects for base candlestick heights. Action words use beat-synchronized scale effects (scale: 1 to 1.3 on beats). Audio Analysis: Use fetcher to call audio analysis API for beat detection. Map impactful beats to word reveal timing. Timing: Base animation 300ms per candlestick with audio-reactive overlay. Words appear at detected beat timestamps. Internal Effects: Use 'beat-zoom' internal effect preset for consistent beat response. Performance: Limit waveform effect calculations to 60fps, use requestAnimationFrame batching."
},
{
"prompt": "Create a minimalist Japanese-inspired candlestick chart typokinetic preset with zen-like animations. Candlesticks should draw themselves using stroke animations, appearing as if painted with a calligraphy brush. Caption words in both English and stylized kanji-inspired typography should fade in with brush-stroke reveal effects. The color palette is restrained - deep blacks, whites, with accent red (bearish) and gold (bullish victory). The animation pacing should be deliberately slow and meditative, with each candlestick taking its time to fully form, creating anticipation for the final victorious upward movement.",
"technicalSpecs": "Structure: BaseLayout with 'flex items-end justify-center gap-6 h-full w-full bg-zinc-950 p-12'. Candlesticks use SVG-based ShapeAtoms with stroke-dasharray/stroke-dashoffset for draw-on effect. TextAtom for labels with 'Noto Serif JP:300' font. Effects: Generic keyframe effects animating stroke-dashoffset from 100% to 0% over 1200ms with ease-in-out. Text uses opacity and translateY (from 10px to 0) for gentle fade-up reveal. Victory candlestick gets subtle gold glow via filter: 'drop-shadow(0 0 10px #fbbf24)'. Timing: Slow, deliberate - each candlestick 1.5s duration, 800ms stagger. Text appears 200ms after its candlestick completes. Total composition ~12s. Use relative timing strictly - child timings relative to parent candlestick. Typography: Elegant serif font, text-zinc-100 for primary, text-zinc-500 for secondary. Letter-spacing: 0.1em for breathing room. containerProps.style: { fontFeatureSettings: '"palt"' } for proportional alternates. Performance: SVG stroke animations are GPU-friendly. Avoid filter animations during stroke drawing."
},
{
"prompt": "Build a 3D-perspective candlestick chart typokinetic preset where candlesticks appear to exist in a three-dimensional space, receding into the background. Use CSS perspective and rotateX/rotateY transforms to create depth. Caption words should float at different z-depths, with important price points appearing closer to the viewer. As the chart animates, the camera appears to slowly push forward into the data, with the final victory candlestick emerging prominently in the foreground. Numbers and labels should have subtle parallax movement based on their position in 3D space.",
"technicalSpecs": "Structure: Wrapper BaseLayout with 'perspective-1000 w-full h-full'. Inner BaseLayout with 'preserve-3d flex items-end justify-center gap-4 h-full transform-style-preserve-3d bg-slate-900'. Each candlestick BaseLayout has individual translateZ values via containerProps.style. TextAtom labels positioned at varying z-depths. Effects: Generic keyframe effects for translateZ (parallax depth movement from -200px to 0), combined with scale to maintain perceived size. rotateX subtle tilt (-5deg to 0deg) for camera push effect. Opacity fade-in synchronized with depth emergence. Victory candlestick uses translateZ: 100px to pop forward. Timing: Depth-based stagger - background candlesticks animate first (furthest away), foreground last. 400ms per candlestick, 100ms depth-based stagger. Camera push effect over entire duration. Typography: TextAtom with text-shadow for depth perception, larger font-size for foreground elements. Use 'Inter:600' for clarity at all depths. Layout: containerProps.className includes transform utilities, containerProps.style handles 3D transforms. Performance: Use transform: translateZ(0) to force GPU layers, will-change: transform on animated elements."
},
{
"prompt": "Design a glitch-aesthetic candlestick chart typokinetic preset evoking high-frequency trading and digital market chaos. Candlesticks should appear with RGB split effects, scanlines, and occasional position glitches. Caption words flash rapidly with chromatic aberration, some words appearing corrupted or partially scrambled before resolving. The victory moment is marked by a sudden clarity - glitch effects subside, the winning candlestick renders crisp and clean in brilliant green, while triumphant text like 'PROFIT' or 'VICTORY' stabilizes from chaos into readability.",
"technicalSpecs": "Structure: BaseLayout with 'relative w-full h-full bg-black overflow-hidden'. Scanline overlay ShapeAtom with 'absolute inset-0 pointer-events-none' using repeating-linear-gradient. Candlestick container BaseLayout with 'flex items-end justify-center gap-3 h-full p-8'. Effects: RGB split via layered TextAtoms with slight translateX offsets (-2px, 0, 2px) and color filters (red, green, blue channels). Glitch effect using keyframes with random translateX jumps (ease: steps(1)). Chromatic aberration via filter hue-rotate oscillation. Scanline opacity animation 0.02 to 0.05. Victory state: all glitch effects animate to neutral values (translateX: 0, filter: none). Timing: Glitch animations rapid (50-100ms cycles), victory transition 800ms with ease-out. Use relative timing - glitch effects run continuously until victory timestamp. Typography: 'Space Mono:400' for terminal aesthetic. Text scramble effect by animating between random characters and final text using content-like approach (multiple TextAtoms switching visibility). Performance: Limit RGB split layers to 3 max, use CSS filters sparingly, disable glitch during victory for visual relief."
},
{
"prompt": "Create a particle-explosion candlestick chart typokinetic preset where price data points burst onto screen as particle systems that coalesce into candlestick formations. Each candlestick begins as scattered dots/numbers that gravitationally attract to form the final shape. Caption words similarly explode outward from a center point then contract into readable text at their designated positions. The victory candlestick should have an especially dramatic particle count, with golden sparkles remaining around it after formation, celebrating the upward trend.",
"technicalSpecs": "Structure: BaseLayout with 'relative w-full h-full bg-slate-950'. Particle container BaseLayouts for each candlestick with 'absolute' positioning. Individual TextAtoms for each particle (numbers, dots, symbols). Final candlestick ShapeAtoms fade in as particles converge. Effects: Generic keyframe effects for particle positions - start with random translateX/translateY (spread: -200px to 200px), animate to final position (0,0) with ease-out-back easing for overshoot. Opacity starts at 0.3, ends at 1. Scale from 0.5 to 1. Victory particles get additional glow effect via textShadow animation to '#fbbf24'. Sparkle remnants use infinite opacity oscillation. Timing: Particle explosion 800ms with varied delays per particle (random 0-200ms). Formation hold 500ms. Victory sparkles persist. Use repeatChildrenProps to generate particle arrays with randomized initial positions. Typography: Mix of 'Roboto Mono:300' for numbers, symbol characters for dots. Varying sizes (text-xs to text-sm) for depth. Performance: Limit particles to 30-50 per candlestick. Use transform-only animations. Consider reducing particle count on lower-end devices via input parameter."
},
{
"prompt": "Build a narrative-driven candlestick chart typokinetic preset that tells a stock market victory story through sequential scenes. Scene 1: Market opens with candlesticks rising from darkness, labeled 'DAWN'. Scene 2: Volatility - candlesticks fluctuate wildly with words like 'TURBULENCE', 'DOUBT'. Scene 3: Recovery trend begins, green candlesticks dominate, 'MOMENTUM' appears. Scene 4: Victory climax - final massive green candlestick with 'TRIUMPH' text explosion. Each scene has distinct visual treatment and timing, creating a mini-movie experience within the preset.",
"technicalSpecs": "Structure: Root BaseLayout with type: 'scene' for sequential scene playback. Four child BaseLayout scenes, each with 'w-full h-full' and distinct background gradients. Scene 1: 'bg-gradient-to-t from-slate-950 to-slate-800'. Scene 2: 'bg-gradient-to-r from-red-950 via-slate-900 to-red-950'. Scene 3: 'bg-gradient-to-t from-slate-900 to-green-950'. Scene 4: 'bg-gradient-radial from-green-900 to-slate-950'. Effects: Scene 1 uses opacity fade-in with translateY rise. Scene 2 uses rapid scale oscillations and rotate jitter for turbulence. Scene 3 uses smooth translateX slide-in from right. Scene 4 uses scale explosion from center with textShadow glow burst. Timing: Use fitDurationTo: 'scenes' on root. Scene durations - 3s, 4s, 4s, 3s respectively. Transitions between scenes use 500ms crossfade. Word timing from caption data distributed across scenes based on sentence breaks. Sub-presets: Create 'CandlestickCluster' sub-preset reused in each scene with different configurations. Typography: Scene-specific fonts - Scene 1: 'Playfair Display:400', Scene 4: 'Bebas Neue:400' for impact. Performance: Preload all scenes, use opacity transitions for scene changes to avoid layout recalculation."
},
{
"prompt": "Create an ELASTIC BOUNCE SCALE POP-UP transition preset for YouTube images. The incoming image should enter with a dramatic spring-loaded scale animation that starts at 0% scale, overshoots to 115%, bounces back to 95%, then settles at 100%. Use a custom cubic-bezier easing curve (0.68, -0.55, 0.265, 1.55) to achieve the elastic overshoot effect. The outgoing image should scale down with a subtle bounce in reverse (100% → 85% → 0%). During the overlap period, both images should be visible with the incoming image layered above. The transition should feel energetic and playful, perfect for YouTube thumbnail reveals. Apply a slight rotation wobble (±3 degrees) synchronized with the scale bounces to enhance the springy dynamics.",
"technicalSpecs": "BaseLayout container with 'absolute inset-0' className, fitDurationTo: 'scenes'. Overlap duration: 0.6 seconds. Outgoing ImageAtom: startOffset 0, duration = mediaDuration, z-10 positioning. Incoming ImageAtom: startOffset = outgoingDuration - 0.6s, duration = mediaDuration, z-20 positioning. Outgoing effects: scale AnimationRange [[0, 1, {x: 1, y: 1}], [0.3, 1, {x: 0.85, y: 0.85}], [1, 1, {x: 0, y: 0}]], opacity [[0, 1, 1], [1, 1, 0]]. Incoming effects: scale [[0, 1, {x: 0, y: 0}], [0.4, 1, {x: 1.15, y: 1.15}], [0.7, 1, {x: 0.95, y: 0.95}], [1, 1, {x: 1, y: 1}]], rotate [[0, 1, -3], [0.4, 1, 3], [0.7, 1, -1], [1, 1, 0]]. Provider mode with targetIds for each atom."
},
{
"prompt": "Build a WOBBLY SPRING EMERGENCE transition for YouTube images with physics-inspired motion. The incoming image should appear from the center with a rubber-band stretch effect - starting compressed vertically (scaleY: 0.3, scaleX: 1.2), then snapping to overshoot (scaleY: 1.2, scaleX: 0.9), and oscillating 2-3 times before settling. The outgoing image should squash down (scaleY: 0.2) while stretching horizontally (scaleX: 1.4) before disappearing. This creates an organic, cartoon-like squash-and-stretch animation reminiscent of classic animation principles. Add a subtle blur (2px → 0px) on the incoming image during the initial expansion to enhance the sense of speed and energy.",
"technicalSpecs": "Single BaseLayout with duration = media1.duration + media2.duration - 0.8s overlap. Container className: 'absolute inset-0 overflow-hidden'. ImageAtom 1 (outgoing): objectFit 'cover', className 'absolute inset-0', timing relative to container. ImageAtom 2 (incoming): objectFit 'cover', className 'absolute inset-0', startOffset relative. Outgoing generic effects: scale [[0, 1, {x: 1, y: 1}], [0.5, 1, {x: 1.4, y: 0.5}], [1, 1, {x: 1.6, y: 0.2}]], opacity [[0, 1, 1], [0.8, 1, 0.5], [1, 1, 0]]. Incoming effects: scale [[0, 1, {x: 1.2, y: 0.3}], [0.25, 1, {x: 0.9, y: 1.2}], [0.5, 1, {x: 1.05, y: 0.95}], [0.75, 1, {x: 0.98, y: 1.02}], [1, 1, {x: 1, y: 1}]], blur [[0, 1, 4], [0.3, 1, 0]]. Use provider mode with separate targetIds."
},
{
"prompt": "Design an OVERSHOOT ZOOM BURST transition for YouTube images with explosive energy. The incoming image should scale from 200% (zoomed in, cropped) down to 80% (overshoot past normal), then spring back to 100%. This creates a 'burst onto screen' effect where the image appears to explode into view and settle. The outgoing image simultaneously scales up to 150% while fading out, creating a sense of the old content being pushed away by the incoming energy. Add a radial motion blur effect during peak transition to enhance the explosive feel. The timing should be punchy - short overlap (0.4s) for maximum impact.",
"technicalSpecs": "BaseLayout duration calculation: media1.duration + media2.duration - 0.4s. Short, punchy overlap. Outgoing ImageAtom: scale [[0, 1, {x: 1, y: 1}], [1, 1, {x: 1.5, y: 1.5}]], opacity [[0, 1, 1], [0.6, 1, 0.3], [1, 1, 0]], className 'absolute inset-0 z-10'. Incoming ImageAtom: scale [[0, 1, {x: 2, y: 2}], [0.5, 1, {x: 0.8, y: 0.8}], [0.8, 1, {x: 1.05, y: 1.05}], [1, 1, {x: 1, y: 1}]], opacity [[0, 1, 0], [0.1, 1, 1]], blur [[0, 1, 8], [0.4, 1, 0]], className 'absolute inset-0 z-20'. Provider effects with cubic-bezier timing simulation through keyframe density."
},
{
"prompt": "Create a SPRINGY SLIDE-AND-BOUNCE transition where the incoming YouTube image slides in from the right with elastic overshoot. The image should slide past its final position by 10% of the viewport width, then bounce back with decreasing oscillations (overshoot left 5%, right 2%, settle). Combine this horizontal spring motion with a subtle scale pulse (1.0 → 1.05 → 1.0) synchronized with each bounce. The outgoing image slides left with a matching elastic exit - accelerating off-screen with a slight trailing stretch effect. This creates a playful, dynamic handoff between images.",
"technicalSpecs": "BaseLayout with 'absolute inset-0' container, 0.7s overlap duration. Outgoing ImageAtom effects: translateX [[0, 1, 0], [0.3, 1, -5], [1, 1, -110]] (percentage-based), scaleX [[0, 1, 1], [0.5, 1, 1.1], [1, 1, 0.9]], opacity [[0, 1, 1], [0.7, 1, 0.5], [1, 1, 0]]. Incoming ImageAtom effects: translateX [[0, 1, 110], [0.4, 1, -10], [0.6, 1, 5], [0.8, 1, -2], [1, 1, 0]], scale [[0, 1, {x: 1, y: 1}], [0.4, 1, {x: 1.05, y: 1.05}], [0.6, 1, {x: 0.98, y: 0.98}], [0.8, 1, {x: 1.02, y: 1.02}], [1, 1, {x: 1, y: 1}]], opacity [[0, 1, 1]]. Both atoms use objectFit 'cover' for YouTube aspect ratio."
},
{
"prompt": "Build a VERTICAL SPRING DROP transition for YouTube images. The incoming image drops from above with gravity-inspired bounce physics - falling quickly, hitting the 'ground' (final position), bouncing up 15%, falling again, bouncing 5%, and settling. The outgoing image should sink downward while compressing vertically (squash effect) as if being pushed down by the incoming image's weight. Add a subtle shadow or darkening effect during the bounce moments to enhance depth perception. This creates a satisfying, weighty transition that feels physically grounded.",
"technicalSpecs": "BaseLayout container with overflow-hidden to clip during animation. Overlap duration: 0.8s for full bounce sequence. Outgoing ImageAtom: translateY [[0, 1, 0], [0.4, 1, 20], [1, 1, 100]], scaleY [[0, 1, 1], [0.3, 1, 0.9], [0.6, 1, 0.7], [1, 1, 0.5]], opacity [[0, 1, 1], [0.6, 1, 0.5], [1, 1, 0]], brightness [[0, 1, 1], [0.5, 1, 0.7], [1, 1, 0.5]]. Incoming ImageAtom: translateY [[0, 1, -100], [0.35, 1, 0], [0.5, 1, -15], [0.65, 1, 0], [0.8, 1, -5], [1, 1, 0]], scaleY [[0, 1, 1], [0.35, 1, 0.9], [0.4, 1, 1.05], [0.65, 1, 0.98], [1, 1, 1]]. Z-index: incoming at z-20, outgoing at z-10."
},
{
"prompt": "Design a DUAL ELASTIC SCALE transition where both outgoing and incoming YouTube images animate with synchronized spring dynamics. The outgoing image scales down with elastic easing (100% → 0%) while rotating slightly (-5 degrees). Simultaneously, the incoming image scales up from 0% with matching elastic overshoot (0% → 115% → 95% → 100%) while rotating in the opposite direction (+5 degrees). The rotation creates a subtle 'swap' visual effect. During the crossover point (around 50% of transition), both images should be at similar scales creating a brief visual overlap. Add a subtle desaturation on the outgoing image to visually signal it's 'old' content.",
"technicalSpecs": "BaseLayout duration = sum of media durations - 0.6s overlap. Both ImageAtoms positioned absolute inset-0. Outgoing effects: scale [[0, 1, {x: 1, y: 1}], [0.3, 1, {x: 0.8, y: 0.8}], [0.6, 1, {x: 0.4, y: 0.4}], [1, 1, {x: 0, y: 0}]], rotate [[0, 1, 0], [1, 1, -5]], opacity [[0, 1, 1], [0.8, 1, 0.5], [1, 1, 0]], saturate [[0, 1, 1], [0.5, 1, 0.5], [1, 1, 0]]. Incoming effects: scale [[0, 1, {x: 0, y: 0}], [0.4, 1, {x: 1.15, y: 1.15}], [0.7, 1, {x: 0.95, y: 0.95}], [1, 1, {x: 1, y: 1}]], rotate [[0, 1, 5], [1, 1, 0]], opacity [[0, 1, 0], [0.2, 1, 1]]. Provider mode targeting both atoms."
},
{
"prompt": "Create a CORNER SPRING POP transition for YouTube images. The incoming image emerges from the bottom-right corner with elastic expansion - starting as a small point (scale 0, positioned at bottom-right via transform origin), then springing open with overshoot to fill the frame. The expansion should have 2-3 bounce oscillations. The outgoing image simultaneously collapses toward the top-left corner with reverse spring dynamics. This diagonal transition creates visual interest and directional flow. Add a slight rotation (±8 degrees) during the spring motion to enhance the dynamic, wobbly feel.",
"technicalSpecs": "BaseLayout with 'absolute inset-0' container. Both ImageAtoms use objectFit 'cover'. Outgoing ImageAtom: transformOrigin 'top left' via style prop, scale [[0, 1, {x: 1, y: 1}], [0.4, 1, {x: 0.6, y: 0.6}], [0.7, 1, {x: 0.2, y: 0.2}], [1, 1, {x: 0, y: 0}]], rotate [[0, 1, 0], [0.5, 1, -8], [1, 1, -15]], opacity [[0, 1, 1], [0.7, 1, 0.3], [1, 1, 0]]. Incoming ImageAtom: transformOrigin 'bottom right' via style prop, scale [[0, 1, {x: 0, y: 0}], [0.3, 1, {x: 1.2, y: 1.2}], [0.5, 1, {x: 0.9, y: 0.9}], [0.7, 1, {x: 1.08, y: 1.08}], [1, 1, {x: 1, y: 1}]], rotate [[0, 1, 15], [0.3, 1, -5], [0.5, 1, 3], [1, 1, 0]]. Overlap: 0.7s."
},
{
"prompt": "Build a SHAKE AND SPRING transition with dynamic energy for YouTube images. As the transition begins, both images experience a brief shake effect (rapid small translations ±5px) creating tension. Then the outgoing image is 'ejected' with a spring motion (scaling down while moving off-screen left with overshoot). The incoming image springs in from the right with elastic bounce, as if propelled by the shake energy. The shake phase should be short (0.2s) followed by the spring transition (0.5s). This creates an energetic, action-packed transition feel.",
"technicalSpecs": "BaseLayout with 0.7s total overlap (0.2s shake + 0.5s spring). Shared shake effect on both atoms during first 0.2s of overlap: translateX [[0, 0.28, 0], [0.05, 0.28, 5], [0.1, 0.28, -5], [0.15, 0.28, 3], [0.2, 0.28, -3], [0.28, 0.28, 0]]. Outgoing ImageAtom additional effects: translateX [[0.28, 1, 0], [0.5, 1, -20], [1, 1, -120]], scale [[0.28, 1, {x: 1, y: 1}], [0.6, 1, {x: 0.8, y: 0.8}], [1, 1, {x: 0.6, y: 0.6}]], opacity [[0.28, 1, 1], [1, 1, 0]]. Incoming ImageAtom effects: translateX [[0, 0.28, 120], [0.28, 0.28, 120], [0.5, 1, -12], [0.7, 1, 6], [0.85, 1, -2], [1, 1, 0]], opacity [[0, 1, 0], [0.28, 1, 1]]. Use provider mode for shake synchronization."
},
{
"prompt": "Design a RIPPLE SPRING SCALE transition for YouTube images. The incoming image scales in with a ripple-like effect - multiple quick scale pulses (0% → 80% → 60% → 100% → 90% → 100%) creating a rippling, elastic feel. Each pulse should have decreasing amplitude like a dampened spring. The outgoing image fades with a subtle pulse in the opposite rhythm, creating visual harmony. Add a slight blur pulse synchronized with each scale bounce (blur increases at compression, clears at expansion). This creates an organic, water-ripple inspired elastic transition.",
"technicalSpecs": "BaseLayout overlap duration: 0.9s for extended ripple effect. Outgoing ImageAtom: opacity [[0, 1, 1], [0.3, 1, 0.7], [0.5, 1, 0.4], [1, 1, 0]], scale [[0, 1, {x: 1, y: 1}], [0.3, 1, {x: 1.05, y: 1.05}], [0.5, 1, {x: 0.95, y: 0.95}], [0.7, 1, {x: 1.02, y: 1.02}], [1, 1, {x: 0.9, y: 0.9}]]. Incoming ImageAtom: scale [[0, 1, {x: 0, y: 0}], [0.15, 1, {x: 0.8, y: 0.8}], [0.25, 1, {x: 0.6, y: 0.6}], [0.4, 1, {x: 1.1, y: 1.1}], [0.55, 1, {x: 0.92, y: 0.92}], [0.7, 1, {x: 1.04, y: 1.04}], [0.85, 1, {x: 0.98, y: 0.98}], [1, 1, {x: 1, y: 1}]], blur [[0, 1, 6], [0.25, 1, 3], [0.4, 1, 0], [0.55, 1, 1], [0.7, 1, 0]], opacity [[0, 1, 0], [0.1, 1, 1]]. Z-layering with incoming above."
},
{
"prompt": "Create an ELASTIC FLIP-SCALE transition for YouTube images combining rotation with spring scale. The outgoing image rotates on the Y-axis (0° → 90°) while scaling down with spring dynamics, appearing to flip away. At the 90° point (edge-on, invisible), the incoming image takes over, rotating from -90° → 0° with elastic overshoot scale (scaling from 0.8 → 1.1 → 0.95 → 1.0). The flip creates a card-turn effect while the spring scale adds bouncy energy. Add perspective to the container for 3D depth. This combines the elegance of a flip transition with playful spring physics.",
"technicalSpecs": "BaseLayout containerProps: style with perspective '1000px' for 3D effect. Overlap: 0.6s. Outgoing ImageAtom: rotateY [[0, 1, 0], [1, 1, 90]], scale [[0, 1, {x: 1, y: 1}], [0.3, 1, {x: 1.05, y: 1.05}], [0.7, 1, {x: 0.85, y: 0.85}], [1, 1, {x: 0.7, y: 0.7}]], opacity [[0, 1, 1], [0.9, 1, 1], [1, 1, 0]], className 'absolute inset-0 z-10'. Incoming ImageAtom: rotateY [[0, 1, -90], [0.5, 1, 10], [0.75, 1, -5], [1, 1, 0]], scale [[0, 1, {x: 0.8, y: 0.8}], [0.5, 1, {x: 1.1, y: 1.1}], [0.75, 1, {x: 0.95, y: 0.95}], [1, 1, {x: 1, y: 1}]], opacity [[0, 1, 0], [0.1, 1, 1]], className 'absolute inset-0 z-20'. Both atoms need backfaceVisibility 'hidden' style."
},
{
"prompt": "Create a typokinetic circular progress ring preset that fills clockwise with a growing stroke width while a centered percentage counter animates upward. The composition should feel like a kinetic infographic reveal: the SVG ring starts at 12 o'clock with zero stroke-dashoffset, then animates the dashoffset to reveal the arc progressively. Simultaneously, the stroke-width property scales from 4px to 12px using a smooth ease-out curve, creating a 'breathing' expansion effect. The percentage TextAtom in the center uses a counting animation driven by generic keyframe effects on the text content, with each digit having subtle scale-up microanimations (1.05x on change, then settle to 1.0x). Use a BaseLayout with 'flex items-center justify-center w-full h-full' for centering. The ring itself should be an SVG element within a ShapeAtom or custom HTML, with the percentage TextAtom absolutely positioned at center. Add a soft glow effect that intensifies as progress increases using blur and opacity keyframes. The timeline should unfold over 3-4 seconds with the ring fill leading slightly ahead of the number count for visual anticipation.",
"technicalSpecs": "Structure: BaseLayout container with 'relative flex items-center justify-center w-full h-full bg-gradient-to-br from-slate-900 to-slate-800'. Inner SVG circle using stroke-dasharray and stroke-dashoffset for arc animation. TextAtom centered with 'absolute inset-0 flex items-center justify-center'. Effects: Generic keyframe effects for stroke-dashoffset (0% to calculated fill), stroke-width scaling (4 to 12), and text opacity/scale. Use CSS custom properties for dynamic stroke values. Timing: Ring fill 0-80% of duration with ease-out, stroke-width 0-100% with ease-in-out, percentage count 10-90% with linear for smooth counting. GPU optimization via transform and opacity animations. Consider using containerProps.style for SVG viewBox dimensions. TextAtom font: 'Inter:700' at 48-72px with tabular-nums for stable digit width."
},
{
"prompt": "Design an audio-reactive circular progress visualization where the ring fill responds to beat intensity while maintaining a base clockwise progression. This creates a 'breathing' progress indicator that pulses with the music. The core mechanic: a baseline progress animation fills the ring over the preset duration, but waveform effects add intensity-driven stroke-width oscillation (expanding on bass hits, contracting between beats). The percentage number in the center uses a counting TextAtom with a subtle shake effect on beat impacts. Implement using nested BaseLayouts: outer container for positioning, inner for the SVG ring, and a centered text layer. The ring should have a gradient stroke (achievable via SVG linearGradient) that shifts hue slightly based on audio frequency. Use AUDIO_DATA.md patterns to fetch beat analysis and apply waveform effects with sensitivity tuned to bass frequencies.",
"technicalSpecs": "Structure: BaseLayout 'relative w-64 h-64 flex items-center justify-center'. SVG element with defs containing linearGradient for stroke. Circle element with stroke-dasharray animation. TextAtom with 'absolute text-6xl font-bold tabular-nums'. Effects: Base progress uses generic keyframe effect on stroke-dashoffset (100% to 0% over duration). Waveform effect targeting stroke-width with audioProperty: 'bass', sensitivity: 0.8, baseValue: 8, maxValue: 16. Secondary waveform effect on TextAtom scale with audioProperty: 'intensity', sensitivity: 0.3. Audio analysis: Use fetcher to get beat data, apply subtle translateY shake on high-intensity beats. Timing: Base fill linear over full duration, waveform effects continuous. Easing: ease-out for base progress, spring for beat reactions. Performance: Use will-change on animated properties, keep waveform calculations efficient."
},
{
"prompt": "Create a minimalist Swiss-design inspired progress ring with precise typography. The aesthetic should be clean, geometric, and mathematically precise—think Müller-Brockmann meets data visualization. The ring fills with a consistent 2px stroke that doesn't grow, emphasizing precision over expressiveness. The percentage number uses a monospace font with letter-spacing animation that tightens as the value increases (suggesting compression/density of progress). Include subtle grid lines in the background (using ShapeAtom or CSS) that fade in at 25%, 50%, 75% markers. The ring should have tick marks at cardinal points (0, 25, 50, 75, 100) that illuminate sequentially as progress passes them. All animations use linear easing for mechanical precision. The composition uses a strict grid layout with mathematical proportions.",
"technicalSpecs": "Structure: BaseLayout with 'relative w-80 h-80 grid place-items-center bg-white'. Background grid using CSS grid or ShapeAtom lines with 'opacity-10'. SVG ring with viewBox='0 0 100 100', circle at center with r='45', stroke-width='2'. Tick marks as small line elements that change opacity. TextAtom with font 'JetBrains Mono:500' or 'IBM Plex Mono:600', positioned center. Effects: Generic keyframe for stroke-dashoffset (linear, full duration). Letter-spacing effect on TextAtom from '0.1em' to '-0.02em' (ease-in-out). Tick mark opacity effects triggered at 25% intervals (0->1 over 200ms). Grid line opacity from 0.05 to 0.15 as progress increases. Timing: All synchronized to main progress, tick reveals at exactly 25/50/75/100% progress points. Use relative timing so tick animations are children with offset delays. Colors: monochromatic—black stroke on white, or inverse."
},
{
"prompt": "Build a cinematic progress ring with dramatic lighting and depth effects, as if it's a 3D holographic display being projected. The ring should appear to have thickness using layered SVG circles with slight offsets and varying opacities (creating a faux-3D extrusion effect). As the ring fills clockwise, add a 'light sweep' effect—a bright highlight that travels along the filling arc edge using a radial gradient mask. The stroke width grows from thin to thick (3px to 10px) with an ease-in curve, accelerating the growth toward completion for dramatic emphasis. The percentage number has a text-shadow glow that pulses subtly using opacity keyframes. Include a subtle particle/sparkle effect at the leading edge of the progress (can be simulated with small ShapeAtoms or CSS pseudo-elements). Background should be dark with a vignette effect.",
"technicalSpecs": "Structure: BaseLayout 'relative w-96 h-96 flex items-center justify-center bg-black'. Multiple layered SVG circles: back layer (low opacity, slight scale up for depth), main layer (full opacity, animated), highlight layer (gradient stroke for light sweep). TextAtom centered with 'text-7xl font-black text-white' and textShadow effect. Effects: Primary stroke-dashoffset keyframe (ease-out, 0-85% duration). Stroke-width keyframe from 3 to 10 (ease-in, creates acceleration feel). Glow pulse on text using textShadow property in generic effect (oscillate between '0 0 20px cyan' and '0 0 40px cyan'). Light sweep achieved via animated gradient position or mask. Optional: Small ShapeAtom circles at arc tip with fade-out trail. Timing: Ring fill primary animation, glow pulse secondary at 0.5s intervals. Vignette via radial-gradient on container background. Performance: Layer separation for GPU compositing."
},
{
"prompt": "Design a word-by-word typography preset where the percentage number is spelled out as words ('TWENTY-FIVE PERCENT') that animate in sequentially as the ring fills. This creates a unique typokinetic experience where visual progress is reinforced by textual revelation. The ring fills in segments corresponding to word reveals—each word appearance triggers a small burst of ring progress. Use caption-like word timing where each word has an entrance animation (fade-up + scale from 0.8 to 1.0). The ring uses a dashed stroke pattern that becomes solid as it fills (stroke-dasharray transitions). Words stack vertically in the center with the current percentage word highlighted (brighter, larger) while previous words dim. This creates a scrolling ticker effect synchronized with circular progress.",
"technicalSpecs": "Structure: BaseLayout 'relative w-full h-full flex items-center justify-center'. SVG ring container as one layer. Text container with 'absolute inset-0 flex flex-col items-center justify-center gap-1 overflow-hidden'. Multiple TextAtoms for each word, managed via word-level timing patterns from TYPOGRAPHY.md. Effects: Ring stroke-dashoffset in segments (not smooth—steps corresponding to word count). Each word TextAtom has entrance effect: opacity 0->1, translateY 20->0, scale 0.8->1.0 (ease-out, 300ms). Previous words get dimming effect: opacity 1->0.5, scale 1->0.9. Current word has glow textShadow. Timing: Calculate word reveal intervals based on total duration / word count. Ring progress jumps at each interval. Use relative timing with sequential delays. Font: 'Oswald:700' or 'Bebas Neue:400' uppercase for impact. Consider fitDurationTo to match overall timing."
},
{
"prompt": "Create a data-driven progress ring that displays alongside contextual statistics, mimicking a dashboard analytics widget. The ring fills while secondary data points animate in around it—small TextAtoms showing related metrics (e.g., 'Speed: 2.4x', 'ETA: 00:42', 'Status: Active') that fade in at staggered intervals. The main percentage uses a large, bold display with a counting animation. The ring has a track (unfilled portion visible as a lighter stroke) and a fill (darker/colored stroke on top). Add subtle pulsing dots at the end of the progress arc that indicate 'live' status. The overall composition uses a card-like container with rounded corners and subtle shadow, suitable for embedding in larger video compositions.",
"technicalSpecs": "Structure: BaseLayout 'relative w-80 bg-slate-900 rounded-2xl p-6 shadow-2xl'. Inner flex container for ring and stats. SVG with two circles: track (stroke-opacity: 0.2) and fill (animated). Stats TextAtoms positioned using 'absolute' or flex layout around ring. Main percentage TextAtom 'text-5xl font-bold tabular-nums text-white'. Effects: Ring fill via stroke-dashoffset (ease-out, 70% duration). Percentage count using generic effect or calculated display. Stat labels staggered fade-in: opacity 0->1, translateX -10->0 (ease-out, 400ms each, 200ms stagger). Pulse dot at arc end: ShapeAtom circle with looping opacity 0.5->1->0.5 (continuous, 1s period). Timing: Ring starts immediately, stats fade in from 20-60% of duration, pulse starts at 50%. Container uses containerProps.className for card styling. Consider childrenProps for consistent stat styling."
},
{
"prompt": "Build a retro-futuristic progress ring inspired by 80s sci-fi interfaces (think TRON, Blade Runner). The ring should have a neon glow effect with scan lines overlay. Use multiple concentric rings at different sizes that fill at slightly different rates, creating depth and complexity. The percentage display uses a pixelated or LCD-style font with a flickering effect (subtle opacity variations). Add horizontal scan lines across the entire composition using a repeating linear gradient. The color palette should be cyan/magenta/electric blue. Include 'data corruption' glitch effects that occasionally shift the ring or text position briefly. The stroke should appear to 'build' segment by segment rather than smooth fill.",
"technicalSpecs": "Structure: BaseLayout 'relative w-96 h-96 flex items-center justify-center bg-black overflow-hidden'. Scan line overlay using pseudo-element or ShapeAtom with 'repeating-linear-gradient(transparent, transparent 2px, rgba(0,0,0,0.3) 2px, rgba(0,0,0,0.3) 4px)'. Multiple SVG rings at different radii (r=40, r=35, r=30). TextAtom with font 'VT323:400' or 'Press Start 2P:400'. Effects: Each ring has stroke-dashoffset animation with slight timing offsets (outer leads, inner follows). Neon glow via filter: drop-shadow(0 0 10px cyan). Flicker effect on text: opacity oscillates 0.9->1.0->0.95 randomly. Glitch effect: occasional translateX jumps (-3px to 3px) lasting 50-100ms. Segment fill via stroke-dasharray pattern that changes. Timing: Primary ring 0-80%, secondary 5-85%, tertiary 10-90%. Glitches at random intervals using multiple short keyframe ranges. Color: stroke='#00FFFF', textShadow='0 0 20px #00FFFF'."
},
{
"prompt": "Design an organic, fluid progress ring that feels alive and breathing rather than mechanical. The ring stroke should undulate in width along its length (thicker and thinner sections) using an animated stroke pattern. The fill animation should have a slight overshoot and settle (spring easing). The percentage number morphs between values with a liquid/blob transition effect. Add subtle background particles or bubbles that float upward, creating an underwater or cellular aesthetic. The color should shift through a gradient as progress increases (cool blue at 0% to warm orange at 100%). The overall feel should be biomorphic and soothing, suitable for wellness or meditation content.",
"technicalSpecs": "Structure: BaseLayout 'relative w-80 h-80 flex items-center justify-center bg-gradient-to-b from-slate-800 to-slate-900'. Particle layer with multiple small ShapeAtom circles using repeatChildrenProps for particle spawning. SVG ring with variable stroke-width achieved via stroke-dasharray pattern or SVG path with varying widths. TextAtom 'text-6xl font-light' with smooth number transitions. Effects: Ring fill with spring easing (overshoot: 1.1, settle to 1.0). Color transition via generic effect on stroke color from '#60A5FA' to '#F97316'. Particle float: translateY from 100% to -100%, opacity fade in/out, duration 3-5s each, staggered starts. Number morph: scale 1->1.1->1 on value change with blur 0->2->0 for liquid feel. Breathing effect: continuous subtle scale oscillation on ring (0.98-1.02, 2s period). Timing: Primary fill 0-75% with spring, color shift throughout, particles continuous loop. Use ease-in-out for organic feel."
},
{
"prompt": "Create a competitive/gaming-style progress ring with aggressive aesthetics—sharp angles, high contrast, and dynamic motion. Instead of a smooth circle, use a segmented ring made of individual arc segments with gaps between them, each segment lighting up sequentially. The percentage display should have a 'score counter' feel with rapid digit spinning before settling on the final value. Add motion blur streaks behind the filling segments. Include corner accent graphics (angular brackets or chevrons) that pulse on milestone hits (25%, 50%, 75%, 100%). The color scheme should be high-energy: electric green, hot pink, or gold on dark background. Sound design consideration: design animations to sync well with impact sounds.",
"technicalSpecs": "Structure: BaseLayout 'relative w-96 h-96 flex items-center justify-center bg-zinc-950'. Segmented ring using multiple SVG arc paths (12-16 segments) instead of single circle. Corner accents using ShapeAtom or positioned divs with 'absolute' in corners. TextAtom 'text-7xl font-black tracking-tight' with tabular-nums. Effects: Each segment has individual opacity animation (0->1) with 50ms stagger. Motion blur via filter: blur(4px) on newly-lit segments, transitioning to blur(0). Digit spin: rapid translateY cycling through numbers before settling (ease-out). Corner pulse at milestones: scale 1->1.3->1, opacity boost, duration 300ms. Glow on active segments: filter drop-shadow. Timing: Segments light sequentially over 70% duration, digit spin in final 30%, corner pulses at exact milestone frames. Use relative timing for segment delays. Easing: ease-out for segment reveals, bounce for corner accents. Consider beat sync if audio present."
},
{
"prompt": "Build an elegant, luxury-brand style progress ring with refined animations and premium feel. The ring should be thin and precise (2-3px stroke), with a subtle gradient from platinum to gold. The fill animation should be smooth and unhurried, using a custom cubic-bezier for sophisticated easing. The percentage typography should use an elegant serif or refined sans-serif with generous letter-spacing and subtle tracking animation. Add a delicate shimmer effect that travels along the ring (a moving highlight). The background should feature a subtle texture or noise overlay. Include a thin secondary ring inside that fills at a slightly delayed rate, creating depth. All animations should feel effortless and refined—no sudden movements or harsh transitions.",
"technicalSpecs": "Structure: BaseLayout 'relative w-72 h-72 flex items-center justify-center' with subtle radial gradient background. Noise texture overlay via CSS filter or SVG feTurbulence at low opacity (0.03-0.05). Dual SVG rings: outer primary (r=45, stroke-width=2), inner secondary (r=38, stroke-width=1.5). TextAtom with font 'Playfair Display:500' or 'Cormorant:600' for elegance, 'text-5xl tracking-widest'. Effects: Primary ring stroke-dashoffset with custom easing cubic-bezier(0.4, 0, 0.2, 1) over 4s. Secondary ring same animation with 500ms delay. Shimmer via animated gradient mask or moving highlight (SVG animate or CSS). Letter-spacing animation from '0.2em' to '0.15em' (subtle tightening). Opacity of entire composition: 0->1 over first 500ms (soft entrance). Timing: Long duration (4-5s) for luxury pacing. No bounce or spring—all smooth curves. Colors: stroke gradient from '#E5E4E2' to '#D4AF37' (platinum to gold). Performance: Use GPU-accelerated transforms, avoid layout thrashing."
}
]