@devinilabs/reelstack 1.2.0

package/families/glass/components/GlassCardBezel.tsx

@@ -0,0 +1,45 @@
+import React, { CSSProperties, ReactNode } from "react";
+import { GlassCard } from "./GlassCard";
+
+/**
+ * Soft Double-Bezel glass card. Outer shell + inner core, 1px white border
+ * between them — the "nested glass" pattern from leonxlnx/taste-skill-soft.
+ * Use for premium product reveals where a single GlassCard feels too flat.
+ */
+export const GlassCardBezel: React.FC<{
+  variant?: "default" | "strong" | "heavy";
+  outerPadding?: number;
+  innerPadding?: number;
+  radius?: number;
+  style?: CSSProperties;
+  children?: ReactNode;
+  reduceMotion?: boolean;
+}> = ({
+  variant = "strong",
+  outerPadding = 8,
+  innerPadding = 32,
+  radius = 28,
+  style,
+  children,
+  reduceMotion = false,
+}) => {
+  return (
+    <GlassCard
+      variant={variant}
+      padding={outerPadding}
+      radius={radius}
+      style={style}
+    >
+      <div
+        style={{
+          padding: innerPadding,
+          borderRadius: radius - outerPadding,
+          background: "rgba(255,255,255,0.18)",
+          boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.55)",
+        }}
+      >
+        {children}
+      </div>
+    </GlassCard>
+  );
+};

package/families/glass/components/HairlineGrid.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { AbsoluteFill } from "remotion";
+
+/**
+ * HairlineGrid — subtle 72×72 px grid with radial mask fade from center.
+ *
+ * Provides "environment" — the page-frame the buyer feels but doesn't see.
+ * Always sits between CausticBlobs and the foreground content.
+ *
+ * Pure CSS (background-image with two linear gradients). Zero per-frame cost.
+ */
+export const HairlineGrid: React.FC<{
+  cellPx?: number;
+  strokeOpacity?: number;
+}> = ({ cellPx = 72, strokeOpacity = 0.035 }) => {
+  return (
+    <AbsoluteFill
+      style={{
+        backgroundImage: `
+          linear-gradient(to right,  rgba(14,14,18,${strokeOpacity}) 1px, transparent 1px),
+          linear-gradient(to bottom, rgba(14,14,18,${strokeOpacity}) 1px, transparent 1px)
+        `,
+        backgroundSize: `${cellPx}px ${cellPx}px`,
+        WebkitMaskImage: "radial-gradient(ellipse at center, rgba(0,0,0,1) 35%, rgba(0,0,0,0) 80%)",
+        maskImage:        "radial-gradient(ellipse at center, rgba(0,0,0,1) 35%, rgba(0,0,0,0) 80%)",
+        pointerEvents: "none",
+      }}
+    />
+  );
+};

package/families/glass/components/IridescentRing.tsx

