@devinilabs/reelstack 1.2.0

package/families/paper/components/ScaleBlurText.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { useCurrentFrame } from "remotion";
+import { palette } from "../palette";
+import { ease } from "../../../utils/easing";
+
+/**
+ * ScaleBlurText — hero text with a power4Out scale + blur entrance.
+ *
+ * Over 30 frames the glyphs scale 0.94 → 1.0 and blur 10px → 0 while opacity
+ * runs the eased curve. This is the Cream Paper family's signature title
+ * reveal — pair it with `CardSpring` body cards downstream.
+ */
+export const ScaleBlurText: React.FC<{
+  startFrame: number;
+  text: string;
+  size?: number;
+  color?: string;
+  reduceMotion?: boolean;
+}> = ({ startFrame, text, size = 84, color = palette.heading, reduceMotion = false }) => {
+  const frame = useCurrentFrame();
+  const local = Math.max(0, frame - startFrame);
+  const t = reduceMotion ? 1 : ease.power4Out(Math.min(1, local / 30));
+  return (
+    <span
+      style={{
+        display: "inline-block",
+        fontFamily: "Geist, system-ui",
+        fontSize: size,
+        fontWeight: 700,
+        letterSpacing: -1.5,
+        color,
+        opacity: t,
+        transform: reduceMotion ? "none" : `scale(${0.94 + t * 0.06})`,
+        filter: reduceMotion ? "none" : `blur(${(1 - t) * 10}px)`,
+      }}
+    >
+      {text}
+    </span>
+  );
+};

package/families/paper/components/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Cream Paper — primitive components index.
+ * Scaffold templates import from here:
+ *   import { CardSpring, ScaleBlurText, ... } from "@devinilabs/reelstack/families/paper/components";
+ */
+export { CardSpring } from "./CardSpring";
+export { ScaleBlurText } from "./ScaleBlurText";
+export { CreamGrid } from "./CreamGrid";
+export { GreenAccentCard } from "./GreenAccentCard";
+export { PaperShadow } from "./PaperShadow";
+export { EditorialSerifText } from "./EditorialSerifText";

package/families/paper/index.ts

@@ -0,0 +1,23 @@
+/**
+ * Cream Paper — family index.
+ */
+export { palette, safeZones, springConfig, paperShadow } from "./palette";
+export type { PaperPalette } from "./palette";
+
+import { preset as justdrop } from "./presets/justdrop";
+import { preset as opus } from "./presets/opus";
+import { preset as designreel } from "./presets/designreel";
+import { preset as devini3d } from "./presets/devini3d";
+
+export const presets = {
+  justdrop,
+  opus,
+  designreel,
+  devini3d,
+} as const;
+
+export const family = {
+  name: "paper",
+  label: "Cream Paper",
+  presets: Object.keys(presets) as Array<keyof typeof presets>,
+} as const;

package/families/paper/palette.ts

