card-tilt-drift

card-tilt-drift

Purpose

Apply a baked rotation and continuous lateral drift to a content card so it feels like a physical artifact pinned to a board, not a flat Figma export.

Params

{
  "tilt_deg": -6,                        // baked rotation, fixed for this card
  "drift_amplitude_px": 8,
  "drift_period_seconds": 6,
  "drift_axis": "horizontal",            // horizontal | vertical | both
  "drift_seed": 17,                      // for noise

  "start_frame_after_pop": 8              // begin drift AFTER card lands
}

Behaviour

1. Apply transform: rotate(<tilt_deg>) as a baked transform on the card root.
2. Continuously drift the card's x position via interpolate(frame, ..., easing: linear) between -drift_amplitude and +drift_amplitude over drift_period_seconds.
3. Use perlin noise (not pure sine) for natural-feeling drift.

Style pack overrides

• SP-B (pinterest-saturated) — per-card tilt range -5° to +5°, slow drift.
• SP-E (chaos-card) — tilt range -8° to +8°, faster drift, paired with sticker-tilt-wobble.

Quality Checks

• Tilt is non-zero (this whole primitive exists to avoid axis-aligned cards).
• Drift amplitude is perceptible (≥6px) but not jittery.
• Drift starts AFTER the card's pop-in completes.
• Drift uses noise, not sine (sine reads mechanical).

Failure Modes

• Card axis-aligned. Tilt is 0 or undefined. Set non-zero.
• Drift jittery. Period too short or noise frequency too high. Smooth out.
• Drift starts during pop-in and fights the spring. Delay drift start.