@@ -0,0 +1,114 @@
+import React from "react";
+import { interpolate, useCurrentFrame } from "remotion";
+import { palette } from "../palette";
+
+/**
+ * IridescentRing — concentric iridescent halo rings for hero-focal-point ambience.
+ *
+ * Source: ClaudeWatchReel "IridescentRing" helper (around line 138). The
+ * conic/iridescent-rotating ring used as a heavier alternative to SonarRings
+ * when a scene needs a chromatic shimmer rather than mono-color pulses.
+ *
+ * Use when: a hero subject needs a saturated, multi-stop halo that reads as
+ * "premium glass" (vs. SonarRings' single-color sonar feel). Stack 3–5 rings,
+ * each delayed by `period / count`. Each ring's stroke fades 1.0→0 as it
+ * expands minRadius→maxRadius, and the gradient orientation rotates so the
+ * iridescence appears to flow.
+ */
+export const IridescentRing: React.FC<{
+  cx?: number; // canvas-x (1080 viewBox)
+  cy?: number; // canvas-y (1920 viewBox)
+  count?: number;
+  period?: number; // frames per cycle
+  minRadius?: number;
+  maxRadius?: number;
+  colors?: string[];
+  startFrame?: number;
+  strokeWidth?: number;
+}> = ({
+  cx = 540,
+  cy = 960,
+  count = 4,
+  period = 240,
+  minRadius = 80,
+  maxRadius = 600,
+  colors = [
+    palette.iriCyan,
+    palette.iriViolet,
+    palette.iriRose,
+    palette.iriGold,
+  ],
+  startFrame = 0,
+  strokeWidth = 3,
+}) => {
+  const frame = useCurrentFrame();
+  const local = Math.max(0, frame - startFrame);
+
+  // Build gradient stops once
+  const stopOffsets = colors.map((_, i) => (i / (colors.length - 1)) * 100);
+
+  return (
+    <svg
+      style={{
+        position: "absolute",
+        left: 0,
+        top: 0,
+        width: "100%",
+        height: "100%",
+        pointerEvents: "none",
+      }}
+      viewBox="0 0 1080 1920"
+    >
+      <defs>
+        {Array.from({ length: count }).map((_, i) => {
+          const id = `iri-ring-grad-${i}`;
+          // Each ring rotates its gradient at a slightly different rate so
+          // the iridescence shimmers rather than scrolling uniformly.
+          const angle = (local * 1.2 + i * 22) % 360;
+          // x1/y1/x2/y2 in objectBoundingBox space, rotated.
+          const rad = (angle * Math.PI) / 180;
+          const x1 = 0.5 - Math.cos(rad) * 0.5;
+          const y1 = 0.5 - Math.sin(rad) * 0.5;
+          const x2 = 0.5 + Math.cos(rad) * 0.5;
+          const y2 = 0.5 + Math.sin(rad) * 0.5;
+          return (
+            <linearGradient
+              key={id}
+              id={id}
+              x1={x1}
+              y1={y1}
+              x2={x2}
+              y2={y2}
+            >
+              {colors.map((color, ci) => (
+                <stop
+                  key={ci}
+                  offset={`${stopOffsets[ci]}%`}
+                  stopColor={color}
+                />
+              ))}
+            </linearGradient>
+          );
+        })}
+      </defs>
+
+      {Array.from({ length: count }).map((_, i) => {
+        const phase = ((local + (i * period) / count) % period) / period;
+        const r = interpolate(phase, [0, 1], [minRadius, maxRadius]);
+        const opacity = interpolate(phase, [0, 0.15, 1], [0, 1, 0]);
+        return (
+          <circle
+            key={i}
+            cx={cx}
+            cy={cy}
+            r={r}
+            fill="none"
+            stroke={`url(#iri-ring-grad-${i})`}
+            strokeWidth={strokeWidth}
+            opacity={opacity}
+          />
+        );
+      })}
+    </svg>
+  );
+};

package/families/glass/components/IridescentText.tsx

