motion-brew 0.0.0-stage → 0.1.1

package/dist/components/device-traffic/device-traffic.d.ts

@@ -0,0 +1,59 @@
+/**
+ * DeviceTraffic
+ *
+ * Trigger: in view, then hover, plus a live timeline. A white traffic card:
+ * a light gray header with an icon tile, a title and a line of copy, then a
+ * white panel overlapping it with the total visitors on rolling digits and a column per device
+ * (desktop, tablet, mobile). Each column has a tall gauge that fills to the
+ * device's share. When the card scrolls into view the gauges fill one after
+ * another while the numbers roll up from zero. While live, new visits arrive
+ * every few seconds: the total rolls on, a small "+n" floats up by the Live chip, the
+ * shares drift and the gauges settle to their new levels on a spring.
+ * Pointing at a column (or focusing it) dims the others, tilts its device
+ * icon into play and swaps its change for the visitor count. Live updates
+ * pause off screen and in a hidden tab. Reduced motion keeps the numbers
+ * current without movement.
+ *
+ * Engine: motion/react (gauge fills sliding up on springs, spring digit columns,
+ * AnimatePresence for the swaps and the "+n") with animated icons from
+ * lucide-animated (MIT), vendored in src/icons.
+ */
+import * as React from "react";
+export type DeviceKind = "desktop" | "tablet" | "mobile";
+export interface DeviceTrafficDevice {
+    name: string;
+    kind: DeviceKind;
+    /** Share of visitors, in percent. Shares are scaled to add up to 100. */
+    share: number;
+    /** Change against the last period, in percent. */
+    change: number;
+    /** Gauge color. Defaults follow the card's palette. */
+    color?: string;
+}
+export interface DeviceTrafficProps {
+    /** Title in the shell. Default `"Traffic by device"`. */
+    title?: React.ReactNode;
+    /** Line under the title. */
+    description?: React.ReactNode;
+    /** Label over the total. Default `"Total visitors"`. */
+    label?: string;
+    /** Visitors at the start. Default `237456`. */
+    total?: number;
+    /** Change of the total against the last period, in percent. Default `-1.4`. */
+    change?: number;
+    devices?: DeviceTrafficDevice[];
+    /** New visits arrive every few seconds. Default true. */
+    live?: boolean;
+    /** Seconds between live updates. Default `2.6`. */
+    interval?: number;
+    /** Gauge colors, one per device, used when a device has no color of its own. */
+    colors?: string[];
+    /** Called by the Report button. Leave out to hide it. */
+    onReport?: () => void;
+    /** Locale for numbers. Default `"en-US"`. */
+    locale?: string;
+    /** Show the gray header band with the icon, title and copy. Default true; false leaves just the chart. */
+    header?: boolean;
+    className?: string;
+}
+export declare const DeviceTraffic: React.ForwardRefExoticComponent<DeviceTrafficProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/device-traffic/index.d.ts

@@ -0,0 +1 @@
+export { DeviceTraffic, type DeviceTrafficProps, type DeviceTrafficDevice, type DeviceKind, } from "./device-traffic";

package/dist/components/download-button/download-button.d.ts

@@ -0,0 +1,36 @@
+/**
+ * DownloadButton
+ *
+ * Trigger: press (plus hover). An ink pill that shows a download from start
+ * to finish. The icon is a page with a folded corner and an arrow on it; on
+ * hover the arrow eases down a touch. A press sets the arrow floating on a
+ * slow, even bob while the page fills from the bottom like liquid, its
+ * surface rolling gently sideways and rising in step with the progress. A
+ * lighter fill sweeps across the button behind a softly waving edge, the
+ * label rolls to Downloading and a percentage counts up in uneven bursts the
+ * way real downloads do. At the end the arrow settles and shrinks away, the
+ * corner gives a little flip, a check draws on the page, the button turns
+ * green and the label rolls to Downloaded with the file size. Pressing again
+ * resets it. Progress is announced at the start and end, and reduced motion
+ * keeps the fills but drops the bob and the rolling surface.
+ *
+ * Engine: gsap + @gsap/react (one timeline per download for the fill, the
+ * percentage and the icon, scoped with useGSAP), with motion/react for the
+ * rolling label.
+ */
+import * as React from "react";
+export interface DownloadButtonProps {
+    /** Label at rest. Default `"Download"`. */
+    label?: string;
+    /** File size shown once done. Default `"4.2 MB"`. */
+    size?: string;
+    /** Seconds the demo download takes. Default `2.6`. */
+    duration?: number;
+    /**
+     * Called on press. Return a promise to hold the fill near the end until it
+     * settles; a rejection resets the button.
+     */
+    onDownload?: () => void | Promise<unknown>;
+    className?: string;
+}
+export declare const DownloadButton: React.ForwardRefExoticComponent<DownloadButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/download-button/index.d.ts

