motion-brew 0.0.0-stage → 0.1.0

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";

package/dist/components/growth-stream/growth-stream.d.ts

@@ -0,0 +1,47 @@
+/**
+ * GrowthStream
+ *
+ * Trigger: in view, then hover. A total built up over time, drawn as nested
+ * bands that step wider before each checkpoint. When the card scrolls into view
+ * the stream reveals left to right while the headline counts up on odometer
+ * wheels, both from one motion value, and each checkpoint pill pops in exactly
+ * as the reveal reaches it. Hovering or focusing a checkpoint rolls the headline
+ * to the running total there, swaps the caption and hides the other pills.
+ * Reduced motion shows the final state at once.
+ *
+ * Engine: motion/react (one motion value drives the clip-path reveal, the count
+ * and the pill timing; odometer wheels; AnimatePresence for pills and captions).
+ */
+import * as React from "react";
+export interface StreamCheckpoint {
+    /** Name shown in the caption on hover, e.g. "Week 2". */
+    label: string;
+    /** Running total at this checkpoint. */
+    value: number;
+}
+export interface GrowthStreamProps {
+    /** Running totals, left to right. The last one is the headline. Default three weeks. */
+    checkpoints?: StreamCheckpoint[];
+    /** Total for the previous period, for the change badge and caption. Default `31350`. */
+    previous?: number;
+    /** Small label above the number. Default `"Income"`. */
+    title?: React.ReactNode;
+    /** Name of the previous period in the caption. Default `"last month"`. */
+    previousLabel?: string;
+    /** Name of the whole period in the hover caption. Default `"the month"`. */
+    periodLabel?: string;
+    /** Band color. Default `"#8b5cf6"`. */
+    color?: string;
+    /** Currency for the amounts (ISO code). Default `"USD"`. */
+    currency?: string;
+    /** Locale for number formatting. Default `"en-US"`. */
+    locale?: string;
+    /** Length of the reveal and count, in seconds. Default `1.6`. */
+    duration?: number;
+    /** Called when the round header button is pressed. Leave out to hide it. */
+    onAction?: () => void;
+    /** Accessible label for the round header button. Default `"View report"`. */
+    actionLabel?: string;
+    className?: string;
+}
+export declare const GrowthStream: React.ForwardRefExoticComponent<GrowthStreamProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/growth-stream/index.d.ts

@@ -0,0 +1 @@
+export { GrowthStream, type GrowthStreamProps, type StreamCheckpoint } from "./growth-stream";

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

@@ -0,0 +1,22 @@
+/**
+ * HighlightText
+ *
+ * Trigger: in view. A marker sweeps behind chosen phrases one after another as
+ * the paragraph scrolls into view, with a slight hand-held skew. The text stays
+ * plain and readable. Reduced motion shows the highlights already drawn.
+ *
+ * Engine: motion/react (useInView plus a staggered scaleX sweep behind each phrase).
+ */
+import * as React from "react";
+export interface HighlightTextProps {
+    /** The paragraph. Default a short line about motion. */
+    text?: string;
+    /** Phrases to highlight, in reading order. Each must appear in `text`. */
+    highlights?: string[];
+    /** Marker color. Default a soft yellow. */
+    color?: string;
+    /** Seconds each sweep takes. Default `0.6`. */
+    duration?: number;
+    className?: string;
+}
+export declare const HighlightText: React.ForwardRefExoticComponent<HighlightTextProps & React.RefAttributes<HTMLParagraphElement>>;

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

@@ -0,0 +1 @@
+export { HighlightText, type HighlightTextProps } from "./highlight-text";

package/dist/components/hold-to-confirm/hold-to-confirm.d.ts

