@devinilabs/reelstack 1.2.0

package/families/forbidden/typography.ts

@@ -0,0 +1,18 @@
+/** Forbidden typography scale. Geist Sans + Geist Mono only.
+ *  Slightly larger body / caption rhythm than Glass — matches HereticReel's
+ *  declassified-document feel. Pulled from existing template usage
+ *  (h1 84, h2 48, body 36); locks the implicit scale into named tokens.
+ *  Text colors come from palette (ink / inkSoft / inkMuted) — 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: 84, 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: 36, fontWeight: 500, letterSpacing: -0.2, lineHeight: 1.45, fontFamily: "Geist, system-ui" },
+  caption: { fontSize: 22, fontWeight: 500, letterSpacing: 0.5, lineHeight: 1.4, fontFamily: "Geist, system-ui", textTransform: "uppercase" as const },
+  mono: { fontSize: 24, 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/glass/components/BreakdownCard.tsx

@@ -0,0 +1,158 @@
+import React, { CSSProperties } from "react";
+import { spring, useCurrentFrame, useVideoConfig } from "remotion";
+import { palette } from "../palette";
+
+/**
+ * BreakdownCard — glass card with a filename header, accent dot, and arrow rows.
+ *
+ * Source: ClaudeWatchReel "Type. Paste. Watch." scene — the BREAKDOWN.MD lower
+ * callout (around line 1307) showing what the skill extracted from a video.
+ * The same shape doubles as a TRIGGERS.MD / FEATURES.MD / NOTES.MD anywhere a
+ * reel needs a "structured output" beat.
+ *
+ * Use when: a scene needs to reveal 1–4 mono rows of "what was extracted"
+ * style content, anchored under a hero illustration. The blinking-cursor
+ * variant evokes terminal output finishing in real time.
+ *
+ * Behavior: glass-card surface (mirrors `GlassCard` variant=`strong` shadows
+ * + blur). Title row shows accent dot + uppercase Geist-Mono filename. Each
+ * row springs in with a 4-frame stagger (gentle damping). Optional 6px-wide
+ * blinking cursor toggles every 15 frames after the last row finishes.
+ */
+export const BreakdownCard: React.FC<{
+  title?: string;
+  accentColor?: string;
+  rows: { arrow?: string; left: string; right?: string; rightAccent?: string }[];
+  startFrame?: number;
+  cursor?: boolean;
+  style?: CSSProperties;
+}> = ({
+  title = "BREAKDOWN.MD",
+  accentColor = "#FF7A4D",
+  rows,
+  startFrame = 0,
+  cursor = true,
+  style,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const local = Math.max(0, frame - startFrame);
+
+  // Title row entrance
+  const titleT = spring({
+    frame: local,
+    fps,
+    config: { damping: 15, stiffness: 80 },
+  });
+
+  // Cursor begins blinking after the last row has had time to settle.
+  const lastRowStart = rows.length * 4 + 14;
+  const cursorVisible =
+    cursor && local >= lastRowStart
+      ? Math.floor((local - lastRowStart) / 15) % 2 === 0
+      : false;
+
+  return (
+    <div
+      style={{
+        maxWidth: 720,
+        background: palette.glassFillStrong,
+        backdropFilter: "blur(20px) saturate(180%)",
+        WebkitBackdropFilter: "blur(20px) saturate(180%)",
+        border: `1.5px solid ${palette.glassBorder}`,
+        borderRadius: 24,
+        padding: 32,
+        boxShadow: [
+          "0 1px 0 rgba(255,255,255,0.7) inset",
+          "0 -1px 0 rgba(255,255,255,0.3) inset",
+          "0 8px 24px rgba(20,20,32,0.10)",
+          "0 32px 64px rgba(20,20,32,0.14)",
+        ].join(", "),
+        fontFamily: "Geist Mono, monospace",
+        opacity: titleT,
+        transform: `translateY(${(1 - titleT) * 14}px)`,
+        ...style,
+      }}
+    >
+      {/* Title row */}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 12,
+          marginBottom: 18,
+          fontSize: 18,
+          color: palette.inkMuted,
+          letterSpacing: "0.14em",
+          fontWeight: 700,
+          textTransform: "uppercase",
+        }}
+      >
+        <div
+          style={{
+            width: 10,
+            height: 10,
+            borderRadius: "50%",
+            background: accentColor,
+            boxShadow: `0 0 14px ${accentColor}`,
+          }}
+        />
+        <span>{title}</span>
+        {cursor ? (
+          <span
+            style={{
+              marginLeft: "auto",
+              display: "inline-block",
+              width: 6,
+              height: 22,
+              background: cursorVisible ? palette.ink : "transparent",
+            }}
+          />
+        ) : null}
+      </div>
+
+      {/* Rows */}
+      {rows.map((row, i) => {
+        const rowLocal = local - (i + 1) * 4;
+        const t = spring({
+          frame: Math.max(0, rowLocal),
+          fps,
+          config: { damping: 15, stiffness: 80 },
+        });
+        const arrow = row.arrow ?? "→";
+        return (
+          <div
+            key={i}
+            style={{
+              display: "flex",
+              alignItems: "baseline",
+              gap: 12,
+              fontSize: 26,
+              fontWeight: 600,
+              color: palette.ink,
+              letterSpacing: "0.02em",
+              lineHeight: 1.55,
+              opacity: t,
+              transform: `translateY(${(1 - t) * 12}px)`,
+              willChange: "transform, opacity",
+            }}
+          >
+            <span style={{ color: accentColor, flexShrink: 0 }}>{arrow}</span>
+            <span style={{ flex: 1 }}>{row.left}</span>
+            {row.right ? (
+              <span
+                style={{
+                  color: row.rightAccent ?? accentColor,
+                  fontWeight: 700,
+                  flexShrink: 0,
+                }}
+              >
+                {row.right}
+              </span>
+            ) : null}
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/families/glass/components/CausticBlobs.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { AbsoluteFill, useCurrentFrame } from "remotion";
+import { palette, gradients } from "../palette";
+
+/**
+ * CausticBlobs — animated radial gradients drifting on sine paths.
+ *
+ * Simulates underwater light refraction. The signature background motion of
+ * the Glass Iridescent family. Stack 4 blobs (one per iridescent stop) and
+ * the result reads as living, premium glass.
+ *
+ * Frame-budget: cheap. 4 absolutely-positioned divs with CSS gradients only.
+ */
+export const CausticBlobs: React.FC<{
+  intensity?: number; // 0..1 — overall opacity multiplier
+  reduceMotion?: boolean;
+}> = ({ intensity = 1, reduceMotion = false }) => {
+  const frame = useCurrentFrame();
+  const blobs = [
+    { gradient: gradients.causticCyan,    speedX: 0.0040, speedY: 0.0030, size: 1200 },
+    { gradient: gradients.causticViolet,  speedX: 0.0033, speedY: 0.0042, size: 1100 },
+    { gradient: gradients.causticRose,    speedX: 0.0027, speedY: 0.0035, size: 1300 },
+    { gradient: gradients.causticGold,    speedX: 0.0046, speedY: 0.0024, size: 1000 },
+  ];
+  return (
+    <AbsoluteFill style={{ background: palette.bg, opacity: intensity }}>
+      {blobs.map((b, i) => {
+        const cx = reduceMotion ? 0.5 : 0.5 + 0.35 * Math.sin(frame * b.speedX + i);
+        const cy = reduceMotion ? 0.5 : 0.5 + 0.30 * Math.cos(frame * b.speedY + i * 1.3);
+        return (
+          <div
+            key={i}
+            style={{
+              position: "absolute",
+              left: `${cx * 100 - 50}%`,
+              top:  `${cy * 100 - 50}%`,
+              width: b.size,
+              height: b.size,
+              background: b.gradient,
+              filter: "blur(60px)",
+              mixBlendMode: "screen",
+              pointerEvents: "none",
+            }}
+          />
+        );
+      })}
+    </AbsoluteFill>
+  );
+};

package/families/glass/components/Counter.tsx

@@ -0,0 +1,72 @@
+import React, { CSSProperties } from "react";
+import { useCurrentFrame } from "remotion";
+import { palette } from "../palette";
+
+/**
+ * Counter — numeric ticker. Animates from 0 (or fromValue) to target with a
+ * power4Out easing curve. Snaps to integers per frame. Scale + blur entrance.
+ *
+ * 5-digit MONO counters cap at 256px width per house rules — be careful with
+ * fontSize × digit-count.
+ */
+export const Counter: React.FC<{
+  startFrame: number;
+  durationFrames?: number;
+  fromValue?: number;
+  toValue: number;
+  prefix?: string;
+  suffix?: string;
+  fontSize?: number;
+  color?: string;
+  fontFamily?: string;
+  maxWidth?: number;
+  reduceMotion?: boolean;
+  style?: CSSProperties;
+}> = ({
+  startFrame,
+  durationFrames = 36,
+  fromValue = 0,
+  toValue,
+  prefix = "",
+  suffix = "",
+  fontSize = 144,
+  color = palette.ink,
+  fontFamily = "Geist Mono, monospace",
+  maxWidth = 256,
+  reduceMotion = false,
+  style,
+}) => {
+  const frame = useCurrentFrame();
+  const local = Math.max(0, frame - startFrame);
+  const tRaw = Math.min(1, local / durationFrames);
+  // 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,
+        filter: `blur(${blur}px)`,
+        transform: `scale(${scale})`,
+        transformOrigin: "center",
+        maxWidth,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        ...style,
+      }}
+    >
+      {prefix}
+      {value.toLocaleString()}
+      {suffix}
+    </span>
+  );
+};

package/families/glass/components/EyebrowPill.tsx

@@ -0,0 +1,59 @@
+import React, { CSSProperties, ReactNode } from "react";
+import { spring, useCurrentFrame, useVideoConfig } from "remotion";
+import { palette } from "../palette";
+
+/**
+ * EyebrowPill — small contextual label that springs in at a beat.
+ *
+ * Iridescent background, 1.5px border, gentle spring entrance (damping 15,
+ * stiffness 80). Used as a "chapter mark" callout above hero text.
+ */
+export const EyebrowPill: React.FC<{
+  startFrame: number;
+  tint?: "violet" | "teal";
+  reduceMotion?: boolean;
+  style?: CSSProperties;
+  children?: ReactNode;
+}> = ({ startFrame, tint = "violet", 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: 15, stiffness: 80 } });
+
+  const bg = tint === "violet" ? palette.violetPill : palette.tealPill;
+
+  return (
+    <div
+      style={{
+        display: "inline-flex",
+        // Hug content even when parent is a flex/grid that would otherwise
+        // stretch us. inline-flex alone is not enough — flex parents apply
+        // align-items: stretch by default on the cross axis.
+        alignSelf: "flex-start",
+        width: "max-content",
+        maxWidth: "100%",
+        alignItems: "center",
+        gap: 8,
+        padding: "10px 18px",
+        borderRadius: 999,
+        background: `${bg}38`, // ~22% alpha
+        border: `1.5px solid ${bg}AA`,
+        color: palette.ink,
+        fontFamily: "Geist, system-ui",
+        fontSize: 22,
+        fontWeight: 600,
+        letterSpacing: 0.5,
+        textTransform: "uppercase",
+        opacity: t,
+        transform: reduceMotion
+          ? "none"
+          : `translateY(${(1 - t) * 12}px) scale(${0.95 + t * 0.05})`,
+        ...style,
+      }}
+    >
+      {children}
+    </div>
+  );
+};