@@ -0,0 +1,98 @@
+import React, { CSSProperties } from "react";
+import { useCurrentFrame } from "remotion";
+import { ease } from "../../../utils/easing";
+import { palette } from "../palette";
+
+/**
+ * IridescentText — the multi-stop iridescent gradient treatment for hero words.
+ *
+ * Source: ClaudeWatchReel hero headline "Watch." (Type. Paste. Watch. scene)
+ * and the new ReelStackReel opener "Ship.". Both apply a 5-stop iridescent
+ * `WebkitBackgroundClip: "text"` gradient and a slowly-rotating angle so the
+ * shimmer reads as alive rather than baked.
+ *
+ * Use when: one hero word in a headline needs to pop chromatically against
+ * neutral ink siblings. Pair with a StaggeredWords block where the iridescent
+ * word is rendered separately so the gradient angle can rotate without
+ * affecting other words.
+ *
+ * Behavior: scale 0.94→1.0 + blur 8px→0 + opacity 0→1 over 18 frames after
+ * `startFrame`, eased with `ease.power4Out`. If `animated`, the gradient angle
+ * rotates 0→360deg over 5 seconds (sine-eased so it slows at the extremes).
+ */
+export const IridescentText: React.FC<{
+  text: string;
+  startFrame?: number;
+  fontSize?: number;
+  fontWeight?: number;
+  letterSpacing?: number;
+  colors?: string[];
+  animated?: boolean;
+  reduceMotion?: boolean;
+  style?: CSSProperties;
+}> = ({
+  text,
+  startFrame = 0,
+  fontSize = 96,
+  fontWeight = 700,
+  letterSpacing = -2,
+  colors = [
+    palette.iriCyan,
+    palette.iriViolet,
+    palette.iriRose,
+    palette.iriGold,
+    palette.iriCyan,
+  ],
+  animated = true,
+  reduceMotion = false,
+  style,
+}) => {
+  const frame = useCurrentFrame();
+  const local = Math.max(0, frame - startFrame);
+
+  // Reveal entrance — power4Out, 18 frames
+  const tRaw = Math.min(1, Math.max(0, local / 18));
+  const t = reduceMotion ? 1 : ease.power4Out(tRaw);
+  const scale = reduceMotion ? 1 : 0.94 + t * 0.06;
+  const blur = reduceMotion ? 0 : (1 - t) * 8;
+  const opacity = reduceMotion ? 1 : t;
+
+  // Animated gradient angle — rotates 0→360deg over 5 seconds (150 frames @ 30fps),
+  // sine-eased so the rotation slows near its visual extremes.
+  const period = 150;
+  const isAnimated = animated && !reduceMotion;
+  const phase = isAnimated ? (local % period) / period : 0;
+  const eased = isAnimated ? (Math.sin(phase * Math.PI * 2 - Math.PI / 2) + 1) / 2 : 0;
+  const angle = isAnimated ? eased * 360 : 135;
+
+  const stops = colors
+    .map((c, i) => `${c} ${(i / (colors.length - 1)) * 100}%`)
+    .join(", ");
+  const gradient = `linear-gradient(${angle}deg, ${stops})`;
+
+  return (
+    <span
+      style={{
+        display: "inline-block",
+        fontFamily: "Geist, system-ui",
+        fontSize,
+        fontWeight,
+        letterSpacing,
+        lineHeight: 1.02,
+        background: gradient,
+        WebkitBackgroundClip: "text",
+        backgroundClip: "text",
+        WebkitTextFillColor: "transparent",
+        color: "transparent",
+        opacity,
+        filter: `blur(${blur}px)`,
+        transform: `scale(${scale})`,
+        transformOrigin: "left center",
+        willChange: "transform, opacity, filter",
+        ...style,
+      }}
+    >
+      {text}
+    </span>
+  );
+};

package/families/glass/components/LightBeam.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { useCurrentFrame } from "remotion";
+import { palette } from "../palette";
+
+/**
+ * LightBeam — rotating radial gradient with `screen` blend mode.
+ *
+ * Hot spot at 40% opacity. Used for hero-moment emphasis (counter reveal,
+ * name drop). Rotates slowly — full revolution takes ~12 seconds.
+ */
+export const LightBeam: React.FC<{
+  cx?: string;
+  cy?: string;
+  size?: number;
+  rotationSpeed?: number; // degrees per frame
+  color?: string;
+  reduceMotion?: boolean;
+}> = ({
+  cx = "50%",
+  cy = "30%",
+  size = 1600,
+  rotationSpeed = 1,
+  color = palette.iriGold,
+  reduceMotion = false,
+}) => {
+  const frame = useCurrentFrame();
+  const angle = reduceMotion ? 0 : (frame * rotationSpeed) % 360;
+  return (
+    <div
+      style={{
+        position: "absolute",
+        left: cx,
+        top: cy,
+        width: size,
+        height: size,
+        marginLeft: -size / 2,
+        marginTop: -size / 2,
+        background: `radial-gradient(ellipse at center, ${color}66 0%, ${color}22 30%, transparent 70%)`,
+        transform: `rotate(${angle}deg)`,
+        transformOrigin: "center",
+        mixBlendMode: "screen",
+        pointerEvents: "none",
+      }}
+    />
+  );
+};

package/families/glass/components/ParticleBurst.tsx