@@ -0,0 +1 @@
+export { DownloadButton, type DownloadButtonProps } from "./download-button";

package/dist/components/event-card/event-card.d.ts

@@ -0,0 +1,55 @@
+/**
+ * EventCard
+ *
+ * Trigger: hover and press (plus in view). A minimal white card with the
+ * details of one event: a small kind line over the title, then the date and
+ * a time whose clock hands sweep round to the start when the card comes into
+ * view. Guests sit in a stack that fans out on hover with a name under each
+ * face, and the dashed plus adds a guest who pops in while the counts roll.
+ * The description fades out under its last line and Show more unfolds the
+ * rest. The action row pairs an ink Join button, whose arrow slides through
+ * on hover, with round tools drawn in GSAP: the copy sheets slide apart and
+ * swap to a check, the pencil rocks and draws a line, and the bin lifts its
+ * lid, then widens into a red Delete pill to confirm and leaves an Undo row.
+ * Everything rises in one row after another when the card scrolls into view.
+ * Reduced motion swaps the movement for fades.
+ *
+ * Engine: motion/react for the layout, stack, counts and states; gsap +
+ * @gsap/react for the icon drawings (scoped with useGSAP).
+ */
+import * as React from "react";
+export interface EventGuest {
+    name: string;
+    /** Photo URL. Without one, initials on a soft disc. */
+    avatar?: string;
+    /** Whether they said yes. Default `true`. */
+    going?: boolean;
+}
+export interface EventCardProps {
+    /** Event title. Default `"Product demo"`. */
+    title?: string;
+    /** When it starts. Default a Friday at 1:30 PM. */
+    start?: Date;
+    /** When it ends. Default two hours after the start. */
+    end?: Date;
+    /** People invited. Default six guests, one still to answer. */
+    guests?: EventGuest[];
+    /** What the event is about. Each string is a paragraph. */
+    about?: string[];
+    /** Locale for the date and time. Default `"en-US"`. */
+    locale?: string;
+    /** Called by the pencil. */
+    onEdit?: () => void;
+    /** Called once delete is confirmed. */
+    onDelete?: () => void;
+    /** Called by the plus. Default adds a sample guest so the stack can be tried. */
+    onInvite?: () => void;
+    /** What kind of event it is, shown as a tag. Default `"Video call"`. */
+    kind?: string;
+    /** Main button label. Default `"Join call"`. */
+    cta?: string;
+    /** Called by the main button. */
+    onJoin?: () => void;
+    className?: string;
+}
+export declare const EventCard: React.ForwardRefExoticComponent<EventCardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/event-card/index.d.ts

@@ -0,0 +1 @@
+export { EventCard, type EventCardProps, type EventGuest } from "./event-card";

package/dist/components/file-drop/file-drop.d.ts

