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 (stats, rotate, glow) ---     floating 3D stats with hue cycling
--- panel (feed, scan) ---               activity feed with scan line
--- panel (nav, border) ---              sidebar nav with chase-light border

Stats panel

--- panel (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 (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 (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 (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 (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 (feed, 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 (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 (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 (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 (media, border, rotate) ---
![App demo](https://example.com/demo.mp4)
# Mobile checkout flow

--- panel (media, 16s) ---
![Walkthrough](https://example.com/walkthrough.mp4)
00:00.0 seek 00:05.0
00:06.0 seek 00:20.0

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