@@ -0,0 +1,102 @@
+/**
+ * ReelStack — Cream Paper palette
+ *
+ * Verified against /Users/abhishekraj/my-video/src/JustDropReel.tsx and
+ * OpusReel.tsx.
+ *
+ * Mood: editorial print. Warm, document-like, with depth in the dark-green
+ * card stack.
+ */
+export const palette = {
+  // Backgrounds — warm cream paper
+  bg: "#f0ede8",
+  bgWarm: "#e8e4de",
+  bgLight: "#edeae4",
+  paperGrid: "#e5e2dd",
+
+  // Light-mode text
+  heading: "#1a1a1a", // contrast 15.6:1 on bg #f0ede8 — WCAG AAA
+  body: "#2d2d2d",    // contrast 11.6:1 on bg #f0ede8 — WCAG AAA
+  muted: "#6b6b6b",   // contrast 4.8:1  on bg #f0ede8 — WCAG AA
+
+  // Dark-green card stack — the family's depth move
+  cardForest: "#1e3a27",
+  cardForestLift: "#2d4433",
+  cardForestDeep: "#142318",
+  cardForestBody: "#c9d1c5", // muted body text on cardForest (~8:1 contrast — WCAG AA)
+
+  // Accents
+  accent: "#D4663A", // Claude terracotta
+  accentDark: "#1e3a27",
+  danger: "#c0392b",
+  success: "#1e7a45",
+
+  // Terminal / code embeds (used in OpusReel / Devini3DReel)
+  terminalGreen: "#5be8a0",
+  terminalCaret: "#9B6B4F",
+
+  // Macro-window dots (for UI screenshots embedded in cards)
+  macClose: "#ff5f57",
+  macMin: "#febb2e",
+  macMax: "#28c840",
+} as const;
+
+export const safeZones = {
+  top: 290,
+  bottom: 1500,
+  canvas: { width: 1080, height: 1920 },
+} as const;
+
+/**
+ * Spring config used by every Cream Paper card reveal. Different from Glass
+ * (gentler, more editorial) — never override these in a paper preset without
+ * a deliberate reason.
+ */
+export const springConfig = {
+  damping: 20,
+  stiffness: 200,
+  mass: 1,
+} as const;
+
+/**
+ * Paper-shadow stack — multi-layer to feel printed, not digital.
+ */
+export const paperShadow = {
+  soft: "0 1px 2px rgba(26,26,26,0.04), 0 4px 12px rgba(26,26,26,0.06)",
+  card: "0 2px 4px rgba(26,26,26,0.06), 0 12px 28px rgba(26,26,26,0.10)",
+  elevated: "0 8px 16px rgba(26,26,26,0.08), 0 32px 60px rgba(26,26,26,0.14)",
+} as const;
+
+/**
+ * Hard-coded "allowed accents" list. The lint command checks every fill /
+ * stroke / background color in a Cream Paper reel against this set.
+ * Includes neutral text colors + the dark-green card stack + the terracotta
+ * accent + semantic success/danger + terminal green for embedded code.
+ */
+export const ALLOWED_ACCENTS = [
+  palette.heading,
+  palette.body,
+  palette.muted,
+  palette.cardForest,
+  palette.cardForestLift,
+  palette.cardForestBody,
+  palette.accent,
+  palette.accentDark,
+  palette.success,
+  palette.danger,
+  palette.terminalGreen,
+] as const;
+
+export type PaperPalette = typeof palette;
+
+/** Re-export grid units so consumers can pull them from the family entrypoint. */
+export {
+  GRID,
+  GRID_2,
+  GRID_4,
+  GRID_6,
+  GRID_8,
+  GRID_12,
+  GRID_16,
+  GRID_24,
+} from "../../utils/grid";

package/families/paper/presets/designreel.ts

@@ -0,0 +1,32 @@
+/**
+ * Preset: designreel (Cream Paper)
+ * Source: DesignReel.tsx
+ *
+ * Ultra-short 10-second teaser. Compressed beats. Designed as a promotional
+ * clip — high-energy, single message, fast in/out.
+ */
+export const preset = {
+  name: "designreel",
+  family: "paper",
+  source: "DesignReel",
+  durationFrames: 300,
+  fps: 30,
+  copy: {
+    hook: "Describe it. Get it.",
+    sub: "Design at the speed of thought.",
+  },
+  accents: {},
+  beats: {
+    hook: 0,
+    tagline: 120,
+    cta: 210,
+    end: 300,
+  },
+  primitives: [
+    "CardSpring",
+    "ScaleBlurText",
+    "CreamGrid",
+  ],
+  notes:
+    "Frame budget is tight (300f total). Use the compressed-beat structure: 4s hook, 3s tagline, 3s CTA. Anchor scenes still need 3+ motion layers — do not let the tight budget cut energy.",
+} as const;

package/families/paper/presets/devini3d.ts