@@ -0,0 +1,46 @@
+/**
+ * FileDrop
+ *
+ * Trigger: drag (plus press). A white upload card with a drop zone. Drag files
+ * over it and the dashed border starts marching, the zone swells a touch, the
+ * cloud lifts and the line rolls to "Release to upload". Drop them and a ripple
+ * spreads from where they fell while the cloud gulps them down; the files
+ * slide into the list one after another. Each thumbnail develops like a photo,
+ * blurred and grey at first and sharpening as it uploads, while a slider runs
+ * along its track: an ink fill with a light sheen gliding through it and a
+ * round knob riding its tip, beside a rolling percent. Meanwhile a thin arc
+ * circles the cloud and the zone counts the files in flight. When a file
+ * finishes the track tucks away, a soft green wash sweeps the row, a faint
+ * green glow rises from the card's bottom edge to about halfway and fades, the
+ * thumbnail pops and a green check draws itself. Hover a finished row and the
+ * check turns into a bin. Deleting (or cancelling) breaks the row: a hairline
+ * crack draws down it and it shivers, then the two halves and a few small
+ * flakes become free pieces with a little physics, pushed outward and up with
+ * a spin, falling under gravity with air drag, lifting a shadow as they go and
+ * fading, while the list closes the gap. Files of the wrong type or too large shake and say why. Images
+ * dragged in from a web page arrive as links and are fetched into files. A
+ * ref's `add` takes files from anywhere else.
+ * Reduced motion keeps every state without movement.
+ *
+ * Engine: motion/react (springs and keyframes for the zone, ripple, glow and rows,
+ * motion values driving each slider, percent and developing thumbnail,
+ * AnimatePresence for the rows and the done check), with GSAP for the break:
+ * a timeline for the crack and shiver, then a ticker stepping the falling pieces.
+ */
+import * as React from "react";
+export interface FileDropHandle {
+    /** Add files as if they were dropped. */
+    add: (files: File[]) => void;
+}
+export interface FileDropProps {
+    /** Accepted MIME types. Default PNG, JPEG and GIF. */
+    accept?: string[];
+    /** Largest file in bytes. Default 10 MB. */
+    maxSize?: number;
+    /** Your upload. Call `progress` with 0 to 1 as it goes. Default: a simulated upload. */
+    upload?: (file: File, progress: (p: number) => void) => Promise<void>;
+    /** Called each time a file finishes uploading. */
+    onUploaded?: (file: File) => void;
+    className?: string;
+}
+export declare const FileDrop: React.ForwardRefExoticComponent<FileDropProps & React.RefAttributes<FileDropHandle>>;

package/dist/components/file-drop/index.d.ts

@@ -0,0 +1 @@
+export { FileDrop, type FileDropProps, type FileDropHandle } from "./file-drop";

package/dist/components/flip-words/flip-words.d.ts

@@ -0,0 +1,26 @@
+/**
+ * FlipWords
+ *
+ * Trigger: timeline. One word in a sentence flips to the next on a loop. The
+ * outgoing word tips away while the incoming one flips up letter by letter in
+ * 3D, and the sentence reflows smoothly as the word's width changes. Screen
+ * readers hear the whole list once. Reduced motion swaps words without motion.
+ *
+ * Engine: motion/react (AnimatePresence with per-letter stagger, layout on the
+ * word slot for the width change).
+ */
+import * as React from "react";
+export interface FlipWordsProps {
+    /** Text before the changing word. Default `"Build"`. */
+    before?: string;
+    /** Words to cycle through. Default `["playful", "precise", "fearless"]`. */
+    words?: string[];
+    /** Text after the changing word. Default `"interfaces"`. */
+    after?: string;
+    /** Milliseconds each word stays. Default `2400`. */
+    interval?: number;
+    /** Classes for the changing word. Default a violet tone. */
+    wordClassName?: string;
+    className?: string;
+}
+export declare const FlipWords: React.ForwardRefExoticComponent<FlipWordsProps & React.RefAttributes<HTMLParagraphElement>>;

package/dist/components/flip-words/index.d.ts

@@ -0,0 +1 @@
+export { FlipWords, type FlipWordsProps } from "./flip-words";

package/dist/components/flux-card/flux-card.d.ts

