Panel Scenes

Panel scenes render polished SaaS-style UI components inside a card frame - stat dashboards, nav menus, activity feeds, checklists, and media players. Five panel types are available, all supporting the same opt-in visual effects.

Opt-in visual effects

Add any of these effects as extra variants in the separator. They stack - combine as many as you like.

Effect	What it does
rotate	Sine-driven 3D tilt and drift float animation throughout the scene
glow	Hue-cycling outer shadow that slowly rotates through all colors
border	Animated SVG chase-light that traces around the card perimeter
scan	Green scan line that bounces top-to-bottom (stats/feed only)
shine	White gradient sweep across the card surface (media only)

--- panel ---                            floating 3D stats with hue cycling
variant: stats
effects: rotate, glow

--- panel ---                            activity feed with scan line
variant: feed
effects: scan

--- panel ---                            sidebar nav with chase-light border
variant: nav
effects: border

Stats panel

--- panel --- variant: stats count-up numbers trend labels

Metric cards with animated count-up numbers and trend labels. Each card shows a metric name, a value that counts up from 0, and an optional trend line. Up to 4 cards fit comfortably.

Structure: heading = metric label, first paragraph line = value, second paragraph line = trend.

--- panel ---
variant: stats

# Monthly Revenue
$48,200
+12% from last month

# Active Users
1,840
+340 new this week

# Churn Rate
2.1%
-0.4% improvement

Trend lines starting with + render green; those starting with - render red. Cards stagger in with fade + slide-up.

The count-up animation reads the numeric portion of the value and animates it from 0. Currency symbols, percent signs, and commas are preserved in position.

Nav panel

--- panel --- variant: nav active item highlight

A sidebar navigation panel with an animated active item. Use **bold** to mark the active nav entry - it gets an indigo background, a left accent bar, and a subtle pulse animation.

--- panel ---
variant: nav

# Navigation
- Dashboard
- Analytics
- **Users**
- Settings
- Billing

Items stagger in from the left. The heading is shown small and uppercase above the list as a section label. Font Awesome icons work in nav items: - <i class="fas fa-users"></i> Users

Feed panel

--- panel --- variant: feed green / red status dots

An activity feed with colored status dots. Lines starting with x get a red dot; all others get a green dot. The last item's dot pulses. Items slide in one by one from the left.

--- panel ---
variant: feed
effects: scan

# Recent Activity
Alice upgraded to Pro
x Bob cancelled subscription
3 new signups today
x Payment failed: Carol LLC
Charlie completed onboarding

Both paragraphs and list items (- item) work for feed entries. Mix them freely.

Checklist panel

--- panel --- variant: checklist SVG checkmark draw

A checkbox list where checkmarks draw themselves in after each item slides into view. Default items are checked (green filled circle, animated checkmark path); items prefixed with x are unchecked (grey ring, muted text).

--- panel ---
variant: checklist

# Onboarding Checklist
Connect your data source
Set up your first dashboard
Invite your team
x Configure alerts
x Export your first report

Great for showing feature adoption, setup flows, or compliance requirements. The checkmark SVG path animates using strokeDashoffset after the item enters.

Media panel

--- panel --- variant: media image or video seek + zoom

A styled card frame containing an image or video. Supports all the same seek and zoom directives as video scenes. An optional heading renders as a caption below the media.

--- panel ---
variant: media
effects: border, rotate

![App demo](https://example.com/demo.mp4)
# Mobile checkout flow

--- panel ---
variant: media
duration: 16s

![Walkthrough](https://example.com/walkthrough.mp4)
00:00.0 seek 00:05.0
00:06.0 seek 00:20.0

--- panel ---
variant: media
duration: 8s

![Screenshot](https://example.com/screenshot.png)
00:02.0 zoom top-center 2x
00:06.0 zoom out