@@ -0,0 +1,45 @@
+/**
+ * Preset: devini3d (Cream Paper)
+ * Source: Devini3DReel.tsx
+ *
+ * Showcase reel for a 3D-website-in-an-hour build. Hero clip plays full-frame
+ * for 31 seconds, then motion graphics take over for the closing 8 seconds.
+ */
+export const preset = {
+  name: "devini3d",
+  family: "paper",
+  source: "Devini3DReel",
+  durationFrames: 1170,
+  fps: 30,
+  copy: {
+    hook: "Built a 3D website in an hour.",
+    sub: "Custom Claude skill end-to-end.",
+    cta: "Skill link below.",
+  },
+  accents: {},
+  beats: {
+    clipIn: 0,
+    clipOut: 915,    // hero.mp4 fade-out crossfade starts at 30.5s
+    motionGraphics: 930,
+    pipelineViz: 990,
+    breadthCallout: 1080,
+    cta: 1140,
+    end: 1170,
+  },
+  primitives: [
+    "CardSpring",
+    "ScaleBlurText",
+    "CreamGrid",
+    "GreenAccentCard",
+    "PaperShadow",
+    "OffthreadVideoLetterbox", // preset-specific — letterbox 2304×1440 → 1080×675
+  ],
+  embeddedClip: {
+    path: "captures/devini3d/hero.mp4",
+    sequenceStart: 0,
+    durationFrames: 915,
+    aspect: "letterbox", // 2304×1440 source → centered 1080×675 in 1080×1920 frame
+  },
+  notes:
+    "Clip plays first, motion graphics close out. Crossfade clip→motion at frame 915 (15-frame overlap). Pipeline visualization in the closing 8s should mirror the family's GreenAccentCard stack.",
+} as const;

package/families/paper/presets/justdrop.ts

@@ -0,0 +1,39 @@
+/**
+ * Preset: justdrop (Cream Paper)
+ * Source: JustDropReel.tsx
+ *
+ * Skill-ecosystem launch reel. Cream paper background with dark-green card
+ * stack. Card-spring reveals carry the family's signature.
+ */
+export const preset = {
+  name: "justdrop",
+  family: "paper",
+  source: "JustDropReel",
+  durationFrames: 1760,
+  fps: 30,
+  copy: {
+    hook: "Using Claude Code and missing the point.",
+    sub: "JustDrop — 1000+ free skills. Works everywhere.",
+    cta: "npm install, free.",
+  },
+  accents: {},
+  beats: {
+    hook: 0,
+    problem: 225,
+    nameDrop: 555,
+    skills: 885,
+    everywhere: 1125,
+    install: 1395,
+    cta: 1605,
+    end: 1755,
+  },
+  primitives: [
+    "CardSpring",
+    "ScaleBlurText",
+    "CreamGrid",
+    "GreenAccentCard",
+    "PaperShadow",
+  ],
+  notes:
+    "Card springs use the family's default damping 20 / stiffness 200. Cream-paper bg is non-negotiable — light text on cream is the family contract.",
+} as const;

package/families/paper/presets/opus.ts

@@ -0,0 +1,48 @@
+/**
+ * Preset: opus (Cream Paper)
+ * Source: OpusReel.tsx
+ *
+ * Thesis-driven 111-second reel — the longest in the catalog. Embedded
+ * benchmark screenshots, agents.md card integrations, half-step theory
+ * narrative. Cream paper aesthetic with screenshot fade sequences.
+ */
+export const preset = {
+  name: "opus",
+  family: "paper",
+  source: "OpusReel",
+  durationFrames: 3330,
+  fps: 30,
+  copy: {
+    hook: "Opus 4.7 just dropped.",
+    sub: "The half-step theory. Stop switching models and ship.",
+    cta: "Read the thesis below.",
+  },
+  accents: {
+    danger: "#c0392b",
+    success: "#1e7a45",
+  },
+  beats: {
+    hook: 0,
+    drop: 240,
+    benchmarks: 540,
+    halfStep: 840,
+    zeroToOne: 1140,
+    thesis: 1560,
+    agentsMd: 1800,
+    workflow: 2160,
+    ship: 2460,
+    cta: 2760,
+    end: 3060,
+  },
+  primitives: [
+    "CardSpring",
+    "ScaleBlurText",
+    "CreamGrid",
+    "GreenAccentCard",
+    "PaperShadow",
+    "ScreenshotFade", // preset-specific — screenshot fade-in/fade-out sequences
+  ],
+  embeddedScreenshots: 5,
+  notes:
+    "Five screenshot sequences (benchmarks, agents.md, workflow examples). Each fades in over 12 frames, holds, fades out 18 frames. Don't replace screenshots with hand-drawn UI — buyer should /reelstack-capture them.",
+} as const;

package/families/paper/typography.ts