@@ -0,0 +1,62 @@
+import React, { useMemo } from "react";
+import { interpolate, useCurrentFrame } from "remotion";
+import { palette } from "../palette";
+
+/**
+ * ParticleBurst — 12–20 small circles radiating from center with velocity
+ * + gravity. Lifetime 60–120 frames. Fired on a beat reveal.
+ *
+ * Particle positions are deterministic (seeded by index) so the burst is
+ * stable across re-renders.
+ */
+export const ParticleBurst: React.FC<{
+  cx: number;
+  cy: number;
+  startFrame: number;
+  count?: number;
+  lifespan?: number;
+  spread?: number; // px
+  colors?: string[];
+  reduceMotion?: boolean;
+}> = ({
+  cx,
+  cy,
+  startFrame,
+  count = 16,
+  lifespan = 80,
+  spread = 360,
+  colors = [palette.iriCyan, palette.iriViolet, palette.iriRose, palette.iriGold],
+  reduceMotion = false,
+}) => {
+  const frame = useCurrentFrame();
+  const local = Math.max(0, frame - startFrame);
+  const particles = useMemo(() => {
+    return Array.from({ length: count }).map((_, i) => {
+      const angle = (i / count) * Math.PI * 2 + (i % 3) * 0.13;
+      const velocity = 0.6 + ((i * 37) % 100) / 250; // 0.6..1.0
+      const radius = 4 + ((i * 13) % 6); // 4..9 px
+      const color = colors[i % colors.length];
+      return { angle, velocity, radius, color };
+    });
+  }, [count, colors]);
+
+  if (reduceMotion) return null;
+  if (local <= 0 || local > lifespan) return null;
+
+  return (
+    <svg
+      style={{ position: "absolute", left: 0, top: 0, width: "100%", height: "100%", pointerEvents: "none" }}
+      viewBox="0 0 1080 1920"
+    >
+      {particles.map((p, i) => {
+        const t = local / lifespan;
+        const dist = spread * p.velocity * (1 - Math.pow(1 - t, 3));
+        const gravity = t * t * 80;
+        const x = cx + Math.cos(p.angle) * dist;
+        const y = cy + Math.sin(p.angle) * dist + gravity;
+        const opacity = interpolate(t, [0, 0.1, 1], [0, 1, 0]);
+        return <circle key={i} cx={x} cy={y} r={p.radius} fill={p.color} opacity={opacity} />;
+      })}
+    </svg>
+  );
+};

package/families/glass/components/SonarRings.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+import { interpolate, useCurrentFrame } from "remotion";
+import { palette } from "../palette";
+
+/**
+ * SonarRings — concentric expanding circles. Period ~300 frames (10s @ 30fps).
+ *
+ * Used as anchor-scene focus effect. Stack 3–5 rings, each delayed by
+ * `period / count`. Stroke fades from 1.0 → 0 as ring expands from
+ * minRadius → maxRadius.
+ */
+export const SonarRings: React.FC<{
+  cx: number; // center x in canvas coords
+  cy: number;
+  count?: number;
+  period?: number; // frames per ring lifecycle
+  minRadius?: number;
+  maxRadius?: number;
+  stroke?: string;
+  strokeWidth?: number;
+  startFrame?: number;
+  reduceMotion?: boolean;
+}> = ({
+  cx,
+  cy,
+  count = 4,
+  period = 300,
+  minRadius = 60,
+  maxRadius = 520,
+  stroke = palette.iriViolet,
+  strokeWidth = 2.5,
+  startFrame = 0,
+  reduceMotion = false,
+}) => {
+  const frame = useCurrentFrame();
+  const local = Math.max(0, frame - startFrame);
+
+  return (
+    <svg
+      style={{
+        position: "absolute",
+        left: 0,
+        top: 0,
+        width: "100%",
+        height: "100%",
+        pointerEvents: "none",
+      }}
+      viewBox="0 0 1080 1920"
+    >
+      {reduceMotion ? (
+        <circle
+          cx={cx}
+          cy={cy}
+          r={maxRadius}
+          fill="none"
+          stroke={stroke}
+          strokeWidth={strokeWidth}
+          opacity={0.3}
+        />
+      ) : (
+        Array.from({ length: count }).map((_, i) => {
+          const phase = ((local + (i * period) / count) % period) / period;
+          const r = interpolate(phase, [0, 1], [minRadius, maxRadius]);
+          const opacity = interpolate(phase, [0, 0.15, 1], [0, 1, 0]);
+          return (
+            <circle
+              key={i}
+              cx={cx}
+              cy={cy}
+              r={r}
+              fill="none"
+              stroke={stroke}
+              strokeWidth={strokeWidth}
+              opacity={opacity}
+            />
+          );
+        })
+      )}
+    </svg>
+  );
+};

package/families/glass/components/StaggeredWords.tsx