@@ -0,0 +1,56 @@
+/**
+ * FluxCard
+ *
+ * Trigger: in view and timeline, plus hover and press. A feature card on a
+ * pixelated gradient: the colour flows underneath, but it is drawn as a grid
+ * of small rounded squares, stepped into a few shades and dithered between
+ * them like an old screen. The pointer carries a negative magnetic field:
+ * squares near it shrink away to nothing and the colour is pushed outward,
+ * so a clear hole follows the pointer with a crowded, brighter rim around it.
+ * A press sends a shock wave through the grid. In front, a frosted focus
+ * timer counts down inside a shield, and notification pills drift in from
+ * the edges, hit the shield and get pushed back out; each one that bounces
+ * off makes the shield pulse, ripples the grid where it hit and adds to the
+ * held back count. The pills are repelled by the pointer too. Everything
+ * pauses off screen and in a hidden tab. Reduced motion keeps a still frame
+ * with the pills resting around the timer.
+ *
+ * Engine: motion/react (entrances, the shield pulse, rolling numbers) and a
+ * WebGL fragment shader (flow noise, Bayer dithering, the repelling field and
+ * press waves), with a small spring simulation for the pills, all on one
+ * requestAnimationFrame loop that runs only while the card is visible.
+ */
+import * as React from "react";
+export type FluxPingIcon = "message" | "calendar" | "mail" | "bell" | "receipt";
+export interface FluxPing {
+    label: string;
+    icon: FluxPingIcon;
+}
+export interface FluxCardProps {
+    /** Card title. Default `"Keep the noise out"`. */
+    title?: React.ReactNode;
+    /** Line under the title. */
+    description?: React.ReactNode;
+    /** The label inside the timer. Default `"Deep work"`. */
+    label?: string;
+    /** Length of the focus block in minutes. Default `25`. */
+    minutes?: number;
+    /** Notifications that drift in and bounce off. Up to six are used. */
+    pings?: FluxPing[];
+    /** Four colours for the main flow, deepest first. Default an ember ramp. */
+    colors?: [string, string, string, string];
+    /** A second colour dithered into the lower right. Default `"#5b5bff"`. */
+    accent?: string;
+    /** Size of each square in px, 6 to 24. Default `10`. */
+    pixel?: number;
+    /** How much the shades are dithered into each other, 0 to 1. Default `0.6`. */
+    dither?: number;
+    /** Strength of the repelling field around the pointer, 0 to 1. Default `0.8`. */
+    field?: number;
+    /** Reach of the field in px. Default `110`. */
+    radius?: number;
+    /** Flow speed, 0 (still) to 2. Default `0.6`. */
+    speed?: number;
+    className?: string;
+}
+export declare const FluxCard: React.ForwardRefExoticComponent<FluxCardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/flux-card/index.d.ts

@@ -0,0 +1 @@
+export { FluxCard, type FluxCardProps, type FluxPing, type FluxPingIcon, } from "./flux-card";

package/dist/components/fuse-button/fuse-button.d.ts

@@ -0,0 +1,75 @@
+/**
+ * FuseButton
+ *
+ * Trigger: press, then a timed undo. Pressing the action swaps the label for a
+ * ghost Undo button inside the same shell, held open by a burning fuse. The
+ * fuse is the button's own outline: it burns back around the edge with embers
+ * drifting off the burning end. Undo before it runs out to roll back; let it
+ * burn and the action sticks, shown by a brief done label with a check. The
+ * fuse keeps burning under the pointer and only stops, rewinding, when Undo is
+ * pressed. Focus moves to Undo, and Escape undoes. Both states share one size,
+ * and only transform and opacity animate.
+ *
+ * Engine: motion/react (one motion value drives the outline and the embers,
+ * AnimatePresence for the state swap, pathLength for the outline).
+ */
+import * as React from "react";
+declare const SIZES: {
+    readonly sm: {
+        readonly box: "h-9 text-[12px]";
+        readonly pad: "px-4";
+        readonly inset: 3;
+    };
+    readonly md: {
+        readonly box: "h-11 text-sm";
+        readonly pad: "px-5";
+        readonly inset: 4;
+    };
+    readonly lg: {
+        readonly box: "h-14 text-base";
+        readonly pad: "px-6";
+        readonly inset: 6;
+    };
+};
+export interface FuseButtonProps {
+    /** Action label. Default `"Archive"`. */
+    children?: React.ReactNode;
+    /** Icon before the action label. Default an archive icon. Pass `null` for none. */
+    icon?: React.ReactNode;
+    /** Label shown with a check once the fuse runs out. Default `"Archived"`. */
+    doneLabel?: React.ReactNode;
+    /** Undo button label. Default `"Undo"`. */
+    undoLabel?: React.ReactNode;
+    /** Height and padding preset. Default `"md"`. */
+    size?: keyof typeof SIZES;
+    /** Corner radius in px. Default fully rounded. */
+    radius?: number;
+    /** Text color, any CSS color. Default near-black (near-white in dark mode). */
+    textColor?: string;
+    /** Background color, any CSS color. Default white (dark grey in dark mode). */
+    background?: string;
+    /** Fuse and ember color. Default `"#f5a524"`. */
+    fuseColor?: string;
+    /** How long the undo window (the fuse) lasts, in ms. Default `4000`. */
+    duration?: number;
+    /** Fuse stroke width in px. Default `2.5`. */
+    fuseThickness?: number;
+    /** Length of the swap between states, in ms. Default `320`. */
+    crossfade?: number;
+    /** Fire `onCommit` right away on `"press"` (optimistic) or when the `"fuse"` runs out. Default `"press"`. */
+    commitOn?: "press" | "fuse";
+    /** When the fuse runs out, `"reset"` back to the action or `"stay"` done. Default `"reset"`. */
+    afterFuse?: "reset" | "stay";
+    /** How long the done state shows before a reset, in ms. Default `1600`. */
+    resetAfter?: number;
+    /** Pause the fuse while the pointer is over the button. Off by default: the fuse only stops when Undo is pressed. */
+    pauseOnHover?: boolean;
+    /** Called when the action applies. Timing follows `commitOn`. */
+    onCommit?: () => void;
+    /** Called when Undo is pressed before the fuse runs out. */
+    onUndo?: () => void;
+    disabled?: boolean;
+    className?: string;
+}
+export declare const FuseButton: React.ForwardRefExoticComponent<FuseButtonProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/fuse-button/index.d.ts

