loopwind

A CLI tool for generating images and videos from JSX templates using Tailwind CSS and Satori. Templates live in a .loopwind/ directory alongside your codebase.

Quick Start

Loopwind is a CLI tool for generating images and videos with React and Tailwind CSS. It's designed to be used with AI Agents and Cursor.

Installation

CODEBLOCK0

This installs loopwind to ~/.loopwind/ and adds the loopwind command to your PATH. Requires Node.js 18+.

Initialize in Your Project

Navigate to any project folder and run:

CODEBLOCK1

This creates .loopwind/loopwind.json — a configuration file with your project's theme colors.

Install AI Skill

Give your AI agent expertise in loopwind:

CODEBLOCK2

This installs a skill that teaches Claude Code (or other AI agents) how to create templates, use animation classes, and render images/videos.

Use with Claude Code

With the loopwind skill installed, Claude has deep knowledge of template structure, animation classes, and Tailwind CSS patterns for Satori. Just ask:

CODEBLOCK3

CODEBLOCK4

Claude will create optimized templates and render the final output automatically.

Install a Template

1. Official Templates

CODEBLOCK5

Templates are installed to: INLINECODE4

Benefits:

• - Templates are local to your project
• Version controlled with your project
• Easy to share within your team

Render a Template

CODEBLOCK6
or use a local props file:

CODEBLOCK7

Commands

loopwind add <source>

Install a template from various sources:

CODEBLOCK8
These will be downloaded to INLINECODE6

loopwind list

List all installed templates:

CODEBLOCK9

loopwind render <template> <props> [options]

Render an image or video:

CODEBLOCK10

Options:

• - --out, -o - Output filename (default: <template>.<ext> in current directory)
• INLINECODE11 - Output format: png, jpeg, svg (images only)
• INLINECODE15 - JPEG quality 1-100 (default: 92)

loopwind validate <template>

Validate a template:

CODEBLOCK11

Checks:

• - Template file exists and is valid React
• INLINECODE17 exists and is valid
• Required props are defined
• Fonts exist (if specified)

loopwind init

Initialize loopwind in a project:

CODEBLOCK12

Creates .loopwind/loopwind.json configuration file with your project's design tokens.

Animation Classes (Video Only)

Use Tailwind-style animation classes - no manual calculations needed:

CODEBLOCK13

See Animation for the complete reference.

Next Steps

• - Templates
• Embedding Images
• Animation
• Helpers (QR, Template Composition)
• Styling with Tailwind & shadcn/ui
• Custom Fonts
• AI Agent Integration

Templates

Templates are React components that define your images and videos. They use Tailwind CSS for styling and export metadata that loopwind uses for rendering.

Installing Templates

Official Templates

CODEBLOCK14

Templates are installed to .loopwind/<template-name>/.

Direct URLs

CODEBLOCK15

Local Filesystem

CODEBLOCK16

---

Image Templates

Basic Structure

CODEBLOCK17

Rendering Images

CODEBLOCK18

Output Formats

Format	Best For
PNG (default)	Transparency, sharp text, logos
JPEG

Photographs, gradients, smaller files | | SVG | Vector graphics, scalable designs |

---

Video Templates

Basic Structure

CODEBLOCK19

Rendering Videos

CODEBLOCK20

FPS and Duration

CODEBLOCK21

FPS	Use Case
24	Cinematic look, smaller files
30

Standard web video |
| 60 | Smooth animations |

Video-Specific Props

Templates receive these additional props:

• - frame - Current frame number (0 to totalFrames - 1)
• progress - Animation progress from 0 to 1

CODEBLOCK22

Encoding Options

Encoder	Command	Use Case
WASM (default)	INLINECODE23	CI/CD, no dependencies
FFmpeg

loopwind render ... --ffmpeg | Faster, smaller files |

Install FFmpeg: brew install ffmpeg (macOS)

---

Animation Classes