@@ -0,0 +1,32 @@
+/**
+ * HoldToConfirm
+ *
+ * Trigger: press and hold. Holding the button (pointer, or Space / Enter)
+ * fills it left to right. Let go early and the fill springs back. Hold to the
+ * end and the label lifts away while a check draws itself and the confirmed
+ * label rises in letter by letter, at the same button size. `onConfirm` fires,
+ * then it resets.
+ * Built for destructive or deliberate actions where a plain click is too easy.
+ *
+ * Engine: motion/react (`animate` on a motion value, pathLength for the check,
+ * AnimatePresence for the label swap). Transform and opacity only.
+ */
+import * as React from "react";
+import { type HTMLMotionProps } from "motion/react";
+export interface HoldToConfirmProps extends Omit<HTMLMotionProps<"button">, "children" | "onPointerDown" | "onPointerUp"> {
+    /** Label shown before and during the hold. Default `"Hold to delete"`. */
+    children?: React.ReactNode;
+    /** Icon before the label. Default a trash icon. Pass `null` for none. */
+    icon?: React.ReactNode;
+    /** Label shown after the hold completes. Default `"Deleted"`. */
+    confirmedLabel?: React.ReactNode;
+    /** How long the hold takes, in ms. Default `1200`. */
+    duration?: number;
+    /** How long the confirmed state shows before the button resets, in ms. Default `1600`. */
+    resetAfter?: number;
+    /** Called once when the hold completes. */
+    onConfirm?: () => void;
+    /** Fill color class. Default near-black (near-white in dark mode). */
+    fillClassName?: string;
+}
+export declare const HoldToConfirm: React.ForwardRefExoticComponent<Omit<HoldToConfirmProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/hold-to-confirm/index.d.ts

@@ -0,0 +1 @@
+export { HoldToConfirm, type HoldToConfirmProps } from "./hold-to-confirm";

package/dist/components/infinite-gallery/index.d.ts

@@ -0,0 +1 @@
+export { InfiniteGallery, type InfiniteGalleryItem, type InfiniteGalleryProps } from "./infinite-gallery";

package/dist/components/infinite-gallery/infinite-gallery.d.ts

@@ -0,0 +1,73 @@
+/**
+ * InfiniteGallery
+ *
+ * Trigger: drag (plus wheel and touch). An endless wall of work that you can
+ * move in any direction and never reach the edge of: cards wrap around
+ * seamlessly, so there is no visible reset. Drag to pan with momentum, scroll
+ * the wheel or trackpad to glide, or leave it alone and it drifts slowly.
+ * Cards shrink a touch while the wall moves fast, cards near the edges sit
+ * slightly smaller than the center for depth, and each image shifts inside its
+ * frame for parallax. While you drag or flick, the cards stretch like rubber
+ * along the direction of travel and smear with a matching motion blur, then
+ * snap back with a little overshoot when the wall stops. Hovering a card breaks its image into big pixels that
+ * resolve back to sharp in a few quick steps, zooms it in and slides up a title
+ * pill on that card only. Cards can be images or muted looping videos, with alt text and links.
+ * On first view the wall blooms in from the center outward: each card rises,
+ * scales up and fades in while its image resolves out of pixels.
+ * Reduced motion turns off drift, momentum and the depth effects.
+ *
+ * Engine: motion/react (useAnimationFrame runs the camera; every card's
+ * transform is written straight to the DOM, so panning never re-renders React).
+ */
+import * as React from "react";
+export interface InfiniteGalleryItem {
+    /** Image URL (also the poster for a video). */
+    src: string;
+    /** Optional video URL; plays muted and looped. */
+    video?: string;
+    title: string;
+    /** Alt text. Default the title. */
+    alt?: string;
+    /** Where the card goes when clicked. */
+    href?: string;
+}
+export interface InfiniteGalleryProps {
+    /** Cards to tile endlessly. Default a set of sample photos. */
+    items?: InfiniteGalleryItem[];
+    /** Card width, px. Default `220`. */
+    cardWidth?: number;
+    /** Card height, px. Default `280`. */
+    cardHeight?: number;
+    /** Space between cards, px. Default `20`. */
+    gap?: number;
+    /** Offset every other column for a staggered wall. Default `true`. */
+    stagger?: boolean;
+    /** Idle drift speed, px/s. `0` stops it. Default `24`. */
+    drift?: number;
+    /** How far momentum carries a flick, 0 to 1. Default `0.6`. */
+    momentum?: number;
+    /** Cards near the edges sit smaller than the center, 0 to 1. Default `0.35`. */
+    depth?: number;
+    /** Images shift inside their frames as they move, 0 to 1. Default `0.5`. */
+    parallax?: number;
+    /** The mouse wheel and trackpad pan the gallery while the pointer is over it. Default `true`. */
+    wheel?: boolean;
+    /** Rubbery stretch along the direction of travel while the wall moves, 0 to 1. Default `0.6`. */
+    stretch?: number;
+    /** Strongest directional motion blur while the wall moves, px. `0` turns it off. Default `6`. */
+    blur?: number;
+    /** Bloom the cards in from the center the first time the gallery scrolls into view. Default `true`. */
+    intro?: boolean;
+    /** Hovering a card pixelates its image, then resolves it back to sharp. Default `true`. */
+    pixelate?: boolean;
+    /** Starting pixel size for the hover resolve, px. Default `12`. */
+    pixelSize?: number;
+    /** Show the title pill on hover. Default `true`. */
+    showTitles?: boolean;
+    /** Open links in a new tab. Default `false`. */
+    newTab?: boolean;
+    /** Accessible name. Default `"Project gallery"`. */
+    label?: string;
+    className?: string;
+}
+export declare const InfiniteGallery: React.ForwardRefExoticComponent<InfiniteGalleryProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/integration-hub/index.d.ts