@@ -0,0 +1,17 @@
+/** Cream Paper typography scale. Geist Sans + Geist Mono primary; editorial serif
+ *  (Lyon Text / Newsreader) is allowed via variant overlays for headings only.
+ *  Pulled from existing template usage (BodyScene uses h1 88, h2 48); locks the
+ *  implicit scale into named tokens. Text colors come from palette
+ *  (heading/body/muted) — never embed colors in typography tokens.
+ */
+export const typography = {
+  hero: { fontSize: 96, fontWeight: 700, letterSpacing: -2, lineHeight: 1.05, fontFamily: "Geist, system-ui" },
+  h1:   { fontSize: 88, fontWeight: 700, letterSpacing: -1.5, lineHeight: 1.1, fontFamily: "Geist, system-ui" },
+  h2:   { fontSize: 48, fontWeight: 700, letterSpacing: -1.2, lineHeight: 1.15, fontFamily: "Geist, system-ui" },
+  h3:   { fontSize: 36, fontWeight: 600, letterSpacing: -1, lineHeight: 1.2, fontFamily: "Geist, system-ui" },
+  body: { fontSize: 24, fontWeight: 500, letterSpacing: -0.2, lineHeight: 1.5, fontFamily: "Geist, system-ui" },
+  caption: { fontSize: 18, fontWeight: 500, letterSpacing: 0.5, lineHeight: 1.4, fontFamily: "Geist, system-ui", textTransform: "uppercase" as const },
+  mono: { fontSize: 22, fontWeight: 500, letterSpacing: 0.3, lineHeight: 1.4, fontFamily: "Geist Mono, monospace" },
+  counter: { fontSize: 144, fontWeight: 700, letterSpacing: -2, lineHeight: 1, fontFamily: "Geist Mono, monospace" },
+} as const;
+export type Typography = typeof typography;

package/families/warm/components/AccentGlow.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { AbsoluteFill, useCurrentFrame } from "remotion";
+import { palette } from "../palette";
+
+/**
+ * AccentGlow — amber radial glow that breathes.
+ *
+ * Background ambient layer for every Warm Signature scene. Sine-wave on
+ * opacity drives a slow ~5s respiration (period = 2π / 0.04 ≈ 157 frames
+ * @ 30fps). Mix-blend `screen` lifts the scene without flattening the
+ * warm zinc base; 60px blur keeps it diffuse.
+ *
+ * Frame-budget: cheap. One absolutely-positioned radial-gradient div.
+ *
+ * Pair with `<FilmGrain />` immediately after to dirty up the highlight
+ * before any foreground content is drawn.
+ */
+export const AccentGlow: React.FC<{
+  cx?: string;
+  cy?: string;
+  size?: number;
+  baseOpacity?: number;   // mid-point of the breathing wave
+  swing?: number;         // amplitude — total opacity range = 2 × swing
+  period?: number;        // radians per frame; default 0.04 ≈ 5s cycle
+  color?: string;
+  glowAlpha?: string;     // 2-char hex for radial-gradient inner stop
+  reduceMotion?: boolean;
+}> = ({
+  cx = "50%",
+  cy = "30%",
+  size = 1400,
+  baseOpacity = 0.4,
+  swing = 0.15,
+  period = 0.04,
+  color = palette.amber,
+  glowAlpha = "33", // 20% — matches palette.amberGlow rgba alpha
+  reduceMotion = false,
+}) => {
+  const frame = useCurrentFrame();
+  const intensity = reduceMotion ? baseOpacity : baseOpacity + Math.sin(frame * period) * swing;
+  return (
+    <AbsoluteFill style={{ pointerEvents: "none" }}>
+      <div
+        style={{
+          position: "absolute",
+          left: cx,
+          top: cy,
+          width: size,
+          height: size,
+          marginLeft: -size / 2,
+          marginTop: -size / 2,
+          background: `radial-gradient(circle, ${color}${glowAlpha} 0%, transparent 55%)`,
+          filter: "blur(60px)",
+          mixBlendMode: "screen",
+          opacity: intensity,
+        }}
+      />
+    </AbsoluteFill>
+  );
+};

package/families/warm/components/BentoCell.tsx