Use Tailwind-style animation classes for videos:

CODEBLOCK23

See the full Animation documentation for all classes.

---

Common Sizes

Social Media

• - Twitter/X Card: 1200x675
• Facebook/OG: 1200x630
• Instagram Post: 1080x1080
• LinkedIn Post: 1200x627

Web Graphics

• - Hero Banner: 1920x1080
• Blog Header: 1600x900
• Thumbnail: 640x360

---

Example Templates

Open Graph Image

CODEBLOCK24

Animated Intro

CODEBLOCK25

---

Next Steps

• - Layouts - Wrap templates with reusable layouts
• Embedding Images - Using the image() helper
• Animation - Full animation reference
• Styling - Tailwind & shadcn/ui integration
• Fonts - Custom fonts

Layouts

Layouts let you wrap templates with consistent headers, footers, and styling. A child template specifies a layout in its meta, and the layout receives the child content as a children prop.

Basic Usage

Layout Template

Create a layout template that receives children:

CODEBLOCK26

Usage in Templates

Reference the layout using a relative path:

CODEBLOCK27

Render

CODEBLOCK28

The output uses the layout's size (1200x630) with the child content inside.

---

Key Concepts

Size

When using a layout, the layout's size controls the final output dimensions. The child template doesn't need a size property.

Path Resolution

Use relative paths to reference layouts:

CODEBLOCK29

Props Flow

The layout receives:

• - All standard helpers (tw, image, qr, template, etc.)
• INLINECODE34 prop containing the rendered child content
• Animation context (frame, progress) for video layouts

CODEBLOCK30

---

Video Layouts

Layouts work with video templates. Both the layout and child can use animations:

CODEBLOCK31

---

Example: Consistent OG Images

Create a layout for all your OG images:

CODEBLOCK32

Then create page-specific templates:

CODEBLOCK33

---

Next Steps

• - Templates - Template structure and metadata
• Animation - Animation classes for video layouts
• Helpers - Using image(), qr(), and template()

Embedding Images

Use the image() helper to embed images in your templates. It supports loading from props, template directories, and URLs.

Prop-based Images

Pass the prop name to load an image path from props:

CODEBLOCK34

The image('background') helper loads from the background prop value (file path or URL).

Direct File Images

Load images directly from your template directory by including the file extension:

CODEBLOCK35

You can also use subdirectories:

CODEBLOCK36

Template directory structure:
CODEBLOCK37

URLs

The image() helper also supports loading images from URLs:

CODEBLOCK38

Supported Formats

• - JPEG (.jpg, .jpeg)
• PNG (.png)
• GIF (.gif)
• WebP (.webp)
• SVG (.svg)

Image Positioning

Use Tailwind's object-fit utilities:

CODEBLOCK39

Troubleshooting

Images Not Loading

Check file paths are relative to the props file:

CODEBLOCK40

Absolute paths won't work.

Optimize Image Sizes

Use appropriately sized images before embedding:

CODEBLOCK41

---

Next Steps

• - Templates - Creating image and video templates
• Animation - Animation classes for videos
• Styling - Tailwind & shadcn/ui integration

Animation

loopwind provides Tailwind-style animation classes that work with time to create smooth video animations without writing custom code.

Note: Animation classes only work with video templates and GIFs. For static images, animations will have no effect since there's no time context.

Quick Start

CODEBLOCK42

Animation Format

loopwind uses three types of animations with millisecond timing:

Type	Format	Description
Enter	INLINECODE47	Animations that play when entering
Exit

exit-{type}/{start}/{duration} | Animations that play when exiting |
| Loop | loop-{type}/{duration} | Continuous looping animations |

All timing values are in milliseconds (1000ms = 1 second).

Utility-Based Animations

In addition to predefined animations, loopwind supports Tailwind utility-based animations that let you animate any transform or opacity property directly:

CODEBLOCK43

Supported Utilities

