Purpose
Render a UI mock card with depth cues — subtle Y-axis tilt, soft drop shadow, light blur halo behind, and continuous parallax drift. Communicates "this is a real product floating in space" rather than a flat Figma export.
Params
{
"panel_width_px": 720,
"panel_height_px": 1080,
"panel_border_radius_px": 24,
"panel_content": "<UI mock content>", // any React/HTML content
"tilt_y_deg": -3, // subtle 3D Y-axis tilt "tilt_x_deg": 0, "blur_halo_px": 4, "shadow": { "offset_y_px": 32, "blur_px": 64, "opacity": 0.12, "color": "#000000" },
"entry": { "scale_start": 0.96, "scale_end": 1.00, "opacity_start": 0, "opacity_end": 1, "duration_frames": 24, "easing": "bezier(0.4, 0, 0.2, 1)" },
"parallax": { "amplitude_px": 12, "period_seconds": 6, "axis": "horizontal", "start_frame_after_entry": 6 } }
## Behaviour
1. Render the panel as a `<div>` with the content inside.
2. Apply `transform: rotateY(<tilt_y_deg>deg)` for 3D depth (requires CSS 3D context).
3. Apply box-shadow for the drop shadow.
4. Apply `filter: drop-shadow(...)` for the blur halo around the panel edge.
5. Animate entry (scale + opacity) over `entry.duration_frames`.
6. After entry, continuously drift via parallax interpolation.
## Style pack overrides
- **SP-F (product-demo)** — default. Aurora-blob always behind.
## Quality Checks
- Tilt is non-zero (3D depth cue is the whole point).
- Shadow + blur halo both render.
- Panel content is legible at panel scale (small UI type at 12-22px renders clearly).
- Parallax drift starts AFTER entry completes.
## Failure Modes
- **Panel looks flat.** Tilt is 0. Set to -3 to -5 deg.
- **Shadow invisible.** Opacity too low or offset too tight.
- **UI type pixelated.** Render UI at native resolution; scale-down only via CSS, not by rendering to a smaller raster.
- **3D tilt doesn't render.** Parent doesn't have `perspective: 1200px`. Add to composition root.