@@ -0,0 +1 @@
+export { FuseButton, type FuseButtonProps } from "./fuse-button";

package/dist/components/globe-card/globe-card.d.ts

@@ -0,0 +1,46 @@
+/**
+ * GlobeCard
+ *
+ * Trigger: drag (plus hover and in view). A feature card, for a team or about
+ * page or anywhere else, with a dotted 3D globe rising from its bottom edge
+ * over a soft colored glow. People sit in cities around the world; arcs draw
+ * between them with a small glowing comet at the head, and each landing pops
+ * that person's avatar with a ripple. The globe turns slowly, leans toward the
+ * cursor on hover and spins and tips under a drag with momentum. When the card
+ * scrolls into view the title and body rise out of a soft blur, followed by a
+ * gray ghost button whose arrow slides through on hover. Rendering pauses off
+ * screen. The globe is decorative; the text stays real content. Reduced motion
+ * shows a still globe with its arcs already drawn.
+ *
+ * Engine: three.js for the globe, dots, arcs and avatars (one WebGL canvas),
+ * with motion/react for the text reveal.
+ */
+import * as React from "react";
+export interface GlobeMember {
+    name: string;
+    city: string;
+    lat: number;
+    lon: number;
+    /** Avatar color. Default from the palette. */
+    color?: string;
+}
+export interface GlobeCardProps {
+    /** Card title. Default `"Global team"`. */
+    title?: string;
+    /** Line under the title. */
+    subtitle?: string;
+    /** Button label. Default `"Meet the team"`. */
+    cta?: string;
+    /** Where the button goes. Without it the button calls `onCta`. */
+    href?: string;
+    /** Teammates and where they are. Default ten people around the world. */
+    members?: GlobeMember[];
+    /** Arcs in flight at once. Default `6`. */
+    arcs?: number;
+    /** Seconds per full turn. `0` holds the globe still. Default `70`. */
+    turn?: number;
+    /** Called by the button when there is no `href`. */
+    onCta?: () => void;
+    className?: string;
+}
+export declare const GlobeCard: React.ForwardRefExoticComponent<GlobeCardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/globe-card/index.d.ts

@@ -0,0 +1 @@
+export { GlobeCard, type GlobeCardProps, type GlobeMember } from "./globe-card";

package/dist/components/goal-gauge/goal-gauge.d.ts