Utility	Format	Description	Example
translate-x	INLINECODE50	Translate horizontally	INLINECODE51 = 20px<br/>enter-translate-x-full = 100%<br/>enter-translate-x-[20px] = 20px
translate-y

enter-translate-y-{value} | Translate vertically | loop-translate-y-10 = 40px
enter-translate-y-1/2 = 50%
enter-translate-y-[5rem] = 80px | | opacity | enter-opacity-{n} | Set opacity (0-100) | enter-opacity-50 = 50% | | scale | enter-scale-{n} | Scale element (0-200) | enter-scale-100 = 1.0x | | rotate | enter-rotate-{n} | Rotate in degrees | enter-rotate-45 = 45° | | skew-x | enter-skew-x-{n} | Skew on X axis in degrees | enter-skew-x-12 = 12° | | skew-y | enter-skew-y-{n} | Skew on Y axis in degrees | exit-skew-y-6 = 6° |

Translate value formats:

• - Numeric: 5 = 20px (Tailwind spacing scale: 1 unit = 4px)
• Keywords: full = 100%
• Fractions: 1/2 = 50%, 1/3 = 33.333%, 2/3 = 66.666%, etc.
• Arbitrary values: [20px], [5rem], [10%] (rem converts to px: 1rem = 16px)

All utilities work with:

• - All prefixes: enter-, exit-, loop-, INLINECODE79
• Negative values: Prefix with - (e.g., -translate-x-5, -rotate-45)
• Timing syntax: Add /start/duration (e.g., enter-translate-x-5/0/800)

Translate Animations

CODEBLOCK44

Opacity Animations

CODEBLOCK45

Scale Animations

CODEBLOCK46

Rotate Animations

CODEBLOCK47

Skew Animations

CODEBLOCK48

Combining Utilities

You can combine multiple utility animations on the same element:

CODEBLOCK49

Bracket Notation

For more CSS-like syntax, you can use brackets with units:

CODEBLOCK50

Enter Animations

Format: INLINECODE85

• - startMs - when the animation begins (milliseconds from start)
• INLINECODE87 - how long the animation lasts

When values are omitted (enter-fade-in), it uses the full video duration.

Fade Animations

Simple opacity transitions with optional direction.

CODEBLOCK51

Class	Description
INLINECODE89	Fade in (opacity 0 → 1)
INLINECODE90

Fade in + slide up (30px) |
| enter-fade-in-down/0/500 | Fade in + slide down (30px) |
| enter-fade-in-left/0/500 | Fade in + slide from left (30px) |
| enter-fade-in-right/0/500 | Fade in + slide from right (30px) |

Slide Animations

Larger movement (100px) with fade.

CODEBLOCK52

Class	Description
INLINECODE94	Slide in from left (100px)
INLINECODE95

Slide in from right (100px) |
| enter-slide-up/0/500 | Slide in from bottom (100px) |
| enter-slide-down/0/500 | Slide in from top (100px) |

Bounce Animations

Playful entrance with overshoot effect.

CODEBLOCK53

Class	Description
INLINECODE98	Bounce in with scale overshoot
INLINECODE99

Bounce in from below |
| enter-bounce-in-down/0/500 | Bounce in from above |
| enter-bounce-in-left/0/500 | Bounce in from left |
| enter-bounce-in-right/0/500 | Bounce in from right |

Scale & Zoom Animations

Size-based transitions.

CODEBLOCK54

Class	Description
INLINECODE103	Scale up from 50% to 100%
INLINECODE104

Zoom in from 0% to 100% |

Rotate & Flip Animations

Rotation-based transitions.

CODEBLOCK55

Class	Description
INLINECODE105	Rotate in from -180°
INLINECODE106

3D flip on horizontal axis |
| enter-flip-in-y/0/500 | 3D flip on vertical axis |

Exit Animations

Format: INLINECODE108

• - startMs - when the exit animation begins
• INLINECODE110 - how long the exit animation lasts