@@ -0,0 +1,56 @@
+import React, { CSSProperties, ReactNode } from "react";
+import { spring, useCurrentFrame, useVideoConfig } from "remotion";
+import { palette } from "../palette";
+
+/**
+ * BentoCell — single cell with snappy spring entrance + amber-deep border.
+ *
+ * Spring config: damping 20, stiffness 200 — the "snappy" preset from
+ * utils/easing. Drives a translateY(20px) → 0, scale 0.96 → 1.0,
+ * opacity 0 → 1 entrance.
+ *
+ * Stagger cells by passing different `startFrame` values (e.g.
+ * `startFrame={i * 6}` to fire one cell every ~200ms).
+ */
+export const BentoCell: React.FC<{
+  startFrame: number;
+  idx?: number;
+  reduceMotion?: boolean;
+  style?: CSSProperties;
+  children?: ReactNode;
+}> = ({ startFrame, idx, reduceMotion = false, style, children }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const local = Math.max(0, frame - startFrame);
+  const t = reduceMotion
+    ? 1
+    : spring({ frame: local, fps, config: { damping: 20, stiffness: 200 } });
+
+  return (
+    <div
+      style={{
+        background: palette.surface,
+        color: palette.fg,
+        border: `1px solid ${palette.amberDeep}`,
+        borderRadius: 18,
+        padding: 24,
+        opacity: t,
+        transform: reduceMotion
+          ? "none"
+          : `translateY(${(1 - t) * 20}px) scale(${0.96 + t * 0.04})`,
+        ...style,
+      }}
+    >
+      {children ?? (
+        <>
+          <span style={{ fontSize: 22, fontWeight: 600, color: palette.amber }}>
+            FEATURE {idx ?? ""}
+          </span>
+          <p style={{ fontSize: 20, color: palette.fgSoft, marginTop: 8 }}>
+            Bento cell — replace with your callout.
+          </p>
+        </>
+      )}
+    </div>
+  );
+};

package/families/warm/components/BentoGrid.tsx

@@ -0,0 +1,30 @@
+import React, { CSSProperties, ReactNode } from "react";
+
+/**
+ * BentoGrid — container for the Warm family's signature bento layout.
+ *
+ * Plain CSS grid, equal-fraction columns, tight 18px gutter. Drop any
+ * number of `<BentoCell />` children inside; each cell handles its own
+ * spring entrance.
+ *
+ * Default 2 columns, 18px gap. Override `cols` to 3 for tighter feature
+ * matrices, or 1 to stack callouts vertically.
+ */
+export const BentoGrid: React.FC<{
+  cols?: number;
+  gap?: number;
+  style?: CSSProperties;
+  children?: ReactNode;
+}> = ({ cols = 2, gap = 18, style, children }) => (
+  <div
+    style={{
+      display: "grid",
+      gridTemplateColumns: `repeat(${cols}, 1fr)`,
+      gap,
+      alignContent: "start",
+      ...style,
+    }}
+  >
+    {children}
+  </div>
+);

package/families/warm/components/FilmGrain.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { AbsoluteFill } from "remotion";
+
+/**
+ * FilmGrain — SVG turbulence noise overlay at 6% opacity, multiply blend.
+ *
+ * Stamps subtle film-stock texture across the canvas so digital gradients
+ * never read as flat. The Warm Signature family runs warm-zinc surfaces
+ * that look plastic without grain — this is non-optional ambient.
+ *
+ * Frame-budget: zero per-frame cost. The turbulence pattern is deterministic
+ * and rendered once by the SVG filter; only the static `<rect>` is composited.
+ *
+ * Always render this AFTER `<AccentGlow />` and BEFORE any foreground scene
+ * so the multiply blend tints the glow rather than punching through it.
+ */
+export const FilmGrain: React.FC<{
+  opacity?: number;
+  baseFrequency?: number;
+  numOctaves?: number;
+}> = ({ opacity = 0.06, baseFrequency = 0.9, numOctaves = 2 }) => (
+  <AbsoluteFill
+    style={{
+      pointerEvents: "none",
+      opacity,
+      mixBlendMode: "multiply",
+    }}
+  >
+    <svg width="100%" height="100%">
+      <filter id="reelstack-warm-grain">
+        <feTurbulence baseFrequency={baseFrequency} numOctaves={numOctaves} />
+      </filter>
+      <rect width="100%" height="100%" filter="url(#reelstack-warm-grain)" />
+    </svg>
+  </AbsoluteFill>
+);

package/families/warm/components/ScaleBlurCounter.tsx