@@ -0,0 +1 @@
+export { IntegrationHub, type IntegrationHubProps, type HubApp, } from "./integration-hub";

package/dist/components/integration-hub/integration-hub.d.ts

@@ -0,0 +1,40 @@
+/**
+ * IntegrationHub
+ *
+ * Trigger: hover (plus in view). A ring of app tiles wired into one hub in the
+ * middle. When it scrolls into view the hub springs in out of a blur and
+ * gives off a pulse, two faint rings open around it, then the curved wires
+ * grow out from it one by one, clockwise, and each tile springs in from the
+ * hub's side just as its wire reaches it. Then dots (one by default, or
+ * packets with a fading trail) flow along every wire into the hub, which
+ * pulses softly as they land. Hovering a tile or its wire (or focusing a
+ * tile) lifts the tile, turns its wire solid ink, speeds up and enlarges its
+ * dots, dims the rest and names the app in a pill under the hub. Reduced
+ * motion skips the entrance and keeps the dots still.
+ *
+ * Engine: motion/react (springs for the hub and tiles, pathLength for the
+ * wires) with one requestAnimationFrame loop that moves the packets along the
+ * SVG paths and pauses off screen.
+ */
+import * as React from "react";
+import { type LucideIcon } from "lucide-react";
+export interface HubApp {
+    /** App name, shown on hover and read to screen readers. */
+    label: string;
+    /** Icon inside the tile: a lucide icon or any node, like an `<img>` logo. */
+    icon: LucideIcon | React.ReactNode;
+}
+export interface IntegrationHubProps {
+    /** Apps around the ring, clockwise from the top. Default fourteen. */
+    apps?: HubApp[];
+    /** What sits in the hub. Default a small orbit mark. */
+    hub?: React.ReactNode;
+    /** Name of the hub, read to screen readers. Default `"Your workspace"`. */
+    label?: string;
+    /** Packet speed; `2` is twice as fast. Default `1`. */
+    speed?: number;
+    /** Dots in each packet, head included; `1` is a single dot. Default `1`. */
+    trail?: number;
+    className?: string;
+}
+export declare const IntegrationHub: React.ForwardRefExoticComponent<IntegrationHubProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { LiquidCard, LiquidCarousel, type LiquidCardProps, type LiquidCarouselProps, type LiquidIcon, } from "./liquid-card";

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

