@rdna/radiants 0.1.0

package/dist/remotion/index.d.mts

@@ -0,0 +1,252 @@
+import { Easing, SpringConfig } from 'remotion';
+
+/**
+ * @dna/radiants - Remotion Duration Utilities
+ *
+ * Maps DNA motion tokens to Remotion frame counts.
+ * Aligns with CSS duration tokens from animations.css.
+ */
+/** Duration tokens in milliseconds, matching DNA motion spec */
+declare const DURATION_MS: {
+    readonly instant: 0;
+    readonly fast: 100;
+    readonly base: 150;
+    readonly moderate: 200;
+    readonly slow: 300;
+};
+type DurationToken = keyof typeof DURATION_MS;
+/**
+ * Convert a DNA duration token to frame count for Remotion.
+ *
+ * @param token - DNA duration token or milliseconds
+ * @param fps - Frames per second (default: 30)
+ * @returns Number of frames
+ *
+ * @example
+ * ```ts
+ * durationToFrames('fast', 30);     // 3 frames
+ * durationToFrames('base', 60);     // 9 frames
+ * durationToFrames(200, 30);        // 6 frames (raw ms)
+ * ```
+ */
+declare function durationToFrames(token: DurationToken | number, fps?: number): number;
+/**
+ * Convert frame count back to milliseconds.
+ *
+ * @param frames - Number of frames
+ * @param fps - Frames per second (default: 30)
+ * @returns Duration in milliseconds
+ */
+declare function framesToMs(frames: number, fps?: number): number;
+/**
+ * Get the closest DNA duration token for a given millisecond value.
+ *
+ * @param ms - Duration in milliseconds
+ * @returns Closest DNA duration token
+ */
+declare function msToToken(ms: number): DurationToken;
+
+/**
+ * @dna/radiants - Remotion Easing Curves
+ *
+ * DNA easing curves implemented via Remotion's Easing.bezier().
+ * Matches CSS custom properties: --easing-default, --easing-out, --easing-in
+ */
+
+/**
+ * DNA easing curves for Remotion interpolations.
+ *
+ * These match the CSS custom properties defined in the DNA spec:
+ * - default/out: cubic-bezier(0, 0, 0.2, 1) - ease-out curve for most animations
+ * - in: cubic-bezier(0.4, 0, 1, 1) - ease-in for exit animations
+ *
+ * @example
+ * ```ts
+ * import { interpolate } from 'remotion';
+ * import { dnaEasing } from '@dna/radiants/remotion';
+ *
+ * const opacity = interpolate(frame, [0, 30], [0, 1], {
+ *   easing: dnaEasing.default,
+ * });
+ * ```
+ */
+declare const dnaEasing: {
+    /** Standard ease-out curve (--easing-default) */
+    readonly default: (t: number) => number;
+    /** Ease-out curve for enter animations (--easing-out) */
+    readonly out: (t: number) => number;
+    /** Ease-in curve for exit animations (--easing-in) */
+    readonly in: (t: number) => number;
+    /** Linear easing for constant-rate animations */
+    readonly linear: typeof Easing.linear;
+};
+type EasingToken = keyof typeof dnaEasing;
+/**
+ * Get an easing function by token name.
+ *
+ * @param token - Easing token name
+ * @returns Remotion easing function
+ */
+declare function getEasing(token: EasingToken): (t: number) => number;
+
+/**
+ * @dna/radiants - Remotion Spring Presets
+ *
+ * Pre-configured spring configurations for physics-based animations.
+ * These provide natural motion that aligns with DNA timing guidelines.
+ */
+
+/**
+ * DNA spring presets for Remotion's spring() function.
+ *
+ * Each preset is tuned to approximate DNA duration tokens:
+ * - snappy: ~100-150ms feel, for quick micro-interactions
+ * - gentle: ~150-200ms feel, for standard UI transitions
+ * - stiff: ~200-300ms feel, for deliberate/heavy elements
+ *
+ * @example
+ * ```ts
+ * import { spring, useCurrentFrame, useVideoConfig } from 'remotion';
+ * import { dnaSpring } from '@dna/radiants/remotion';
+ *
+ * const { fps } = useVideoConfig();
+ * const frame = useCurrentFrame();
+ *
+ * const scale = spring({
+ *   frame,
+ *   fps,
+ *   config: dnaSpring.snappy,
+ * });
+ * ```
+ */
+declare const dnaSpring: {
+    /** Fast, responsive spring (~100-150ms) for micro-interactions */
+    readonly snappy: {
+        damping: number;
+        mass: number;
+        stiffness: number;
+        overshootClamping: false;
+    };
+    /** Balanced spring (~150-200ms) for standard transitions */
+    readonly gentle: {
+        damping: number;
+        mass: number;
+        stiffness: number;
+        overshootClamping: false;
+    };
+    /** Slower spring (~200-300ms) for deliberate, weighty motion */
+    readonly stiff: {
+        damping: number;
+        mass: number;
+        stiffness: number;
+        overshootClamping: false;
+    };
+    /** Bouncy spring for playful, attention-grabbing animations */
+    readonly bouncy: {
+        damping: number;
+        mass: number;
+        stiffness: number;
+        overshootClamping: false;
+    };
+};
+type SpringPreset = keyof typeof dnaSpring;
+/**
+ * Get a spring configuration by preset name.
+ *
+ * @param preset - Spring preset name
+ * @returns Remotion SpringConfig object
+ */
+declare function getSpringConfig(preset: SpringPreset): SpringConfig;
+
+/**
+ * @dna/radiants - useMotion Hook
+ *
+ * High-level animation hook that provides DNA-styled motion for Remotion compositions.
+ * Supports both easing-based and spring-based animations.
+ */
+
+/** Supported animation types */
+type MotionType = 'fade' | 'slideUp' | 'slideDown' | 'slideLeft' | 'slideRight' | 'scale' | 'scaleUp';
+/** Configuration for useMotion hook */
+interface UseMotionConfig {
+    /** Animation type to apply */
+    type: MotionType;
+    /** Duration as DNA token or milliseconds (default: 'base') */
+    duration?: DurationToken | number;
+    /** Easing curve token (default: 'default') */
+    easing?: EasingToken;
+    /** Spring preset for physics-based motion */
+    spring?: SpringPreset;
+    /** Animation mode: 'easing' for bezier curves, 'spring' for physics (default: 'easing') */
+    mode?: 'easing' | 'spring';
+    /** Delay in frames before animation starts (default: 0) */
+    delay?: number;
+    /** Custom start frame (default: uses delay) */
+    from?: number;
+}
+/** Return type for useMotion hook */
+interface UseMotionResult {
+    /** Current opacity value (0-1) */
+    opacity: number;
+    /** Current transform string */
+    transform: string;
+    /** Combined style object ready for use */
+    style: React.CSSProperties;
+    /** Current animation progress (0-1) */
+    progress: number;
+    /** Whether animation has completed */
+    isComplete: boolean;
+}
+/**
+ * High-level animation hook for DNA-styled motion in Remotion.
+ *
+ * Provides pre-configured animation patterns that match DNA motion guidelines.
+ * Supports both easing-based (bezier curves) and spring-based (physics) animations.
+ *
+ * @example
+ * ```tsx
+ * // Simple fade animation
+ * const { style } = useMotion({ type: 'fade' });
+ * return <div style={style}>Content</div>;
+ *
+ * // Slide up with custom duration
+ * const { style } = useMotion({
+ *   type: 'slideUp',
+ *   duration: 'slow',
+ *   easing: 'out',
+ * });
+ *
+ * // Spring-based scale animation
+ * const { style } = useMotion({
+ *   type: 'scale',
+ *   mode: 'spring',
+ *   spring: 'snappy',
+ * });
+ *
+ * // Staggered list items
+ * const delay = durationToFrames('fast', fps);
+ * items.map((item, i) => (
+ *   <Item style={useMotion({ type: 'slideUp', delay: i * delay }).style} />
+ * ));
+ * ```
+ */
+declare function useMotion(config: UseMotionConfig): UseMotionResult;
+/**
+ * Create a stagger delay calculator for list animations.
+ *
+ * @param staggerMs - Delay between each item in milliseconds
+ * @param fps - Frames per second
+ * @returns Function that returns delay in frames for a given index
+ *
+ * @example
+ * ```tsx
+ * const getDelay = createStagger(50, fps);
+ *
+ * items.map((item, i) => (
+ *   <Item style={useMotion({ type: 'slideUp', delay: getDelay(i) }).style} />
+ * ));
+ * ```
+ */
+declare function createStagger(staggerMs: number, fps: number): (index: number) => number;
+
+export { DURATION_MS, type DurationToken, type EasingToken, type MotionType, type SpringPreset, type UseMotionConfig, type UseMotionResult, createStagger, dnaEasing, dnaSpring, durationToFrames, framesToMs, getEasing, getSpringConfig, msToToken, useMotion };