package/families/glass/components/FilmStrip.tsx

@@ -0,0 +1,202 @@
+import React, { CSSProperties } from "react";
+import { interpolate, useCurrentFrame } from "remotion";
+import { palette } from "../palette";
+
+/**
+ * FilmStrip — perforated 35mm film roll with colored play-button thumbnails.
+ *
+ * Source: ClaudeWatchReel "Type. Paste. Watch." scene (frames 491–717). The
+ * centerpiece illustration of a video being scrubbed frame-by-frame.
+ *
+ * Use when: a reel needs to communicate "video / frame / playback" without
+ * dropping in actual footage. Pair with a vertical scan beam (LightBeam) and
+ * a BreakdownCard underneath for the full ClaudeWatch deluxe look.
+ *
+ * Behavior: each tile reveals with translateY(20px) + scale(0.94→1) + opacity
+ * 0→1 over 14 frames, staggered by `staggerFrames`. Each tile shows a centered
+ * play-triangle. If `playheadSpeed > 0`, a vertical scrubber line sweeps
+ * left→right across the strip, looping.
+ */
+export const FilmStrip: React.FC<{
+  tiles: { color: string; gradient?: string; label?: string }[];
+  startFrame?: number;
+  staggerFrames?: number;
+  playheadSpeed?: number; // 0 disables the playhead; >0 = canvas-px per frame
+  style?: CSSProperties;
+}> = ({
+  tiles,
+  startFrame = 0,
+  staggerFrames = 4,
+  playheadSpeed = 0,
+  style,
+}) => {
+  const frame = useCurrentFrame();
+  const local = Math.max(0, frame - startFrame);
+
+  const tileWidth = 140;
+  const tileGap = 12;
+  const stripPadX = 16;
+  const sprocketBand = 16;
+  const stripHeight = 200;
+
+  const stripWidth =
+    tiles.length * tileWidth + Math.max(0, tiles.length - 1) * tileGap + stripPadX * 2;
+
+  // Playhead sweeps left→right and loops
+  const innerWidth = stripWidth - stripPadX * 2;
+  const playheadX =
+    playheadSpeed > 0
+      ? stripPadX + ((local * playheadSpeed) % innerWidth)
+      : 0;
+
+  return (
+    <div
+      style={{
+        position: "relative",
+        display: "inline-block",
+        width: stripWidth,
+        height: stripHeight,
+        background: palette.ink,
+        borderRadius: 6,
+        overflow: "hidden",
+        boxShadow:
+          "0 6px 14px -6px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.08)",
+        ...style,
+      }}
+    >
+      {/* Sprocket holes — top */}
+      <div
+        style={{
+          position: "absolute",
+          top: 4,
+          left: 0,
+          right: 0,
+          height: 12,
+          backgroundImage: `repeating-linear-gradient(90deg, ${palette.bg} 0 14px, transparent 14px 30px)`,
+          opacity: 0.85,
+          pointerEvents: "none",
+        }}
+      />
+      {/* Sprocket holes — bottom */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: 4,
+          left: 0,
+          right: 0,
+          height: 12,
+          backgroundImage: `repeating-linear-gradient(90deg, ${palette.bg} 0 14px, transparent 14px 30px)`,
+          opacity: 0.85,
+          pointerEvents: "none",
+        }}
+      />
+
+      {/* Tiles */}
+      <div
+        style={{
+          position: "absolute",
+          top: sprocketBand + 6,
+          bottom: sprocketBand + 6,
+          left: stripPadX,
+          right: stripPadX,
+          display: "flex",
+          gap: tileGap,
+        }}
+      >
+        {tiles.map((tile, i) => {
+          const tileLocal = local - i * staggerFrames;
+          const t = interpolate(tileLocal, [0, 14], [0, 1], {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp",
+          });
+          const scale = 0.94 + t * 0.06;
+          const y = (1 - t) * 20;
+          const bg =
+            tile.gradient ??
+            `linear-gradient(135deg, ${palette.inkSoft}, ${tile.color}99)`;
+          return (
+            <div
+              key={i}
+              style={{
+                width: tileWidth,
+                height: "100%",
+                borderRadius: 4,
+                background: bg,
+                boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.18)",
+                position: "relative",
+                opacity: t,
+                transform: `translateY(${y}px) scale(${scale})`,
+                willChange: "transform, opacity",
+              }}
+            >
+              {/* Play triangle */}
+              <div
+                style={{
+                  position: "absolute",
+                  top: "50%",
+                  left: "50%",
+                  transform: "translate(-50%,-50%)",
+                  width: 0,
+                  height: 0,
+                  borderTop: "10px solid transparent",
+                  borderBottom: "10px solid transparent",
+                  borderLeft: "16px solid rgba(255,255,255,0.55)",
+                }}
+              />
+              {tile.label ? (
+                <div
+                  style={{
+                    position: "absolute",
+                    bottom: 6,
+                    left: 8,
+                    right: 8,
+                    fontFamily: "Geist Mono, monospace",
+                    fontSize: 10,
+                    fontWeight: 600,
+                    color: "rgba(255,255,255,0.78)",
+                    letterSpacing: "0.08em",
+                    textTransform: "uppercase",
+                    pointerEvents: "none",
+                  }}
+                >
+                  {tile.label}
+                </div>
+              ) : null}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Vertical scrubber playhead */}
+      {playheadSpeed > 0 ? (
+        <>
+          <div
+            style={{
+              position: "absolute",
+              top: -4,
+              bottom: -4,
+              left: playheadX,
+              width: 4,
+              background: `linear-gradient(180deg, transparent, ${palette.iriCyan}, transparent)`,
+              boxShadow: `0 0 24px ${palette.iriCyan}, 0 0 48px ${palette.iriCyan}88`,
+              transform: "translateX(-50%)",
+              pointerEvents: "none",
+            }}
+          />
+          <div
+            style={{
+              position: "absolute",
+              top: 0,
+              bottom: 0,
+              left: playheadX,
+              width: 120,
+              background: `radial-gradient(ellipse at center, ${palette.iriCyan}33, transparent 60%)`,
+              transform: "translateX(-50%)",
+              pointerEvents: "none",
+            }}
+          />
+        </>
+      ) : null}
+    </div>
+  );
+};

package/families/glass/components/FloatingGlyphs.tsx

@@ -0,0 +1,78 @@
+import React, { useMemo } from "react";
+import { useCurrentFrame } from "remotion";
+import { palette } from "../palette";
+
+/**
+ * FloatingGlyphs — unicode math/code symbols drifting on sine paths.
+ *
+ * House rule: NEVER emojis. Always unicode math/code symbols.
+ * Default set: ± ∞ ∑ ⟨ ⟩ ∫ ≠ ∂ ∇ ⊕ ⊗.
+ *
+ * Glyphs fade as they approach canvas edges so they don't distract from
+ * the hero subject.
+ */
+export const FloatingGlyphs: React.FC<{
+  count?: number;
+  glyphs?: string[];
+  fontSize?: number;
+  speed?: number;
+  color?: string;
+  reduceMotion?: boolean;
+}> = ({
+  count = 14,
+  glyphs = ["±", "∞", "∑", "⟨", "⟩", "∫", "≠", "∂", "∇", "⊕", "⊗"],
+  fontSize = 36,
+  speed = 0.0009,
+  color = palette.inkMuted,
+  reduceMotion = false,
+}) => {
+  const frame = useCurrentFrame();
+  const items = useMemo(() => {
+    return Array.from({ length: count }).map((_, i) => {
+      const seed = i * 137;
+      return {
+        glyph: glyphs[i % glyphs.length],
+        baseX: ((seed * 53) % 1000) / 1000,        // 0..1
+        baseY: ((seed * 71) % 1000) / 1000,
+        amplitudeX: 0.06 + ((seed * 17) % 100) / 1500,
+        amplitudeY: 0.04 + ((seed * 23) % 100) / 1800,
+        phase: (i * 0.27) % (Math.PI * 2),
+      };
+    });
+  }, [count, glyphs]);
+
+  return (
+    <div
+      style={{ position: "absolute", inset: 0, pointerEvents: "none", overflow: "hidden" }}
+    >
+      {items.map((g, i) => {
+        const t = frame * speed + g.phase;
+        const x = reduceMotion ? g.baseX * 100 : (g.baseX + Math.sin(t * 7 + i) * g.amplitudeX) * 100;
+        const y = reduceMotion ? g.baseY * 100 : (g.baseY + Math.cos(t * 5 + i) * g.amplitudeY) * 100;
+        // edge fade — fade out within 8% of any edge
+        const fade = Math.max(
+          0,
+          Math.min(1, (Math.min(x, 100 - x, y, 100 - y) - 4) / 6),
+        );
+        return (
+          <span
+            key={i}
+            style={{
+              position: "absolute",
+              left: `${x}%`,
+              top:  `${y}%`,
+              transform: "translate(-50%, -50%)",
+              fontFamily: "Geist Mono, monospace",
+              fontSize,
+              fontWeight: 500,
+              color,
+              opacity: 0.42 * fade,
+            }}
+          >
+            {g.glyph}
+          </span>
+        );
+      })}
+    </div>
+  );
+};

package/families/glass/components/GlassCard.tsx

@@ -0,0 +1,58 @@
+import React, { CSSProperties, ReactNode } from "react";
+import { palette } from "../palette";
+
+/**
+ * GlassCard — frosted-glass surface. The Glass family's most-used primitive.
+ *
+ * Variants:
+ *   - "default" — backdropFilter blur(16px), rgba 0.42 fill
+ *   - "strong"  — rgba 0.62 fill, blur(20px)
+ *   - "heavy"   — rgba 0.62 fill, blur(32px) saturate(180%) — gstack feel
+ *
+ * Multi-layer shadow stack reads as printed glass, not flat overlay.
+ */
+export const GlassCard: React.FC<{
+  variant?: "default" | "strong" | "heavy";
+  radius?: number;
+  padding?: number | string;
+  bezel?: boolean;
+  style?: CSSProperties;
+  children?: ReactNode;
+}> = ({ variant = "default", radius = 24, padding = 32, bezel = false, style, children }) => {
+  const fills = {
+    default: palette.glassFill,
+    strong:  palette.glassFillStrong,
+    heavy:   palette.glassFillStrong,
+  };
+  const blurs = {
+    default: "blur(16px)",
+    strong:  "blur(20px)",
+    heavy:   "blur(32px) saturate(180%)",
+  };
+  const baseShadows = [
+    "0 1px 0 rgba(255,255,255,0.7) inset",
+    "0 -1px 0 rgba(255,255,255,0.3) inset",
+    "0 8px 24px rgba(20,20,32,0.10)",
+    "0 32px 64px rgba(20,20,32,0.14)",
+  ];
+  // Soft Double-Bezel: inner 1px white border at radius - 1
+  const shadows = bezel
+    ? ["inset 0 0 0 1px rgba(255,255,255,0.6)", ...baseShadows]
+    : baseShadows;
+  return (
+    <div
+      style={{
+        background: fills[variant],
+        backdropFilter: blurs[variant],
+        WebkitBackdropFilter: blurs[variant],
+        border: `1.5px solid ${palette.glassBorder}`,
+        borderRadius: radius,
+        padding,
+        boxShadow: shadows.join(", "),
+        ...style,
+      }}
+    >
+      {children}
+    </div>
+  );
+};