Input, Button & Progress

Three scene types for demonstrating UI interactions: an animated text input that types itself, a CTA button with a cursor that hovers and clicks, and a horizontal progress bar with count-up percentage. All three support opt-in visual effects.

Input scene

--- input --- typewriter value

Renders a form input with a label above. The heading value types itself character by character into the field while a blinking cursor tracks the insertion point. The label fades in first, then the box slides up, then typing begins.

--- input ---
# [email protected]
Email address

--- input (shine) ---
# mysecretpassword
Password

The heading is the value typed into the field. The paragraph is the label shown above the box.

Input effects

Effect	What it does
rotate	Sine-driven 3D tilt and float. Label and box tilt together in sync.
border	Chase-light SVG border traces around the input box.
shine	White gradient band sweeps across the box while typing.

--- input (border, shine) ---
# Enter your email
Work email

Button scene

--- button --- cursor click animation 8 colors

A full-canvas CTA button with an animated cursor that enters from below, moves to the button, hovers (glow builds), then clicks (button presses down, ripple expands, glow bursts). All timing scales to the scene duration.

--- button ---
# Get Started
Sign up for free today

--- button (blue, shine, 5s) ---
# Start Free Trial

The heading is the button label. The optional paragraph is a sub-label shown above the button (e.g. a social proof line or disclaimer).

Button colors

blue red green purple orange yellow pink cyan white black

Default is blue. The color token can appear anywhere in the variant list - order does not matter.

Button visual effects

Effect	Description	Timing
shine	Diagonal sweep at scene start	Once, on entry
shimmer	Repeating stripe gradient animation	Continuous
glow	Hue-cycling shadow layer	Continuous
halo	Radial white bloom pulse in sync with border loop	Continuous
inner-glow	Bright inner edge ring fades in on hover	On hover + click
neon	Multi-layer colored glow with fast flicker	Continuous
sparks	Particles fly off the border on click	On click
confetti	Colored chips burst from center on click	On click
lens-flare	Diagonal streak + starburst sweeps across on hover	On hover
spotlight	Radial gradient cone narrows onto button from above	On entry
frost	Frosted glass surface with backdrop blur	Continuous
glitch	Label glitches with red/blue channel offsets before cursor arrives	Pre-click
border	Chase-light SVG border around the button	Continuous
rotate	3D float tilt	Continuous

--- button (red, neon, glitch, 6s) ---
# Delete Account

--- button (green, confetti, shine) ---
# Complete Purchase
Secure checkout - no hidden fees

--- button (purple, frost, border, rotate) ---
# Try for free

Progress bar scene

--- progress --- 0% to 100% 8 colors

A horizontal progress bar that fills from 0% to 100% over 90% of the scene duration. The percentage label counts up in sync with the bar fill. Paragraphs fade in at the 50% fill point.

--- progress ---
# Uploading Files
247 files processed, 2.4 GB transferred.

--- progress (green) ---
# Build Complete
Tests passed in 4.2 seconds.

--- progress (red) ---
# Upload Failed
Connection timed out after 30 seconds.

Progress bar colors

blue red green purple orange yellow pink cyan

Progress bar effects

Effect	What it does
glow	Hue-cycling outer shadow on the bar and card
border	Chase-light SVG border around the card
rotate	3D float tilt animation
frost	Frosted glass card surface

--- progress (purple, glow, rotate, 8s) ---
# Training AI model
Epoch 24 of 100 - loss: 0.0082