Exit animations use the same timing system but animate elements out.

CODEBLOCK56

Class	Description
INLINECODE111	Fade out (opacity 1 → 0)
INLINECODE112

Fade out + slide up |
| exit-fade-out-down/2500/500 | Fade out + slide down |
| exit-fade-out-left/2500/500 | Fade out + slide left |
| exit-fade-out-right/2500/500 | Fade out + slide right |
| exit-slide-up/2500/500 | Slide out upward (100px) |
| exit-slide-down/2500/500 | Slide out downward (100px) |
| exit-slide-left/2500/500 | Slide out to left (100px) |
| exit-slide-right/2500/500 | Slide out to right (100px) |
| exit-scale-out/2500/500 | Scale out to 150% |
| exit-zoom-out/2500/500 | Zoom out to 200% |
| exit-rotate-out/2500/500 | Rotate out to 180° |
| exit-bounce-out/2500/500 | Bounce out with scale |
| exit-bounce-out-up/2500/500 | Bounce out upward |
| exit-bounce-out-down/2500/500 | Bounce out downward |
| exit-bounce-out-left/2500/500 | Bounce out to left |
| exit-bounce-out-right/2500/500 | Bounce out to right |

Loop Animations

Format: INLINECODE128

Loop animations repeat every {durationMs} milliseconds:

• - /1000 = 1 second loop
• INLINECODE131 = 0.5 second loop
• INLINECODE132 = 2 second loop

When duration is omitted (loop-bounce), it defaults to 1000ms (1 second).

CODEBLOCK57

Class	Description
INLINECODE134	Opacity pulse (0.5 → 1 → 0.5)
INLINECODE135

Bounce up and down |
| loop-spin/{ms} | Full 360° rotation |
| loop-ping/{ms} | Scale up + fade out (radar effect) |
| loop-wiggle/{ms} | Side to side wiggle |
| loop-float/{ms} | Gentle up and down floating |
| loop-pulse/{ms} | Scale pulse (1.0 → 1.05 → 1.0) |
| loop-shake/{ms} | Shake side to side |

Easing Functions

Add an easing class before the animation class to control the timing curve.

CODEBLOCK58

Class	Description	Best For
INLINECODE142	Constant speed	Mechanical motion
INLINECODE143

Slow start, fast end | Exit animations |
| ease-out | Fast start, slow end (default) | Enter animations |
| ease-in-out | Slow start and end | Subtle transitions |
| ease-in-cubic | Strong slow start | Dramatic exits |
| ease-out-cubic | Strong fast start | Impactful entrances |
| ease-in-out-cubic | Strong both ends | Emphasis animations |
| ease-in-quart | Very strong slow start | Powerful exits |
| ease-out-quart | Very strong fast start | Punchy entrances |
| ease-in-out-quart | Very strong both ends | Maximum drama |

Per-Animation-Type Easing

You can apply different easing functions to enter, exit, and loop animations on the same element using enter-ease-*, exit-ease-*, and loop-ease-* classes.

CODEBLOCK59

How it works:

1. 1. Default easing (ease-*) applies to ALL animations if no specific override is set
2. Specific easing (enter-ease-*, exit-ease-*, loop-ease-*) overrides the default for that animation type
3. If both are present, specific easing takes priority for its animation type

Available easing classes:

Default (all animations)	Enter only	Exit only	Loop only
INLINECODE159	INLINECODE160	INLINECODE161	INLINECODE162
INLINECODE163