@@ -0,0 +1,71 @@
+import React, { CSSProperties } from "react";
+import { useCurrentFrame } from "remotion";
+import { palette } from "../palette";
+
+/**
+ * ScaleBlurCounter — numeric ticker tuned for the Warm family.
+ *
+ * Mirrors Glass's `Counter` component but defaults to the amber accent and
+ * the 96–168 px size band that Warm hero shots prefer. Same power4Out
+ * easing curve so motion timing reads identical across families.
+ *
+ * House rule: 5-digit MONO counters cap at ~256px width. If you need 5
+ * digits, drop `fontSize` to 96 or pair the counter with a separate label
+ * block on its own vertical band.
+ */
+export const ScaleBlurCounter: React.FC<{
+  startFrame: number;
+  durationFrames?: number;
+  fromValue?: number;
+  toValue: number;
+  prefix?: string;
+  suffix?: string;
+  fontSize?: number;
+  color?: string;
+  fontFamily?: string;
+  reduceMotion?: boolean;
+  style?: CSSProperties;
+}> = ({
+  startFrame,
+  durationFrames = 36,
+  fromValue = 0,
+  toValue,
+  prefix = "",
+  suffix = "",
+  fontSize = 144,
+  color = palette.amber,
+  fontFamily = "Geist Mono, monospace",
+  reduceMotion = false,
+  style,
+}) => {
+  const frame = useCurrentFrame();
+  const local = Math.max(0, frame - startFrame);
+  const tRaw = Math.min(1, local / durationFrames);
+  // power4Out — matches utils/easing.ts ease.power4Out
+  const t = reduceMotion ? 1 : 1 - Math.pow(1 - tRaw, 4);
+  const value = reduceMotion ? toValue : Math.round(fromValue + (toValue - fromValue) * t);
+  const blur = reduceMotion ? 0 : (1 - t) * 12; // px
+  const scale = reduceMotion ? 1 : 0.92 + t * 0.08;
+
+  return (
+    <span
+      style={{
+        display: "inline-block",
+        fontFamily,
+        fontSize,
+        fontWeight: 700,
+        letterSpacing: -2,
+        color,
+        textShadow: `0 0 60px ${palette.amberGlow}`,
+        filter: `blur(${blur}px)`,
+        transform: `scale(${scale})`,
+        transformOrigin: "center",
+        ...style,
+      }}
+    >
+      {prefix}
+      {value.toLocaleString()}
+      {suffix}
+    </span>
+  );
+};

package/families/warm/components/WarmSurface.tsx

@@ -0,0 +1,35 @@
+import React, { CSSProperties, ReactNode } from "react";
+import { AbsoluteFill } from "remotion";
+import { palette } from "../palette";
+
+/**
+ * WarmSurface — full-bleed `AbsoluteFill` painted with `palette.surfaceWarm`.
+ *
+ * The family's "stage". Wraps every Warm Signature scene as the bottom-most
+ * layer. Use this instead of inlining
+ * `<AbsoluteFill style={{ background: palette.surfaceWarm }}>` so future
+ * palette tweaks (e.g. adjusting the warm-zinc base) propagate everywhere.
+ *
+ * Stack order (bottom → top):
+ *   <WarmSurface>
+ *     <FilmGrain />          ← multiply
+ *     <AccentGlow />         ← screen
+ *     <Sequence>...scenes... ← foreground
+ *     <SafeZones visible={false} />
+ *   </WarmSurface>
+ */
+export const WarmSurface: React.FC<{
+  style?: CSSProperties;
+  children?: ReactNode;
+}> = ({ style, children }) => (
+  <AbsoluteFill
+    style={{
+      background: palette.surfaceWarm,
+      fontFamily: "Geist, system-ui",
+      color: palette.fg,
+      ...style,
+    }}
+  >
+    {children}
+  </AbsoluteFill>
+);

package/families/warm/components/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Warm Signature — primitive components index.
+ * Scaffold templates import from here:
+ *   import { AccentGlow, FilmGrain, ... } from "@devinilabs/reelstack/families/warm/components";
+ */
+export { AccentGlow } from "./AccentGlow";
+export { FilmGrain } from "./FilmGrain";
+export { BentoGrid } from "./BentoGrid";
+export { BentoCell } from "./BentoCell";
+export { WarmSurface } from "./WarmSurface";
+export { ScaleBlurCounter } from "./ScaleBlurCounter";