package/dist/remotion/index.mjs

@@ -0,0 +1,170 @@
+import { Easing, useCurrentFrame, useVideoConfig, spring, interpolate } from 'remotion';
+
+// remotion/durations.ts
+var DURATION_MS = {
+  instant: 0,
+  fast: 100,
+  base: 150,
+  moderate: 200,
+  slow: 300
+};
+function durationToFrames(token, fps = 30) {
+  const ms = typeof token === "number" ? token : DURATION_MS[token];
+  return Math.round(ms / 1e3 * fps);
+}
+function framesToMs(frames, fps = 30) {
+  return Math.round(frames / fps * 1e3);
+}
+function msToToken(ms) {
+  const tokens = Object.entries(DURATION_MS);
+  let closest = tokens[0];
+  for (const [token, value] of tokens) {
+    if (Math.abs(value - ms) < Math.abs(closest[1] - ms)) {
+      closest = [token, value];
+    }
+  }
+  return closest[0];
+}
+var dnaEasing = {
+  /** Standard ease-out curve (--easing-default) */
+  default: Easing.bezier(0, 0, 0.2, 1),
+  /** Ease-out curve for enter animations (--easing-out) */
+  out: Easing.bezier(0, 0, 0.2, 1),
+  /** Ease-in curve for exit animations (--easing-in) */
+  in: Easing.bezier(0.4, 0, 1, 1),
+  /** Linear easing for constant-rate animations */
+  linear: Easing.linear
+};
+function getEasing(token) {
+  return dnaEasing[token];
+}
+
+// remotion/springs.ts
+var dnaSpring = {
+  /** Fast, responsive spring (~100-150ms) for micro-interactions */
+  snappy: {
+    damping: 20,
+    mass: 0.5,
+    stiffness: 400,
+    overshootClamping: false
+  },
+  /** Balanced spring (~150-200ms) for standard transitions */
+  gentle: {
+    damping: 25,
+    mass: 1,
+    stiffness: 200,
+    overshootClamping: false
+  },
+  /** Slower spring (~200-300ms) for deliberate, weighty motion */
+  stiff: {
+    damping: 30,
+    mass: 1.2,
+    stiffness: 150,
+    overshootClamping: false
+  },
+  /** Bouncy spring for playful, attention-grabbing animations */
+  bouncy: {
+    damping: 12,
+    mass: 0.8,
+    stiffness: 300,
+    overshootClamping: false
+  }
+};
+function getSpringConfig(preset) {
+  return dnaSpring[preset];
+}
+var SLIDE_DISTANCE = 20;
+var SCALE_FROM = 0.95;
+function useMotion(config) {
+  const {
+    type,
+    duration = "base",
+    easing = "default",
+    spring: springPreset = "gentle",
+    mode = "easing",
+    delay = 0,
+    from
+  } = config;
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const startFrame = from ?? delay;
+  const adjustedFrame = Math.max(0, frame - startFrame);
+  let progress;
+  if (mode === "spring") {
+    progress = spring({
+      frame: adjustedFrame,
+      fps,
+      config: dnaSpring[springPreset]
+    });
+  } else {
+    const durationFrames = durationToFrames(duration, fps);
+    progress = interpolate(adjustedFrame, [0, durationFrames], [0, 1], {
+      easing: dnaEasing[easing],
+      extrapolateRight: "clamp"
+    });
+  }
+  const { opacity, transform } = getAnimationValues(type, progress);
+  const isComplete = progress >= 1;
+  return {
+    opacity,
+    transform,
+    style: {
+      opacity,
+      transform
+    },
+    progress,
+    isComplete
+  };
+}
+function getAnimationValues(type, progress) {
+  switch (type) {
+    case "fade":
+      return {
+        opacity: progress,
+        transform: "none"
+      };
+    case "slideUp":
+      return {
+        opacity: progress,
+        transform: `translateY(${interpolate(progress, [0, 1], [SLIDE_DISTANCE, 0])}px)`
+      };
+    case "slideDown":
+      return {
+        opacity: progress,
+        transform: `translateY(${interpolate(progress, [0, 1], [-SLIDE_DISTANCE, 0])}px)`
+      };
+    case "slideLeft":
+      return {
+        opacity: progress,
+        transform: `translateX(${interpolate(progress, [0, 1], [SLIDE_DISTANCE, 0])}px)`
+      };
+    case "slideRight":
+      return {
+        opacity: progress,
+        transform: `translateX(${interpolate(progress, [0, 1], [-SLIDE_DISTANCE, 0])}px)`
+      };
+    case "scale":
+      return {
+        opacity: progress,
+        transform: `scale(${interpolate(progress, [0, 1], [SCALE_FROM, 1])})`
+      };
+    case "scaleUp":
+      return {
+        opacity: progress,
+        transform: `scale(${interpolate(progress, [0, 1], [SCALE_FROM, 1])}) translateY(${interpolate(progress, [0, 1], [SLIDE_DISTANCE / 2, 0])}px)`
+      };
+    default:
+      return {
+        opacity: 1,
+        transform: "none"
+      };
+  }
+}
+function createStagger(staggerMs, fps) {
+  const staggerFrames = durationToFrames(staggerMs, fps);
+  return (index) => index * staggerFrames;
+}
+
+export { DURATION_MS, createStagger, dnaEasing, dnaSpring, durationToFrames, framesToMs, getEasing, getSpringConfig, msToToken, useMotion };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/remotion/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../remotion/durations.ts","../../remotion/easing.ts","../../remotion/springs.ts","../../remotion/useMotion.ts"],"names":[],"mappings":"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","file":"index.mjs","sourcesContent":["/**\n * @dna/radiants - Remotion Duration Utilities\n *\n * Maps DNA motion tokens to Remotion frame counts.\n * Aligns with CSS duration tokens from animations.css.\n */\n\n/** Duration tokens in milliseconds, matching DNA motion spec */\nexport const DURATION_MS = {\n  instant: 0,\n  fast: 100,\n  base: 150,\n  moderate: 200,\n  slow: 300,\n} as const;\n\nexport type DurationToken = keyof typeof DURATION_MS;\n\n/**\n * Convert a DNA duration token to frame count for Remotion.\n *\n * @param token - DNA duration token or milliseconds\n * @param fps - Frames per second (default: 30)\n * @returns Number of frames\n *\n * @example\n * ```ts\n * durationToFrames('fast', 30);     // 3 frames\n * durationToFrames('base', 60);     // 9 frames\n * durationToFrames(200, 30);        // 6 frames (raw ms)\n * ```\n */\nexport function durationToFrames(\n  token: DurationToken | number,\n  fps: number = 30\n): number {\n  const ms = typeof token === 'number' ? token : DURATION_MS[token];\n  return Math.round((ms / 1000) * fps);\n}\n\n/**\n * Convert frame count back to milliseconds.\n *\n * @param frames - Number of frames\n * @param fps - Frames per second (default: 30)\n * @returns Duration in milliseconds\n */\nexport function framesToMs(frames: number, fps: number = 30): number {\n  return Math.round((frames / fps) * 1000);\n}\n\n/**\n * Get the closest DNA duration token for a given millisecond value.\n *\n * @param ms - Duration in milliseconds\n * @returns Closest DNA duration token\n */\nexport function msToToken(ms: number): DurationToken {\n  const tokens = Object.entries(DURATION_MS) as [DurationToken, number][];\n  let closest = tokens[0];\n\n  for (const [token, value] of tokens) {\n    if (Math.abs(value - ms) < Math.abs(closest[1] - ms)) {\n      closest = [token, value];\n    }\n  }\n\n  return closest[0];\n}\n","/**\n * @dna/radiants - Remotion Easing Curves\n *\n * DNA easing curves implemented via Remotion's Easing.bezier().\n * Matches CSS custom properties: --easing-default, --easing-out, --easing-in\n */\n\nimport { Easing } from 'remotion';\n\n/**\n * DNA easing curves for Remotion interpolations.\n *\n * These match the CSS custom properties defined in the DNA spec:\n * - default/out: cubic-bezier(0, 0, 0.2, 1) - ease-out curve for most animations\n * - in: cubic-bezier(0.4, 0, 1, 1) - ease-in for exit animations\n *\n * @example\n * ```ts\n * import { interpolate } from 'remotion';\n * import { dnaEasing } from '@dna/radiants/remotion';\n *\n * const opacity = interpolate(frame, [0, 30], [0, 1], {\n *   easing: dnaEasing.default,\n * });\n * ```\n */\nexport const dnaEasing = {\n  /** Standard ease-out curve (--easing-default) */\n  default: Easing.bezier(0, 0, 0.2, 1),\n\n  /** Ease-out curve for enter animations (--easing-out) */\n  out: Easing.bezier(0, 0, 0.2, 1),\n\n  /** Ease-in curve for exit animations (--easing-in) */\n  in: Easing.bezier(0.4, 0, 1, 1),\n\n  /** Linear easing for constant-rate animations */\n  linear: Easing.linear,\n} as const;\n\nexport type EasingToken = keyof typeof dnaEasing;\n\n/**\n * Get an easing function by token name.\n *\n * @param token - Easing token name\n * @returns Remotion easing function\n */\nexport function getEasing(token: EasingToken): (t: number) => number {\n  return dnaEasing[token];\n}\n","/**\n * @dna/radiants - Remotion Spring Presets\n *\n * Pre-configured spring configurations for physics-based animations.\n * These provide natural motion that aligns with DNA timing guidelines.\n */\n\nimport type { SpringConfig } from 'remotion';\n\n/**\n * DNA spring presets for Remotion's spring() function.\n *\n * Each preset is tuned to approximate DNA duration tokens:\n * - snappy: ~100-150ms feel, for quick micro-interactions\n * - gentle: ~150-200ms feel, for standard UI transitions\n * - stiff: ~200-300ms feel, for deliberate/heavy elements\n *\n * @example\n * ```ts\n * import { spring, useCurrentFrame, useVideoConfig } from 'remotion';\n * import { dnaSpring } from '@dna/radiants/remotion';\n *\n * const { fps } = useVideoConfig();\n * const frame = useCurrentFrame();\n *\n * const scale = spring({\n *   frame,\n *   fps,\n *   config: dnaSpring.snappy,\n * });\n * ```\n */\nexport const dnaSpring = {\n  /** Fast, responsive spring (~100-150ms) for micro-interactions */\n  snappy: {\n    damping: 20,\n    mass: 0.5,\n    stiffness: 400,\n    overshootClamping: false,\n  } satisfies SpringConfig,\n\n  /** Balanced spring (~150-200ms) for standard transitions */\n  gentle: {\n    damping: 25,\n    mass: 1,\n    stiffness: 200,\n    overshootClamping: false,\n  } satisfies SpringConfig,\n\n  /** Slower spring (~200-300ms) for deliberate, weighty motion */\n  stiff: {\n    damping: 30,\n    mass: 1.2,\n    stiffness: 150,\n    overshootClamping: false,\n  } satisfies SpringConfig,\n\n  /** Bouncy spring for playful, attention-grabbing animations */\n  bouncy: {\n    damping: 12,\n    mass: 0.8,\n    stiffness: 300,\n    overshootClamping: false,\n  } satisfies SpringConfig,\n} as const;\n\nexport type SpringPreset = keyof typeof dnaSpring;\n\n/**\n * Get a spring configuration by preset name.\n *\n * @param preset - Spring preset name\n * @returns Remotion SpringConfig object\n */\nexport function getSpringConfig(preset: SpringPreset): SpringConfig {\n  return dnaSpring[preset];\n}\n","/**\n * @dna/radiants - useMotion Hook\n *\n * High-level animation hook that provides DNA-styled motion for Remotion compositions.\n * Supports both easing-based and spring-based animations.\n */\n\nimport { useCurrentFrame, useVideoConfig, spring, interpolate } from 'remotion';\nimport { DURATION_MS, durationToFrames, type DurationToken } from './durations';\nimport { dnaEasing, type EasingToken } from './easing';\nimport { dnaSpring, type SpringPreset } from './springs';\n\n/** Supported animation types */\nexport type MotionType =\n  | 'fade'\n  | 'slideUp'\n  | 'slideDown'\n  | 'slideLeft'\n  | 'slideRight'\n  | 'scale'\n  | 'scaleUp';\n\n/** Configuration for useMotion hook */\nexport interface UseMotionConfig {\n  /** Animation type to apply */\n  type: MotionType;\n  /** Duration as DNA token or milliseconds (default: 'base') */\n  duration?: DurationToken | number;\n  /** Easing curve token (default: 'default') */\n  easing?: EasingToken;\n  /** Spring preset for physics-based motion */\n  spring?: SpringPreset;\n  /** Animation mode: 'easing' for bezier curves, 'spring' for physics (default: 'easing') */\n  mode?: 'easing' | 'spring';\n  /** Delay in frames before animation starts (default: 0) */\n  delay?: number;\n  /** Custom start frame (default: uses delay) */\n  from?: number;\n}\n\n/** Return type for useMotion hook */\nexport interface UseMotionResult {\n  /** Current opacity value (0-1) */\n  opacity: number;\n  /** Current transform string */\n  transform: string;\n  /** Combined style object ready for use */\n  style: React.CSSProperties;\n  /** Current animation progress (0-1) */\n  progress: number;\n  /** Whether animation has completed */\n  isComplete: boolean;\n}\n\n/** Transform distances for slide animations */\nconst SLIDE_DISTANCE = 20;\n\n/** Scale values for scale animations */\nconst SCALE_FROM = 0.95;\n\n/**\n * High-level animation hook for DNA-styled motion in Remotion.\n *\n * Provides pre-configured animation patterns that match DNA motion guidelines.\n * Supports both easing-based (bezier curves) and spring-based (physics) animations.\n *\n * @example\n * ```tsx\n * // Simple fade animation\n * const { style } = useMotion({ type: 'fade' });\n * return <div style={style}>Content</div>;\n *\n * // Slide up with custom duration\n * const { style } = useMotion({\n *   type: 'slideUp',\n *   duration: 'slow',\n *   easing: 'out',\n * });\n *\n * // Spring-based scale animation\n * const { style } = useMotion({\n *   type: 'scale',\n *   mode: 'spring',\n *   spring: 'snappy',\n * });\n *\n * // Staggered list items\n * const delay = durationToFrames('fast', fps);\n * items.map((item, i) => (\n *   <Item style={useMotion({ type: 'slideUp', delay: i * delay }).style} />\n * ));\n * ```\n */\nexport function useMotion(config: UseMotionConfig): UseMotionResult {\n  const {\n    type,\n    duration = 'base',\n    easing = 'default',\n    spring: springPreset = 'gentle',\n    mode = 'easing',\n    delay = 0,\n    from,\n  } = config;\n\n  const frame = useCurrentFrame();\n  const { fps } = useVideoConfig();\n\n  const startFrame = from ?? delay;\n  const adjustedFrame = Math.max(0, frame - startFrame);\n\n  let progress: number;\n\n  if (mode === 'spring') {\n    // Spring-based animation\n    progress = spring({\n      frame: adjustedFrame,\n      fps,\n      config: dnaSpring[springPreset],\n    });\n  } else {\n    // Easing-based animation\n    const durationFrames = durationToFrames(duration, fps);\n    progress = interpolate(adjustedFrame, [0, durationFrames], [0, 1], {\n      easing: dnaEasing[easing],\n      extrapolateRight: 'clamp',\n    });\n  }\n\n  // Calculate animation values based on type\n  const { opacity, transform } = getAnimationValues(type, progress);\n\n  const isComplete = progress >= 1;\n\n  return {\n    opacity,\n    transform,\n    style: {\n      opacity,\n      transform,\n    },\n    progress,\n    isComplete,\n  };\n}\n\n/**\n * Calculate opacity and transform values for a given animation type and progress.\n */\nfunction getAnimationValues(\n  type: MotionType,\n  progress: number\n): { opacity: number; transform: string } {\n  switch (type) {\n    case 'fade':\n      return {\n        opacity: progress,\n        transform: 'none',\n      };\n\n    case 'slideUp':\n      return {\n        opacity: progress,\n        transform: `translateY(${interpolate(progress, [0, 1], [SLIDE_DISTANCE, 0])}px)`,\n      };\n\n    case 'slideDown':\n      return {\n        opacity: progress,\n        transform: `translateY(${interpolate(progress, [0, 1], [-SLIDE_DISTANCE, 0])}px)`,\n      };\n\n    case 'slideLeft':\n      return {\n        opacity: progress,\n        transform: `translateX(${interpolate(progress, [0, 1], [SLIDE_DISTANCE, 0])}px)`,\n      };\n\n    case 'slideRight':\n      return {\n        opacity: progress,\n        transform: `translateX(${interpolate(progress, [0, 1], [-SLIDE_DISTANCE, 0])}px)`,\n      };\n\n    case 'scale':\n      return {\n        opacity: progress,\n        transform: `scale(${interpolate(progress, [0, 1], [SCALE_FROM, 1])})`,\n      };\n\n    case 'scaleUp':\n      return {\n        opacity: progress,\n        transform: `scale(${interpolate(progress, [0, 1], [SCALE_FROM, 1])}) translateY(${interpolate(progress, [0, 1], [SLIDE_DISTANCE / 2, 0])}px)`,\n      };\n\n    default:\n      return {\n        opacity: 1,\n        transform: 'none',\n      };\n  }\n}\n\n/**\n * Create a stagger delay calculator for list animations.\n *\n * @param staggerMs - Delay between each item in milliseconds\n * @param fps - Frames per second\n * @returns Function that returns delay in frames for a given index\n *\n * @example\n * ```tsx\n * const getDelay = createStagger(50, fps);\n *\n * items.map((item, i) => (\n *   <Item style={useMotion({ type: 'slideUp', delay: getDelay(i) }).style} />\n * ));\n * ```\n */\nexport function createStagger(\n  staggerMs: number,\n  fps: number\n): (index: number) => number {\n  const staggerFrames = durationToFrames(staggerMs, fps);\n  return (index: number) => index * staggerFrames;\n}\n"]}

package/dna.config.json

@@ -0,0 +1,8 @@
+{
+  "name": "radiants",
+  "displayName": "Radiants",
+  "version": "1.0.0",
+  "description": "Retro pixel aesthetic with warm colors",
+  "colorModes": { "default": "light", "available": ["light", "dark"] },
+  "fonts": { "heading": "Joystix Monospace", "body": "Mondwest", "mono": "PixelCode" }
+}

package/fonts.css

@@ -0,0 +1,115 @@
+/* =============================================================================
+   fonts.css - @dna/radiants Font Definitions
+   ============================================================================= */
+
+/* -----------------------------------------------------------------------------
+   @font-face Declarations
+   ----------------------------------------------------------------------------- */
+
+/* Mondwest - Body font (must be downloaded separately)
+   Get it at: https://pangrampangram.com/products/bitmap-mondwest
+   ----------------------------------------------------------------------------- */
+
+@font-face {
+  font-family: 'Mondwest';
+  src: url('./fonts/Mondwest.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Mondwest';
+  src: url('./fonts/Mondwest-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Joystix - Heading font
+   ----------------------------------------------------------------------------- */
+
+@font-face {
+  font-family: 'Joystix Monospace';
+  src: url('./fonts/Joystix.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* PixelCode - Monospace font
+   ----------------------------------------------------------------------------- */
+
+@font-face {
+  font-family: 'PixelCode';
+  src: url('./fonts/PixelCode.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'PixelCode';
+  src: url('./fonts/PixelCode-Italic.woff2') format('woff2');
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'PixelCode';
+  src: url('./fonts/PixelCode-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'PixelCode';
+  src: url('./fonts/PixelCode-Bold-Italic.woff2') format('woff2');
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'PixelCode';
+  src: url('./fonts/PixelCode-Light.woff2') format('woff2');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'PixelCode';
+  src: url('./fonts/PixelCode-Light-Italic.woff2') format('woff2');
+  font-weight: 300;
+  font-style: italic;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'PixelCode';
+  src: url('./fonts/PixelCode-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'PixelCode';
+  src: url('./fonts/PixelCode-Medium-Italic.woff2') format('woff2');
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* -----------------------------------------------------------------------------
+   Font Family Theme Variables
+   ----------------------------------------------------------------------------- */
+
+@theme {
+  --font-sans: 'Mondwest', system-ui, sans-serif;
+  --font-heading: 'Joystix Monospace', monospace;
+  --font-mono: 'PixelCode', monospace;
+}

package/index.css

@@ -0,0 +1,25 @@
+/* =============================================================================
+   @dna/radiants - Theme Entry Point
+   Import this file to use the Radiants theme with Tailwind CSS v4
+   ============================================================================= */
+
+@import 'tailwindcss';
+
+/* Theme tokens - semantic color mappings */
+@import './tokens.css';
+
+/* Font declarations and typography tokens */
+@import './fonts.css';
+
+/* Base element typography styles */
+@import './typography.css';
+
+/* Base styles - box-sizing, body defaults, scrollbars */
+@import './base.css';
+
+/* Animations - keyframes and utility classes */
+@import './animations.css';
+
+/* Note: dark.css is NOT auto-imported - consumers import it separately:
+   @import '@dna/radiants/dark';
+*/