enter-ease-out | exit-ease-out | loop-ease-out |
| ease-in-out | enter-ease-in-out | exit-ease-in-out | loop-ease-in-out |
| ease-in-cubic | enter-ease-in-cubic | exit-ease-in-cubic | loop-ease-in-cubic |
| ease-out-cubic | enter-ease-out-cubic | exit-ease-out-cubic | loop-ease-out-cubic |
| ease-in-out-cubic | enter-ease-in-out-cubic | exit-ease-in-out-cubic | loop-ease-in-out-cubic |
| ease-in-quart | enter-ease-in-quart | exit-ease-in-quart | loop-ease-in-quart |
| ease-out-quart | enter-ease-out-quart | exit-ease-out-quart | loop-ease-out-quart |
| ease-in-out-quart | enter-ease-in-out-quart | exit-ease-in-out-quart | loop-ease-in-out-quart |
| linear | enter-ease-linear | exit-ease-linear | loop-ease-linear |
| ease-spring | enter-ease-spring | exit-ease-spring | loop-ease-spring |

Spring Easing

Spring easing creates natural, physics-based bouncy animations. Use the built-in ease-spring easing or create custom springs with configurable parameters.

CODEBLOCK60

Spring parameters:

Parameter	Description	Effect when increased	Default
mass	Mass of the spring	Slower, more inertia	1
stiffness

Spring stiffness | Faster, snappier | 100 |
| damping | Damping coefficient | Less bounce, smoother | 10 |

Common spring presets:

CODEBLOCK61

How spring works:

1. 1. Default ease-spring - Uses a pre-calculated spring curve optimized for most use cases
2. Custom ease-spring/mass/stiffness/damping - Generates a physics-based spring curve using the damped harmonic oscillator formula
3. The spring automatically calculates its ideal duration to reach the final state
4. Works with all animation types: ease-spring, enter-ease-spring, exit-ease-spring, INLINECODE209

Combining Enter and Exit

You can use both enter and exit animations on the same element:

CODEBLOCK62

The opacities from multiple animations are multiplied together, so you get smooth transitions that combine properly.

Staggered Animations

Create sequenced animations by offsetting start times:

CODEBLOCK63

Dynamic Staggering

For dynamic lists, calculate the timing programmatically:

CODEBLOCK64

Common Patterns

Intro Sequence

CODEBLOCK65

Text Reveal

CODEBLOCK66

Looping Background Element

CODEBLOCK67

Full Enter/Exit Animation

CODEBLOCK68

Programmatic Animations

For complete control beyond animation classes, use progress and frame directly.

Available Props

Prop	Type	Description
INLINECODE212	INLINECODE213	0 to 1 through the video (0% to 100%)
INLINECODE214

number | Current frame number (0, 1, 2, ... totalFrames-1) |

These are only available in video templates. Use them when animation classes aren't flexible enough.

Using frame

CODEBLOCK69

Using progress

CODEBLOCK70

Custom Easing

CODEBLOCK71

When to Use Programmatic Animations

Use progress/frame instead of animation classes when you need:

• - Custom easing functions (elastic, bounce with specific curves beyond built-in ease-spring)
• Color cycling or gradients based on time
• Mathematical animations (sine waves, spirals, etc.)
• Complex multi-property animations that need precise coordination
• Conditional logic based on specific frame numbers

For everything else, prefer animation classes - they're simpler and more maintainable.

Animating Along Paths

Animate elements along SVG paths with proper rotation using built-in path helpers:

CODEBLOCK72

Text Path Animations

Combine textPath helpers with animation classes to create animated text along curves:

Rotating text around a circle:
CODEBLOCK73

Animated text reveal along a path:
CODEBLOCK74

Staggered character entrance:
CODEBLOCK75

Text with bounce entrance along arc:
CODEBLOCK76

Loop animation with text on curve:
CODEBLOCK77

Tips for animating text paths:

1. 1. Use progress for smooth rotation on circles and arcs
2. Map over returned characters to apply individual animations
3. Combine with animation classes like enter-fade-in, enter-bounce-in, etc.
4. Stagger character animations by calculating delays: INLINECODE224
5. Use frame for continuous effects like waves or pulsing
6. Preserve the original transform when adding animations: INLINECODE226

Common path types:

Quadratic Bezier (Q command):
CODEBLOCK78