@@ -0,0 +1,74 @@
+import React, { CSSProperties } from "react";
+import { spring, useCurrentFrame, useVideoConfig } from "remotion";
+import { palette } from "../palette";
+
+/**
+ * StaggeredWords — text revealed word-by-word with spring easing.
+ *
+ * Default per-word offset is 4 frames (~133ms at 30fps). Spring config is
+ * gentle (damping 15, stiffness 80). Each word translates up from 16px below
+ * baseline as it scales from 0.96 to 1.0.
+ */
+export const StaggeredWords: React.FC<{
+  startFrame: number;
+  text: string;
+  perWordOffset?: number;
+  fontSize?: number;
+  fontWeight?: number;
+  color?: string;
+  letterSpacing?: number;
+  reduceMotion?: boolean;
+  style?: CSSProperties;
+}> = ({
+  startFrame,
+  text,
+  perWordOffset = 4,
+  fontSize = 64,
+  fontWeight = 700,
+  color = palette.ink,
+  letterSpacing = -1.5,
+  reduceMotion = false,
+  style,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const words = text.split(/\s+/);
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexWrap: "wrap",
+        gap: "0.28em",
+        fontFamily: "Geist, system-ui",
+        fontSize,
+        fontWeight,
+        color,
+        letterSpacing,
+        lineHeight: 1.1,
+        ...style,
+      }}
+    >
+      {words.map((word, i) => {
+        const local = Math.max(0, frame - (startFrame + i * perWordOffset));
+        const t = reduceMotion
+          ? 1
+          : spring({ frame: local, fps, config: { damping: 15, stiffness: 80 } });
+        return (
+          <span
+            key={`${word}-${i}`}
+            style={{
+              display: "inline-block",
+              opacity: t,
+              transform: reduceMotion
+                ? "none"
+                : `translateY(${(1 - t) * 16}px) scale(${0.96 + t * 0.04})`,
+            }}
+          >
+            {word}
+          </span>
+        );
+      })}
+    </div>
+  );
+};

package/families/glass/components/index.ts

@@ -0,0 +1,20 @@
+/**
+ * Glass Iridescent — primitive components index.
+ * Scaffold templates import from here:
+ *   import { CausticBlobs, GlassCard, ... } from "@reelstack/families/glass/components";
+ */
+export { CausticBlobs } from "./CausticBlobs";
+export { HairlineGrid } from "./HairlineGrid";
+export { GlassCard } from "./GlassCard";
+export { EyebrowPill } from "./EyebrowPill";
+export { StaggeredWords } from "./StaggeredWords";
+export { Counter } from "./Counter";
+export { SonarRings } from "./SonarRings";
+export { ParticleBurst } from "./ParticleBurst";
+export { LightBeam } from "./LightBeam";
+export { FloatingGlyphs } from "./FloatingGlyphs";
+export { FilmStrip } from "./FilmStrip";
+export { IridescentRing } from "./IridescentRing";
+export { IridescentText } from "./IridescentText";
+export { BreakdownCard } from "./BreakdownCard";
+export { GlassCardBezel } from "./GlassCardBezel";

package/families/glass/index.ts

@@ -0,0 +1,31 @@
+/**
+ * Glass Iridescent — family index.
+ * Re-exports palette + all 7 presets so the CLI scaffolder can import via
+ * `import { palette, presets } from "../../families/glass"`.
+ */
+export { palette, safeZones, gradients } from "./palette";
+export type { GlassPalette } from "./palette";
+
+import { preset as graphify } from "./presets/graphify";
+import { preset as paperclip } from "./presets/paperclip";
+import { preset as gstack } from "./presets/gstack";
+import { preset as lilagents } from "./presets/lilagents";
+import { preset as jcode } from "./presets/jcode";
+import { preset as claudewatch } from "./presets/claudewatch";
+import { preset as claudewatchcta } from "./presets/claudewatchcta";
+
+export const presets = {
+  graphify,
+  paperclip,
+  gstack,
+  lilagents,
+  jcode,
+  claudewatch,
+  claudewatchcta,
+} as const;
+
+export const family = {
+  name: "glass",
+  label: "Glass Iridescent",
+  presets: Object.keys(presets) as Array<keyof typeof presets>,
+} as const;