aurora-blob-continuity

name	aurora-blob-continuity
description	motion-graphic primitive — soft radial-gradient cloud rendered behind all content as the connective tissue across scenes. expands/contracts/drifts on a continuous noise-driven path, doubling as the visual metaphor for "AI generating" or "thinking". signature element of SP-F product-demo style (Base44 reel). replaces hard-cut bg-swap as the inter-scene transition.

aurora-blob-continuity

Purpose

Replace hard-cut scene transitions with a soft, continuous gradient blob that lives behind all content for the entire spot. When the scene "changes," the blob morphs (size, position, hue) and the new scene's foreground fades in over the same continuous bg. The blob is the audience's anchor — they never see a hard cut.

This is the SP-F (product-demo) signature mechanic. It's what makes Base44's reel feel like "one continuous shot" even though it's actually 5 scenes.

Params (params.schema.json)

{
  "id":                  "aurora",
  "kind":                "blob",
  "diameter_px":         720,
  "color":               "#FFB890",          // peach default; overridden per spot
  "blur_px":             80,
  "opacity":             0.55,

  "anchor_bg_color":     "#F8F1E9",          // cream canvas behind the blob

  "drift": {
    "x_amplitude_px":   80,
    "y_amplitude_px":   60,
    "period_seconds":   8,
    "noise_seed":       17
  },

  "morph_keyframes": [                       // per-scene morph states
    {
      "atScene":   "s1",
      "diameter":  720,
      "x_pct":     0.5,
      "y_pct":     0.6,
      "color":     "#FFB890",
      "opacity":   0.55
    },
    {
      "atScene":   "s2",
      "diameter":  900,
      "x_pct":     0.6,
      "y_pct":     0.5,
      "color":     "#FFAA88",
      "opacity":   0.65
    }
    // …
  ],

  "morph_transition_frames": 24,
  "morph_easing":            "bezier(0.4, 0, 0.2, 1)",

  "thinking_state_pulse": {                  // optional — when "AI is generating"
    "trigger_scene":  "s3",
    "pulse_min":      0.92,
    "pulse_max":      1.18,
    "period_frames":  18
  }
}

Behaviour

1. Render as an absolutely-positioned div with a radial-gradient(circle, color, transparent) background.
2. Apply CSS filter: blur(80px) for the soft edge.
3. Continuous drift: translateX/Y = drift.x_amplitude * noise(t / period) per axis (perlin/simplex noise for natural drift).
4. Between scenes, interpolate diameter, x_pct, y_pct, color, opacity between consecutive morph_keyframes over morph_transition_frames.
5. If thinking_state_pulse is active during a scene, multiply the scale by a sine wave between pulse_min and pulse_max at period_frames cadence.

Implementation: a Remotion component reading composition-global frame, rendered ABOVE the bg layer and BELOW all foreground content.

Style pack overrides

SP-F (product-demo)

• Always-on; renders for the full duration of the spot.
• Color: peach default. Can be overridden to match brand accent.
• morph_keyframes: one per scene, declared in the impl brief.
• thinking_state_pulse typically used on prompt-typewriter scenes (A15) to signal "generating".

Other packs

• Not used. The aurora-blob is SP-F-specific.

When to use

• SP-F product-demo spots — always.
• Custom packs that want a "AI generating" or "soft continuous bg" identity.

When NOT to use

• Any pack that uses hard-cut bg-swap as its primary transition (SP-A, SP-B, SP-E, SP-G).
• Editorial packs (SP-C, SP-D).

Quality Checks

• Blob's bbox never reaches the canvas edges (must stay visually contained).
• Drift amplitudes are perceptible (≥40px each axis on 1080w canvas) but not jittery.
• Morph between scenes is smooth — morph_transition_frames ≥ 18 so the morph reads as motion, not as a cut.
• Color interpolation through the morph stays in the warm-tone family (RGB mix won't muddy if both endpoints are warm; if user wants cross-tone morphs, use OKLCH).
• When thinking_state_pulse is active, the parent scene's foreground content isn't disturbed (the pulse is purely on the blob).

Failure Modes

• Blob looks like a hard shape (no blur). CSS filter: blur(80px) isn't supported or being stripped. Confirm Remotion's CSS pipeline supports filter blur — fallback to multiple stacked radial-gradients with decreasing alpha.
• Drift period feels mechanical (sine-wave). Use perlin/simplex noise, not sin().
• Color morph muddies (e.g. peach → blue produces gray). Switch from RGB to OKLCH interpolation.
• Blob covers important UI mock content. Reduce opacity to 0.35 or shift blob anchor away from content's bbox.
• Pulse drifts out of sync with the prompt-typewriter's character cadence. Tie pulse period to typewriter char_per_frame.