Cubic Bezier (C command):
CODEBLOCK79

Circle:
CODEBLOCK80

Tips:

• - Use progress (0-1) for smooth animation
• The translate(-50%, -50%) centers the element on the path
• Combine rotation with the translate: INLINECODE229
• For text following a path, you can animate individual characters at different progress values

SVG Stroke Animations

Animate SVG path strokes with the stroke-dash classes, perfect for drawing or erasing line art, icons, and illustrations.

How It Works

SVG stroke animations use strokeDasharray and strokeDashoffset CSS properties to create drawing effects:

1. 1. Enter animations - Draw the stroke from start to finish
2. Exit animations - Erase the stroke from finish to start
3. Loop animations - Continuously draw and erase

Format

All stroke-dash animations require the path length in brackets:

CODEBLOCK81

Basic Examples

CODEBLOCK82

Enter Animations (Drawing)

Draw strokes from 0% to 100%:

CODEBLOCK83

Exit Animations (Erasing)

Erase strokes from 100% to 0%:

CODEBLOCK84

Loop Animations

Continuously draw and erase:

CODEBLOCK85

Getting Path Length

To find the path length for your SVG:

CODEBLOCK86

Then use that value:

CODEBLOCK87

Complete Example

CODEBLOCK88

Combining with Other Animations

Stroke animations work alongside other animation classes:

CODEBLOCK89

Animated Dashed Strokes (Marching Ants)

For marching ants or animated dashed patterns, use frame or progress directly instead of animation classes:

CODEBLOCK90

Tips:

• - strokeDasharray="10 5" - 10px dash, 5px gap
• INLINECODE235 - animates the pattern position
• Negative offset moves forward, positive moves backward
• Different speeds: multiply by different values (e.g., dashOffset * 2)

This technique is different from stroke-dash classes:

• - stroke-dash classes - Draw/erase the stroke (reveal animation)
• Marching ants - Move a dashed pattern along the stroke

Performance Tips

1. 1. Use Tailwind classes when possible - they're optimized for the renderer
2. Avoid too many nested animations - each adds computation per frame
3. Use loop animations sparingly - they're computed every frame
4. Prefer opacity and transform - they're the most performant properties

Next Steps

• - Templates - Creating image and video templates
• Helpers - QR codes, images, and more

Template Helpers

Additional helpers for creating powerful, composable templates.

Overview

Beyond the basics, loopwind provides:

• - template() - Compose templates together
• INLINECODE240 - Generate QR codes on the fly
• INLINECODE241 - Access user configuration

For image embedding, see the Images page.

Template Composition

Compose multiple templates together to create complex designs.

Usage

CODEBLOCK91

How it works:

1. 1. template(name, props) renders another installed template
2. The embedded template is rendered at its specified size
3. You can embed multiple templates in one design
4. Templates can be nested (template within a template)

Use Cases

1. Reusable components:
CODEBLOCK92

2. Complex layouts:
CODEBLOCK93

3. Dynamic content:
CODEBLOCK94

Best Practices

1. 1. Keep templates focused - Each template should do one thing well
2. Pass minimal props - Only pass what the embedded template needs
3. Document dependencies - Note which templates are required in your README
4. Avoid deep nesting - Too many nested templates can be hard to debug

QR Codes

Generate QR codes dynamically in your templates.

Usage

CODEBLOCK95

Props format:
CODEBLOCK96

QR Options

You can customize QR code appearance:

CODEBLOCK97

Error correction levels:

• - L - Low (~7% correction)
• INLINECODE244 - Medium (~15% correction) - default
• INLINECODE245 - Quartile (~25% correction)
• INLINECODE246 - High (~30% correction)

User Configuration

Access user settings from .loopwind/loopwind.json using the config prop:

CODEBLOCK98