@@ -0,0 +1,66 @@
+/**
+ * LiquidCard
+ *
+ * Trigger: drag (plus hover, keys and in view). A tall card with a huge icon
+ * bleeding off its right edge, used as a glass container: the empty part is a
+ * soft tint and a coloured liquid fills it to the value, glowing. When the
+ * card scrolls into view the liquid pours in from empty and settles with a
+ * little spring while the number counts up. Its surface rolls with two offset
+ * waves and bubbles rise through it. Moving the pointer quickly sloshes the
+ * liquid, tilting its surface against the motion before it wobbles level
+ * again. Drag up or down on the icon (or use the arrow keys) to set the level;
+ * the number follows. A blurred copy of the icon glows behind it and a faint
+ * glow rises from the bottom edge, softer on the white card. On hover a soft glow in the liquid's colour follows the
+ * pointer and a thin line of the colour runs round the outline, all inside
+ * the card. Four icons ship: a bolt, a
+ * cloud, a shield and a drop, and LiquidCarousel shows them one at a time.
+ * Reduced motion shows the level still, with no waves or bubbles.
+ *
+ * Engine: gsap + @gsap/react (an elastic pour, endless wave tweens, bubble
+ * timelines, a counting tween, svgOrigin rotation for the slosh, quickTo for
+ * dragging the level), scoped with useGSAP; motion/react springs for the
+ * carousel slide.
+ */
+import * as React from "react";
+export type LiquidIcon = "bolt" | "cloud" | "shield" | "drop";
+export interface LiquidCardProps {
+    /** Which icon holds the liquid. Default `"bolt"`. */
+    icon?: LiquidIcon;
+    /** Fill level, 0 to 100. Default per icon. */
+    value?: number;
+    /** Small label at the top. Default per icon. */
+    label?: string;
+    /** Word under the number. Default per icon. */
+    caption?: string;
+    /** Two line message at the bottom. Default per icon. */
+    message?: [string, string];
+    /** Liquid colour. Default per icon. */
+    color?: string;
+    /** Light (white card) or dark. Default `"light"`. */
+    theme?: "light" | "dark";
+    /** Let people drag the level. Default `true`. */
+    interactive?: boolean;
+    onChange?: (value: number) => void;
+    className?: string;
+}
+export declare const LiquidCard: React.ForwardRefExoticComponent<LiquidCardProps & React.RefAttributes<HTMLDivElement>>;
+export interface LiquidCarouselProps {
+    /** The cards, in order. Default one of each icon. */
+    cards?: LiquidCardProps[];
+    /** Theme for every card. Default `"light"`. */
+    theme?: "light" | "dark";
+    /** Card shown, when you control it. */
+    index?: number;
+    /** Card shown first, when it keeps its own. Default `0`. */
+    defaultIndex?: number;
+    onIndexChange?: (index: number) => void;
+    className?: string;
+}
+/**
+ * A carousel of LiquidCards laid out side by side in one row. Drag or swipe
+ * the row left and right (it carries on a little and eases to a stop, with a
+ * soft give at the ends), or use the Left and Right keys to move one card at
+ * a time. The row is not clipped, so the cards run on past its edges. Dragging inside a card's icon still sets
+ * its level rather than moving the row.
+ */
+export declare const LiquidCarousel: React.ForwardRefExoticComponent<LiquidCarouselProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/liquid-metal-card/index.d.ts

@@ -0,0 +1 @@
+export { LiquidMetalCard, type LiquidMetalCardProps, } from "./liquid-metal-card";

package/dist/components/liquid-metal-card/liquid-metal-card.d.ts

@@ -0,0 +1,45 @@
+/**
+ * LiquidMetalCard
+ *
+ * Trigger: hover (or press). A white image card that melts into a second
+ * picture under a flood of black liquid metal. The moment the pointer comes
+ * onto it, the metal pours in from the corner nearest the pointer: rivulets
+ * run ahead toward the middle, each led by a heavy bead riding its tip, then
+ * the pool surges after them and slows as it thickens, its front bulging
+ * unevenly. It is lit like polished black chrome, shaded round its edges
+ * with a hot highlight on top and a cool rim light below, and while it moves
+ * its surface ripples and the reflections slide across it. A beat behind the
+ * metal front the second picture surfaces from inside it, settling in from a
+ * slight zoom, so the change always arrives through the metal. Leaving drains
+ * it back into the same corner: the picture sinks, the rivulets pull in, then
+ * the pool. A press or tap pours from the nearest corner too, and Enter and
+ * Space from the bottom right. The title under the image rolls to the second
+ * picture's name while it shows. `speed` runs the pour and the drain faster
+ * or slower. Reduced motion swaps the metal for a crossfade.
+ *
+ * Engine: gsap + @gsap/react. SVG circles and stroked limb paths filled with
+ * a reflection gradient run through a filter chain (gentle turbulence for a
+ * living edge, blur and an alpha threshold to melt them together, then
+ * diffuse and specular lighting on the alpha for the chrome); a second,
+ * lagging shape masks the revealed picture. Timelines and the turning
+ * reflections are scoped with useGSAP, and motion/react rolls the title.
+ */
+import * as React from "react";
+export interface LiquidMetalCardProps {
+    /** The picture on show. */
+    src?: string;
+    /** The picture the liquid reveals. */
+    revealSrc?: string;
+    /** Title for the first picture. Default `"Daylight"`. */
+    title?: string;
+    /** Title while the second picture shows. Default `"Golden hour"`. */
+    revealTitle?: string;
+    /** Line under the title. */
+    subtitle?: string;
+    /** Limbs that race out ahead of the metal. Default `9`. */
+    tendrils?: number;
+    /** Speed of the pour and the drain. `1` is the slow, heavy pour; higher is faster. Default `2`. */
+    speed?: number;
+    className?: string;
+}
+export declare const LiquidMetalCard: React.ForwardRefExoticComponent<LiquidMetalCardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/liquid-tabs/index.d.ts

@@ -0,0 +1 @@
+export { LiquidTabs, type LiquidTabsProps, type LiquidTab } from "./liquid-tabs";