ui-panel-float-z

name	ui-panel-float-z
description	motion-graphic primitive — realistic UI mock card drifting on a fake Z-axis with subtle 3D tilt and parallax. signature sp-f product-demo mechanic. composes scale + tilt + shadow + blur-halo + continuous parallax drift. renderer = hyperframe-gsap preferred.

ui-panel-float-z

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.