User's .loopwind/loopwind.json:
``json title=".loopwind/loopwind.json" { "colors": { "brand": "#ff6b6b" }, "fonts": { "sans": ["Inter", "system-ui", "sans-serif"] } } CODEBLOCK99tsx export default function CircleText({ tw, textPath, message }) { return ( <div style={tw('relative w-full h-full bg-slate-900')}> {textPath.onCircle( message, 960, // center x 540, // center y 400, // radius 0, // rotation offset (0-1) { fontSize: "4xl", fontWeight: "bold", color: "white", letterSpacing: 0.05 } )} </div> ); } CODEBLOCK100tsx // Text around a circle textPath.onCircle("HELLO WORLD", 960, 540, 400, 0, { fontSize: "4xl", color: "white" }) CODEBLOCK101tsx // Text along any custom path textPath.onPath("CUSTOM PATH", (t) => ({ x: 100 + t * 800, y: 200 + Math.sin(t * Math.PI) * 100, angle: Math.cos(t * Math.PI) * 20 }), { fontSize: "2xl", fontWeight: "semibold" }) CODEBLOCK102tsx // Text along a quadratic Bezier curve textPath.onQuadratic( "CURVED TEXT", { x: 200, y: 400 }, // start { x: 960, y: 100 }, // control point { x: 1720, y: 400 }, // end { fontSize: "3xl", color: "blue-300" } ) CODEBLOCK103tsx // Text along a cubic Bezier curve textPath.onCubic( "S-CURVE", { x: 200, y: 600 }, // start { x: 600, y: 400 }, // control 1 { x: 1320, y: 800 }, // control 2 { x: 1720, y: 600 }, // end { fontSize: "3xl", color: "purple-300" } ) CODEBLOCK104tsx // Text along a circular arc textPath.onArc( "ARC TEXT", 960, // center x 540, // center y 400, // radius 0, // start angle (degrees) 180, // end angle (degrees) { fontSize: "2xl", color: "pink-300" } ) CODEBLOCK105typescript { fontSize?: string; // Tailwind size: "xl", "2xl", "4xl", etc. fontWeight?: string; // Tailwind weight: "bold", "semibold", etc. color?: string; // Tailwind color: "white", "blue-500", etc. letterSpacing?: number; // Space between characters (0-1, default: 0) style?: any; // Additional inline styles } CODEBLOCK106tsx export default function RotatingText({ tw, textPath, progress }) { return ( <div style={tw('relative w-full h-full bg-black')}> {textPath.onCircle( "SPINNING • TEXT • ", 960, 540, 400, progress, // Rotate based on video progress { fontSize: "3xl", color: "yellow-300" } )} </div> ); } CODEBLOCK107tsx export default function MultiPath({ tw, textPath }) { return ( <div style={tw('relative w-full h-full bg-gradient-to-br from-slate-900 to-slate-700')}> {/* Text on outer circle */} {textPath.onCircle( "OUTER RING", 960, 540, 500, 0, { fontSize: "5xl", fontWeight: "bold", color: "white" } )} {/* Text on inner circle */} {textPath.onCircle( "inner ring", 960, 540, 300, 0.5, // offset by 50% for rotation { fontSize: "2xl", color: "white/60" } )} </div> ); } CODEBLOCK108tsx export default function PathText({ tw, textPath }) { return ( <div style={tw('relative w-full h-full bg-gray-900')}> {/* Draw the path */} <svg width="1920" height="1080" style={{ position: 'absolute' }}> <path d="M 200 400 Q 960 150 1720 400" stroke="rgba(255,255,255,0.2)" strokeWidth={2} fill="none" /> </svg> {/* Text following the path */} {textPath.onQuadratic( "FOLLOWING THE CURVE", { x: 200, y: 400 }, { x: 960, y: 150 }, { x: 1720, y: 400 }, { fontSize: "3xl", fontWeight: "bold", color: "blue-300" } )} </div> ); } ``

For animated text paths, see Text Path Animations.

Reserved Prop Names

The following prop names are reserved and cannot be used in your template's