@@ -0,0 +1,47 @@
+/**
+ * GoalGauge
+ *
+ * Trigger: in view, then hover. A half-ring meter for progress toward a goal.
+ * When the card scrolls into view the arc sweeps up to the value while the
+ * amount counts up from zero on odometer wheels, driven by the same motion value. Hovering the arc
+ * (or focusing the meter) shows the percent and what is left in a tooltip at
+ * the arc's end. New values glide from the old one, and reaching the goal
+ * swaps the caption for "Goal reached". Reduced motion shows the final state
+ * at once.
+ *
+ * Engine: motion/react (animate on a motion value, pathLength for the arc,
+ * transforms for the tooltip, AnimatePresence for the swaps).
+ */
+import * as React from "react";
+export interface GaugeSegment {
+    label: string;
+    value: number;
+    /** Segment color. Defaults to the next color in the built-in palette. */
+    color?: string;
+}
+export interface GoalGaugeProps {
+    /** Breakdown of the amount saved. The total is their sum. Default five sources. */
+    segments?: GaugeSegment[];
+    /** A single amount, used when `segments` is not set. */
+    value?: number;
+    /** Color for the single-amount arc. */
+    color?: string;
+    /** Target amount. Default `1200`. */
+    goal?: number;
+    /** Card title. Default `"Saving goal"`. */
+    title?: React.ReactNode;
+    /** Line under the title. Default `"1 to 12 Apr, 2026"`. */
+    subtitle?: React.ReactNode;
+    /** Currency for the amounts (ISO code). Default `"USD"`. */
+    currency?: string;
+    /** Locale for number formatting. Default `"en-US"`. */
+    locale?: string;
+    /** Length of the sweep, in seconds. Default `1.4`. */
+    duration?: number;
+    /** Label for the header button. Pass `null` to hide it. Default `"View report"`. */
+    actionLabel?: React.ReactNode;
+    /** Called when the header button is pressed. */
+    onAction?: () => void;
+    className?: string;
+}
+export declare const GoalGauge: React.ForwardRefExoticComponent<GoalGaugeProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/goal-gauge/index.d.ts

@@ -0,0 +1 @@
+export { GoalGauge, type GoalGaugeProps, type GaugeSegment } from "./goal-gauge";

package/dist/components/gradient-card/gradient-card.d.ts

@@ -0,0 +1,56 @@
+/**
+ * GradientCard
+ *
+ * Trigger: drag (plus press, hover, wheel, keys and in view). A metric card on
+ * a live mesh gradient: soft colour blobs drift on their own under a fine
+ * grain, and one of them leans toward the pointer. The colours follow the
+ * value: bright and playful below the reference, warm orange at it, deep reds
+ * above it. A glass chip shows the reference. The number is set in a dot
+ * matrix, and when it changes each dot fades and swells on or off on a
+ * spring, so digits morph into each other. At the bottom a frosted panel holds
+ * a thermostat style dial: the rim of a wheel of ticks turns under a fixed
+ * needle, with a round minus and plus button either side. Drag or flick it
+ * (or scroll, or use the keys) and it turns with momentum, the ticks near the
+ * needle grow, the number, caption and colours follow, then it springs onto
+ * the nearest whole step. When it scrolls into view the card rises in and the
+ * dial turns up to the value while the number counts with it. Reduced motion
+ * keeps the gradient still and swaps glides for jumps.
+ *
+ * Engine: motion/react (a motion value for the dial position with inertia
+ * and spring snaps, colour blends driven by it, looping keyframes for the
+ * blobs, springs for every dot).
+ */
+import * as React from "react";
+export interface GradientCardProps {
+    /** Label at the top. Default `"Body age"`. */
+    label?: string;
+    /** Starting value. Default `25`. */
+    value?: number;
+    /** Reference the caption compares against, like a calendar age. Default `27.5`. */
+    reference?: number;
+    /** Lowest value on the dial. Default `18`. */
+    min?: number;
+    /** Highest value on the dial. Default `90`. */
+    max?: number;
+    /** Caption for the value; gets the gap to `reference` (negative is below). */
+    caption?: (value: number, gap: number) => string;
+    /**
+     * Gradient colours, four each (core, glow, accent, edge), for a value well
+     * below the reference, at it, and well above it. The card blends between
+     * them as the value moves. Default bright and playful when younger, warm
+     * at the reference, deep reds when older.
+     */
+    palette?: {
+        young: Palette;
+        even: Palette;
+        old: Palette;
+    };
+    /** Drift speed of the gradient; `2` is twice as fast. Default `1`. */
+    speed?: number;
+    /** Called when the value settles on a new step. */
+    onChange?: (value: number) => void;
+    className?: string;
+}
+type Palette = [string, string, string, string];
+export declare const GradientCard: React.ForwardRefExoticComponent<GradientCardProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/gradient-card/index.d.ts

@@ -0,0 +1 @@
+export { GradientCard, type GradientCardProps } from "./gradient-card";

package/dist/components/gradient-text/gradient-text.d.ts

@@ -0,0 +1,22 @@
+/**
+ * GradientText
+ *
+ * Trigger: timeline. A slow gradient flows through the letters on a seamless
+ * loop, clipped to the glyphs. The text stays real, selectable text. Reduced
+ * motion holds the gradient still.
+ *
+ * Engine: motion/react (a looping background-position animation on clipped text).
+ */
+import * as React from "react";
+export interface GradientTextProps {
+    /** The text. Default `"Color in motion"`. */
+    text?: string;
+    /** Element to render. Default `"h2"`. */
+    as?: "h1" | "h2" | "h3" | "p" | "span";
+    /** Gradient stops; the first repeats at the end so the loop is seamless. Default violet, pink, amber. */
+    colors?: string[];
+    /** Seconds per full loop. Default `6`. */
+    speed?: number;
+    className?: string;
+}
+export declare const GradientText: React.ForwardRefExoticComponent<GradientTextProps & React.RefAttributes<HTMLElement>>;

package/dist/components/gradient-text/index.d.ts

@@ -0,0 +1 @@
+export { GradientText, type GradientTextProps } from "./gradient-text";

package/dist/components/gravity-tag-pile/gravity-tag-pile.d.ts

@@ -0,0 +1,69 @@
+/**
+ * GravityTagPile
+ *
+ * Trigger: drag. Tags drop into the box, bounce, spin and pile up under real
+ * physics, right on the card's own background. Grab any tag to drag it and fling it; sweep the cursor through the
+ * pile to nudge tags aside; click a tag for a little pop (or to follow its
+ * link). Tags squash on hard landings and wobble back. A reset button drops
+ * them again. Every tag is a real button or link, so keyboard and screen
+ * reader users get the plain list. Reduced motion settles the pile instantly.
+ *
+ * Engine: motion/react (useAnimationFrame drives a small built-in capsule
+ * physics solver: each pill is a line segment with a radius, so collisions are
+ * exact and cheap, with no physics library).
+ */
+import * as React from "react";
+export type GravityTagTheme = "studio" | "pastel" | "candy" | "mono" | "earth";
+export interface GravityTag {
+    label: string;
+    /** Background color. Default from the theme. */
+    color?: string;
+    /** Text color. Default from the theme. */
+    textColor?: string;
+    /** Small round image before the label. */
+    image?: string;
+    /** Turns the tag into a link. */
+    href?: string;
+}
+export interface GravityTagPileProps {
+    /** Tags, as labels or objects. Default a set of design skills. */
+    tags?: (string | GravityTag)[];
+    /** Tag color preset. The pile itself is transparent, so it sits on whatever card it is in. Default `"studio"`. */
+    theme?: GravityTagTheme;
+    /** Background pattern. Default `"none"`. */
+    pattern?: "dots" | "grid" | "none";
+    /** How tags arrive: `"random"`, in `"sequence"` or all `"together"`. Default `"random"`. */
+    entrance?: "random" | "sequence" | "together";
+    /** Downward pull, px/s². Default `2200`. */
+    gravity?: number;
+    /** Bounciness, 0 to 1. Default `0.3`. */
+    bounce?: number;
+    /** Grip between tags and walls, 0 to 1. Default `0.6`. */
+    friction?: number;
+    /** Multiplies the speed a tag keeps when you let go. Default `1`. */
+    throwStrength?: number;
+    /** How much tags squash on impact, 0 to 1. Default `0.6`. */
+    squash?: number;
+    /** Moving the cursor through the pile nudges tags. Default `true`. */
+    cursorPush?: boolean;
+    /** Hairline border on each tag. Default `true`. */
+    border?: boolean;
+    /** Drop shadow under each tag. Default `true`. */
+    shadow?: boolean;
+    /** Image size in px. Default `26`. */
+    imageSize?: number;
+    /** Optional heading behind the pile. None by default. */
+    title?: string;
+    /** Optional line under the heading. */
+    description?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    /** Classes for every tag (padding, font, size). */
+    tagClassName?: string;
+    /** Show a drop-again button in the corner. Default `false`. */
+    showReset?: boolean;
+    /** Called when a tag is clicked (not dragged). */
+    onTagClick?: (tag: GravityTag, index: number) => void;
+    className?: string;
+}
+export declare const GravityTagPile: React.ForwardRefExoticComponent<GravityTagPileProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/gravity-tag-pile/index.d.ts

@@ -0,0 +1 @@
+export { GravityTagPile, type GravityTag, type GravityTagPileProps, type GravityTagTheme } from "./gravity-tag-pile";