motion-brew 0.0.0-stage → 0.1.1

package/dist/components/metric-split/metric-split.d.ts

@@ -0,0 +1,45 @@
+/**
+ * MetricSplit
+ *
+ * Trigger: in view, then hover and press. A card that splits a total across
+ * three metrics: one rounded bar of proportional segments (solid, light,
+ * striped) with each metric's dot, label and odometer number under its segment.
+ * When it scrolls into view the segments slide in one after another while the
+ * numbers count up from zero. Switching period rolls the numbers to the new values while the
+ * columns glide to their new widths. Hovering or focusing a column dims the
+ * others and swaps its label for its share. Reduced motion shows final states.
+ *
+ * Engine: motion/react (motion values for counts and widths, odometer wheels,
+ * a layoutId pill for the period switch, AnimatePresence for the labels).
+ */
+import * as React from "react";
+export interface MetricSplitPeriod {
+    /** Label on the period switch, e.g. "Week". */
+    label: string;
+    /** One value per metric, in the same order as `metrics`. */
+    values: number[];
+}
+export interface MetricSplitProps {
+    /** Metric names, left to right. Default visits, page views, downloads. */
+    metrics?: string[];
+    /** Periods on the switch, each with a value per metric. Default week, month, year. */
+    periods?: MetricSplitPeriod[];
+    /** Period shown first, by label. Default the first one. */
+    defaultPeriod?: string;
+    /** Base color: solid for the first column, lighter for the second, striped for the third. Default `"#8b5cf6"`. */
+    color?: string;
+    /** Card title. Default `"Site activity"`. */
+    title?: React.ReactNode;
+    /** Line under the title. Default `"How people find and use your page"`. */
+    subtitle?: React.ReactNode;
+    /** Length of the count-up and width glide, in seconds. Default `1.4`. */
+    duration?: number;
+    /** Locale for number formatting. Default `"en-US"`. */
+    locale?: string;
+    /** Accessible label for the round header button. Default `"View report"`. */
+    actionLabel?: React.ReactNode;
+    /** Called when the header button is pressed. Leave out to hide it. */
+    onAction?: () => void;
+    className?: string;
+}
+export declare const MetricSplit: React.ForwardRefExoticComponent<MetricSplitProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/mix-chart/index.d.ts

@@ -0,0 +1 @@
+export { MixChart, type MixChartProps, type MixSeries, type MixPoint, type MixRange, } from "./mix-chart";

package/dist/components/mix-chart/mix-chart.d.ts

@@ -0,0 +1,59 @@
+/**
+ * MixChart
+ *
+ * Trigger: in view, then hover, press and keys. A white chart card of stacked
+ * bars, each bar split into a few vivid segments with small gaps between them.
+ * When it scrolls into view the gridlines draw in and the bars grow from the
+ * baseline one after another, each segment stacking on the one below, while
+ * the total counts up. One bar is chosen and shows its full colours; the rest
+ * sit in soft hatched tints of theirs. Hover, tap or arrow to another bar and
+ * the colours move there; point at one of its segments and only that segment
+ * keeps its full colour while a small white card just above it names that
+ * source and its value, one source at a time. Click a source in the legend to switch it off or on: its segments
+ * shrink away or grow back, the scale eases to fit and the total recounts.
+ * Switch the range and new bars grow in as the total counts to the new figure.
+ * Reduced motion shows every state at once.
+ *
+ * Engine: motion/react (spring heights for the segments, a motion value
+ * counting the total, layoutId for the range pill, AnimatePresence for the
+ * bars and the tooltip card).
+ */
+import * as React from "react";
+export interface MixSeries {
+    key: string;
+    label: string;
+    /** A vivid colour for this source. */
+    color: string;
+}
+export interface MixPoint {
+    /** Short label under the bar, as in `"Mon"`. */
+    label: string;
+    /** Longer label in the tooltip, as in `"Monday 10 Nov"`. */
+    detail?: string;
+    /** One value per series, in series order. */
+    values: number[];
+}
+export interface MixRange {
+    id: string;
+    /** Label on the range switch, as in `"Week"`. */
+    label: string;
+    points: MixPoint[];
+    /** Change against the period before, in percent, shown as a chip. */
+    change?: number;
+    /** Shown under the total, as in `"used this week"`. */
+    caption?: string;
+}
+export interface MixChartProps {
+    /** Card title. Default `"Home energy"`. */
+    title?: string;
+    /** The sources, bottom of the stack first. Default solar, battery and grid. */
+    series?: MixSeries[];
+    /** The ranges on the switch, the first shown first. Default a week, a month and a year. */
+    ranges?: MixRange[];
+    /** Unit after the numbers. Default `"kWh"`. */
+    unit?: string;
+    /** Decimal places on the total and the tooltip. Default `1`. */
+    decimals?: number;
+    className?: string;
+}
+export declare const MixChart: React.ForwardRefExoticComponent<MixChartProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/month-calendar/index.d.ts

@@ -0,0 +1 @@
+export { MonthCalendar, type MonthCalendarProps } from "./month-calendar";

package/dist/components/month-calendar/month-calendar.d.ts

@@ -0,0 +1,34 @@
+/**
+ * MonthCalendar
+ *
+ * Trigger: hover and press. A white month calendar. A soft gray disc follows
+ * the pointer from day to day, and picking a day springs an ink disc to it.
+ * The arrows slide the month sideways in the direction you travel, with the
+ * month name rolling the same way and a touch of blur on the move; the arrow
+ * nudges toward its side on hover. Days with events carry a small dot, today
+ * wears a thin ring, and days from the months around it sit faded at the
+ * edges; picking one of those turns to its month. The grid works like a
+ * calendar with the keyboard: arrows move by day and week, Page Up and Page
+ * Down by month, Home and End to the ends of the week. Reduced motion swaps
+ * the slides for fades.
+ *
+ * Engine: motion/react (layoutId discs for hover and selection, direction
+ * aware AnimatePresence for the month change).
+ */
+import * as React from "react";
+export interface MonthCalendarProps {
+    /** The selected day. Leave it out to let the calendar keep its own. */
+    value?: Date;
+    /** The day selected at first. Default today. */
+    defaultValue?: Date;
+    /** Called with the picked day. */
+    onChange?: (date: Date) => void;
+    /** Days that get an event dot. Default a few days this month. */
+    events?: Date[];
+    /** First day of the week, 0 for Sunday or 1 for Monday. Default `1`. */
+    weekStartsOn?: 0 | 1;
+    /** Locale for month and weekday names. Default `"en-US"`. */
+    locale?: string;
+    className?: string;
+}
+export declare const MonthCalendar: React.ForwardRefExoticComponent<MonthCalendarProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/morph-search/index.d.ts

@@ -0,0 +1 @@
+export { MorphSearch, type MorphSearchProps, type SearchItem } from "./morph-search";

package/dist/components/morph-search/morph-search.d.ts

@@ -0,0 +1,33 @@
+/**
+ * MorphSearch
+ *
+ * Trigger: focus, then type. A search pill that turns into a white card on
+ * focus. Each typed letter rises out of a light blur while the real input stays
+ * underneath, so the caret, selection and paste behave normally. Matches grow
+ * the card and cascade in, re-flowing smoothly as the list narrows, with the
+ * matched part of each name marked by a soft highlighter tint. No matches
+ * gives a small head-shake. Arrow keys move a sliding highlight, Enter picks, Escape
+ * clears then closes. Reduced motion drops the letter and list motion.
+ *
+ * Engine: motion/react (state-driven card morph, per-letter enter, layout list,
+ * layoutId highlight, AnimatePresence for the clear button and results).
+ */
+import * as React from "react";
+export interface SearchItem {
+    /** Main line; matching runs against it. */
+    title: string;
+    /** Second line. */
+    subtitle?: string;
+}
+export interface MorphSearchProps {
+    /** Items to search. Default a small address book. */
+    items?: SearchItem[];
+    /** Placeholder text. Default `"Search people"`. */
+    placeholder?: string;
+    /** Most results to show. Default `5`. */
+    limit?: number;
+    /** Called when a result is picked with a click or Enter. */
+    onSelect?: (item: SearchItem) => void;
+    className?: string;
+}
+export declare const MorphSearch: React.ForwardRefExoticComponent<MorphSearchProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { OrbitCard, type OrbitCardProps, type OrbitMember } from "./orbit-card";

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

@@ -0,0 +1,50 @@
+/**
+ * OrbitCard
+ *
+ * Trigger: drag (plus hover and in view). A feature card for a community,
+ * a network or a user count. Avatars and small app chips circle a center mark
+ * on three faint rings that turn at their own speeds, rising from the bottom
+ * of the card. Every few seconds someone joins: a spark leaves the center,
+ * lands on a member with a pop, a ripple spreads from the mark and the count
+ * in the title rolls up by one. Hover slows the rings and pulls nearby people
+ * gently toward the cursor; hovering a person stops them and shows who they
+ * are. Drag spins the whole system, and it keeps spinning with momentum when
+ * let go. The title, body and a gray ghost button rise out of a soft blur when
+ * the card scrolls into view. The rings are decorative; the text stays real
+ * content. Reduced motion shows a still system and a still count.
+ *
+ * Engine: motion/react for the reveal, rolling digits, ripples and pops, with
+ * one requestAnimationFrame loop placing the orbiting items.
+ */
+import * as React from "react";
+export interface OrbitMember {
+    name: string;
+    /** Shown under the name on hover, like a role or a city. */
+    role: string;
+    /** Photo URL. Without one, initials on a colored disc. */
+    avatar?: string;
+}
+export interface OrbitCardProps {
+    /** The number in the title. It rolls up by one each time someone joins. Default `24816`. */
+    count?: number;
+    /** Words after the number. Default `"creators"`. */
+    label?: string;
+    /** Line under the title. */
+    subtitle?: string;
+    /** Button label. Default `"Join the community"`. */
+    cta?: string;
+    /** Where the button goes. Without it the button calls `onCta`. */
+    href?: string;
+    /** People on the rings, up to six. Default six members. */
+    members?: OrbitMember[];
+    /** The mark in the center. Default a four-point star. */
+    logo?: React.ReactNode;
+    /** Ring speed multiplier. `0` holds the rings still. Default `1`. */
+    speed?: number;
+    /** Seconds between joins. `0` turns joining off. Default `2.6`. */
+    joinEvery?: number;
+    /** Called by the button when there is no `href`. */
+    onCta?: () => void;
+    className?: string;
+}
+export declare const OrbitCard: React.ForwardRefExoticComponent<OrbitCardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/otp-code/index.d.ts

@@ -0,0 +1 @@
+export { OtpCode, type OtpCodeProps, type OtpChannel } from "./otp-code";

package/dist/components/otp-code/otp-code.d.ts

@@ -0,0 +1,61 @@
+/**
+ * OtpCode
+ *
+ * Trigger: type (plus paste, focus and a timeline). A white card that asks
+ * for a one time code sent to an email address or a phone. It rises in out of
+ * a soft blur and its pieces follow one after another. The code boxes
+ * sit in two groups (3 and 3 for six digits) with a small gap between them.
+ * Each digit pops into its box, the box waiting for the next digit shows a
+ * blinking caret, and filled boxes turn white with a stroke. There is no
+ * confirm button: the last digit starts the check, the boxes ripple in a
+ * wave while a spinner says it is checking, and then either the boxes turn
+ * green for a beat and the card glides into a confirmation (a green badge
+ * whose shield draws a check while rings ripple out, You're verified, a panel
+ * with the verified address and a Remember this device switch, then
+ * Continue), or they shake red, a message slides in, and the digits drop away
+ * from the right so the next try can start. A resend line counts down and
+ * then turns into a button whose icon spins when pressed. It is one real
+ * input underneath, so paste, autofill of SMS codes, backspace and arrow
+ * keys all work. Reduced motion keeps every state without movement.
+ *
+ * Engine: motion/react (pops, waves, staggered colour changes, a keyframe
+ * shake and rolling text) with animated icons from lucide-animated (MIT),
+ * vendored in src/icons.
+ */
+import * as React from "react";
+export type OtpChannel = "email" | "phone";
+export interface OtpCodeProps {
+    /** Number of digits, 3 to 8. Default `6`. */
+    length?: number;
+    /** Where the code was sent. Default `"email"`. */
+    channel?: OtpChannel;
+    /** The email address or phone number the code went to. */
+    destination?: string;
+    /** Hide most of the destination, like jo•••@lumen.app. Default true. */
+    maskDestination?: boolean;
+    /** Split the boxes into two groups. Default true (3 and 3 for six digits). */
+    split?: boolean;
+    /** Show dots instead of the digits. Default false. */
+    mask?: boolean;
+    /** Seconds before the code can be sent again. Default `30`. */
+    resendAfter?: number;
+    /**
+     * Checks a complete code. Return true when it is right. Default: a short
+     * wait, then every code passes (a demo).
+     */
+    verify?: (code: string) => boolean | Promise<boolean>;
+    /** Called once a code passes. */
+    onVerified?: (code: string) => void;
+    /** Called when the person asks for a new code. */
+    onResend?: () => void | Promise<void>;
+    /** Called by the confirmation's main button. */
+    onContinue?: () => void;
+    /** Label of the confirmation's main button. Default `"Continue"`. */
+    continueLabel?: string;
+    /** Called when the confirmation's Remember this device switch changes. */
+    onRememberDevice?: (remember: boolean) => void;
+    /** Focus the boxes when the card scrolls into view. Default false; turn it on for a page that is only this step. */
+    autoFocus?: boolean;
+    className?: string;
+}
+export declare const OtpCode: React.ForwardRefExoticComponent<OtpCodeProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { ParticleCard, type ParticleCardProps, type ParticleLook } from "./particle-card";

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

@@ -0,0 +1,57 @@
+/**
+ * ParticleCard
+ *
+ * Trigger: hover (and in view). A product feature card whose hero visual is
+ * made of particles: any SVG is sampled into a grid, and each cell is drawn as
+ * a mono glyph, a solid block or a thin scan dash. Rings spread out from the
+ * centre like a droplet on water and morph every region between those three
+ * looks while the shape turns. On first view the particles fly in and assemble.
+ * Move the cursor through it and the particles part like water, opening a clear
+ * pool with a dense, softly rippling rim that flows after you; click to drop a
+ * ripple that spreads outward. Reach sets the size of the pool and force how
+ * strongly it parts, and a film grain can be dialed over the card. Pass your
+ * own SVG (any filled or stroked shape) to make the pattern. The artwork is
+ * decorative; the title, line and button stay real content. Reduced
+ * motion draws a still, assembled frame.
+ *
+ * Engine: motion/react (useAnimationFrame runs the particle springs and wave;
+ * everything is drawn to one canvas, so thousands of cells stay smooth).
+ */
+import * as React from "react";
+export type ParticleLook = "mixed" | "glyph" | "block" | "scan";
+export interface ParticleCardProps {
+    /** SVG markup for the artwork. Its filled and stroked areas become particles. Default a radiating starburst mark. */
+    svg?: string;
+    /** How cells are drawn: all three looks morphing (`"mixed"`), or one look only. Default `"mixed"`. */
+    look?: ParticleLook;
+    /** Card color. Default white. */
+    background?: string;
+    /** Particle color. Only the artwork uses it. Default ink. */
+    color?: string;
+    /** Title, line and button color. Default ink. */
+    textColor?: string;
+    /** Grid cell size, px. Smaller is finer. Default `6`. */
+    cell?: number;
+    /** How fast the shape turns, turns per minute. `0` holds it still. Default `1`. */
+    spin?: number;
+    /** How strongly the cursor parts the particles, 0 to 3. Above 1 the pool opens wider and the rim is pushed out harder. Default `0.75`. */
+    force?: number;
+    /** Radius of the pool the cursor opens, px. Default `130`. */
+    reach?: number;
+    /** Film grain over the card, 0 (none) to 1 (heavy). Default `0`. */
+    grain?: number;
+    /** Characters for the glyph look, densest first. Default `"01/>."`. */
+    chars?: string;
+    /** Feature title. */
+    title?: string;
+    /** One short line about the feature. */
+    description?: string;
+    /** Button label. Default `"Learn more"`. */
+    cta?: string;
+    /** Where the button goes. Without it the button calls `onOpen`. */
+    href?: string;
+    /** Called by the button when there is no `href`. */
+    onOpen?: () => void;
+    className?: string;
+}
+export declare const ParticleCard: React.ForwardRefExoticComponent<ParticleCardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/payment-form/index.d.ts

@@ -0,0 +1 @@
+export { PaymentForm, type PaymentFormProps, type PaymentDetails, } from "./payment-form";

package/dist/components/payment-form/payment-form.d.ts

@@ -0,0 +1,54 @@
+/**
+ * PaymentForm
+ *
+ * Trigger: type (plus focus and press). A white card for adding a payment
+ * card. Every field is a soft gray pill with a label that floats up on focus,
+ * and one ink focus ring glides from field to field as you move through the
+ * form; each field's icon gives the same quick pop and tilt when it takes
+ * focus. The card number groups itself as you type and the card network logo
+ * rolls in when the number is recognised. The expiry adds its own slash.
+ * Valid fields draw a light check; a field left wrong shakes once and rolls
+ * in a hint. A spring switch saves the card. The button stays muted until the
+ * form is complete, its lock shackle snapping shut when it is ready; a press
+ * runs a spinner, then the button turns green and draws a check. Then the
+ * whole card becomes a confirmation in the style of VerifyFlow: the green seal
+ * spins in, draws its check and bursts sparks, a pill shows the card's logo,
+ * last four and expiry, and Add another and Continue sit side by side. When
+ * the card scrolls into view, the title, fields, switch and button rise out of
+ * a soft blur one after another; Add another blurs the confirmation away and plays the
+ * same rise back into a fresh form with the cursor in the number field. Errors and results are announced, and reduced motion
+ * swaps the movement for fades.
+ *
+ * Engine: motion/react for the fields, focus ring, switch, button and
+ * confirmation layout; gsap + @gsap/react for the seal (scoped with
+ * useGSAP).
+ */
+import * as React from "react";
+export interface PaymentDetails {
+    number: string;
+    name: string;
+    expiry: string;
+    cvc: string;
+    brand: string | null;
+    save: boolean;
+}
+export interface PaymentFormProps {
+    /** Card title. Default `"Payment details"`. */
+    title?: string;
+    /** Line under the title. */
+    subtitle?: string;
+    /** Button label. Default `"Save card"`. */
+    cta?: string;
+    /** Button label once saved. Default `"Card saved"`. */
+    doneLabel?: string;
+    /** Whether the save switch starts on. Default `true`. */
+    defaultSave?: boolean;
+    /** Confirmation button label. Default `"Continue to checkout"`. */
+    continueLabel?: string;
+    /** Called by the confirmation's continue button. */
+    onContinue?: () => void;
+    /** Called on submit. Return a promise to hold the spinner until it settles; a rejection returns to the form. */
+    onSubmit?: (details: PaymentDetails) => void | Promise<unknown>;
+    className?: string;
+}
+export declare const PaymentForm: React.ForwardRefExoticComponent<PaymentFormProps & React.RefAttributes<HTMLFormElement>>;

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

@@ -0,0 +1 @@
+export { PillTabs, type PillTabsProps, type PillTab } from "./pill-tabs";

package/dist/components/pill-tabs/pill-tabs.d.ts

@@ -0,0 +1,39 @@
+/**
+ * PillTabs
+ *
+ * Trigger: press. Tabs on a tinted track with a white pill that slides to the
+ * active tab like a rubber band. The leading edge darts ahead; the trailing edge
+ * holds back, then follows on a looser spring, so the pill stretches long and
+ * thins, then settles with just a hint of give. A horizontal motion blur, scaled by its speed, smears it
+ * mid-travel and clears at rest. The rounded ends never distort: the pill is two
+ * caps and a flat middle that scales. Arrow keys, Home and End move between
+ * tabs. Reduced motion jumps the pill with no stretch or blur.
+ *
+ * Engine: motion/react (two spring-driven edge motion values, transform-only
+ * pill parts, useVelocity feeding an SVG horizontal blur).
+ */
+import * as React from "react";
+export interface PillTab {
+    id: string;
+    label: string;
+    /** Small count shown after the label. */
+    badge?: number;
+}
+export interface PillTabsProps {
+    /** Tabs, left to right. Default inbox, mentions, saved. */
+    tabs?: PillTab[];
+    /** Active tab id when uncontrolled. Default the first. */
+    defaultValue?: string;
+    /** Active tab id when controlled. */
+    value?: string;
+    /** Called with the new tab id. */
+    onValueChange?: (id: string) => void;
+    /** How rubbery the slide is, 0 (rigid) to 1 (very stretchy). Default `0.45`. */
+    stretch?: number;
+    /** Strongest horizontal blur mid-flight, in px. `0` turns it off. Default `7.5`. */
+    blur?: number;
+    /** Accessible name for the tab list. Default `"Sections"`. */
+    label?: string;
+    className?: string;
+}
+export declare const PillTabs: React.ForwardRefExoticComponent<PillTabsProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/pixel-blast/index.d.ts

@@ -0,0 +1 @@
+export { PixelBlast, type PixelBlastProps, type PixelBlastShape } from "./pixel-blast";

package/dist/components/pixel-blast/pixel-blast.d.ts

@@ -0,0 +1,41 @@
+/**
+ * PixelBlast
+ *
+ * Trigger: hover and press (plus in view). A background of dithered pixel
+ * clouds. A few soft cloud bodies wander the whole area on slow looping
+ * paths, their edges torn by noise, drawn through an ordered (Bayer) dither as
+ * a grid of dots that grow and shrink in steps; every dot shimmers on its own
+ * beat, and an optional perspective floor of dots rolls toward you along the
+ * bottom. The pointer lights the pixels up around it, a press sends a ripple
+ * ring out through the field, and while the pointer is away a ripple rises on
+ * its own now and then. On the way in the pixels spread out from the centre
+ * behind a bright edge. Put anything on top as children. Reduced motion draws
+ * a single still frame.
+ *
+ * Engine: canvas 2D on one requestAnimationFrame loop that pauses off screen,
+ * with motion/react's useInView for the entrance.
+ */
+import * as React from "react";
+export type PixelBlastShape = "square" | "circle" | "diamond";
+export interface PixelBlastProps {
+    /** Pixel colour. Default `"#252528"`. */
+    color?: string;
+    /** Grid cell in px; the largest dot fills most of a cell. Default `6`. */
+    cellSize?: number;
+    /** Dot shape. Default `"square"`. */
+    shape?: PixelBlastShape;
+    /** Drift and shimmer speed; `2` is twice as fast. Default `1`. */
+    speed?: number;
+    /** How much of the area the clouds cover; `2` makes each cloud twice as wide. Default `1.4`. */
+    coverage?: number;
+    /** How heavy the clouds are: higher fills them with bigger, bolder dots. Default `0.8`. */
+    density?: number;
+    /** Draw the perspective floor of dots along the bottom. Default `false`. */
+    floor?: boolean;
+    /** Light up under the pointer and ripple on press. Default `true`. */
+    interactive?: boolean;
+    /** Content laid over the field. */
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const PixelBlast: React.ForwardRefExoticComponent<PixelBlastProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/pixel-feature-card/index.d.ts

@@ -0,0 +1 @@
+export { PixelFeatureCard, type PixelFeatureCardProps, type PixelShape, } from "./pixel-feature-card";

package/dist/components/pixel-feature-card/pixel-feature-card.d.ts

@@ -0,0 +1,43 @@
+/**
+ * PixelFeatureCard
+ *
+ * Trigger: hover and press (plus in view). A product feature card: a phone
+ * with a small app screen stands in front of a field of dithered pixel clouds.
+ * The clouds are a few soft bodies that wander the whole card on slow looping
+ * paths, their edges torn by noise, drawn through an ordered (Bayer) dither as
+ * a grid of dots that grow and shrink in steps; every dot shimmers on
+ * its own beat, and a perspective floor of dots rolls toward you along the
+ * bottom. The pointer lights the pixels up around it, a press sends a ripple
+ * ring out through the field, and while the pointer is away a ripple rises on
+ * its own now and then. The phone floats in when the card scrolls into view
+ * and tilts toward the pointer on springs, and the screen inside builds itself
+ * up: the score counts, bars grow and rows slide in. On the way in the card
+ * rises and the pixels spread out from the centre behind a bright edge. Reduced motion draws a single still
+ * frame and keeps the phone flat.
+ *
+ * Engine: motion/react (springs for the phone tilt and entrance, staggered
+ * screen reveals, a counting motion value) with a canvas 2D field on one
+ * requestAnimationFrame loop that pauses off screen.
+ */
+import * as React from "react";
+export type PixelShape = "square" | "circle" | "diamond";
+export interface PixelFeatureCardProps {
+    /** Pixel colour, also the accent on the default screen. Default `"#252528"`. */
+    color?: string;
+    /** Grid cell in px; the largest dot fills most of a cell. Default `6`. */
+    cellSize?: number;
+    /** Dot shape. Default `"square"`. */
+    shape?: PixelShape;
+    /** Drift and shimmer speed; `2` is twice as fast. Default `1`. */
+    speed?: number;
+    /** How much of the card the clouds cover; `2` makes each cloud twice as wide. Default `1.4`. */
+    coverage?: number;
+    /** How heavy the clouds are: higher fills them with bigger, bolder dots. Default `0.8`. */
+    density?: number;
+    /** Draw the perspective floor of dots along the bottom. Default `false`. */
+    floor?: boolean;
+    /** What the phone shows. Default a small health app screen. */
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const PixelFeatureCard: React.ForwardRefExoticComponent<PixelFeatureCardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/pixel-scroll/index.d.ts

@@ -0,0 +1 @@
+export { PixelScroll, type PixelScrollProps, type PixelDirection, type PixelPattern, type PixelEasing } from "./pixel-scroll";

package/dist/components/pixel-scroll/pixel-scroll.d.ts

@@ -0,0 +1,64 @@
+/**
+ * PixelScroll
+ *
+ * Trigger: scroll. A scroll-driven pixel transition. A tall track scrolls past
+ * a sticky stage, and as it does a grid of pixels flips from state A to state
+ * B. Colors mode goes from one color to another, with optional accent pixels
+ * flickering in the moving band; two-layer mode goes from image A to image B.
+ * Direction sets where the flip starts (top, bottom, left, right, center out or
+ * in), pattern breaks up the front (random, checker, diagonal, wave, spiral,
+ * radial) and intensity sets how much the pattern wins over the direction.
+ * Easing shapes the timing and End At sets how far through the scroll the
+ * transition finishes. Pixels that have settled fill their gaps, so the result
+ * is seamless; the grid only shows along the moving front. Scrolling is the
+ * user's own input, so it runs under reduced motion too.
+ *
+ * Engine: motion/react (useScroll for progress; one canvas redrawn only when the
+ * progress changes).
+ */
+import * as React from "react";
+export type PixelDirection = "top-bottom" | "bottom-top" | "left-right" | "right-left" | "center-out" | "center-in";
+export type PixelPattern = "random" | "checker" | "diagonal" | "wave" | "spiral" | "radial";
+export type PixelEasing = "linear" | "ease-in" | "ease-out" | "ease-in-out" | "expo-out";
+export interface PixelScrollProps {
+    /** `"colors"` flips color A to color B; `"layers"` flips image A to image B. Default `"colors"`. */
+    mode?: "colors" | "layers";
+    /** Start color (colors mode). Default the light card gray. */
+    from?: string;
+    /** End color (colors mode). Default ink. */
+    to?: string;
+    /** Start image (layers mode). */
+    layerA?: string;
+    /** End image (layers mode). */
+    layerB?: string;
+    /** Pixel size, px. Default `16`. */
+    pixelSize?: number;
+    /** Gap between pixels along the moving front, px. Default `0`. */
+    gap?: number;
+    /** How much of the transition already shows before any scrolling, 0 to 0.5, so there is a hint of it at rest. Default `0.08`. */
+    startAt?: number;
+    /** How far through the scroll the transition finishes, 0.1 to 1. Default `0.8`. */
+    endAt?: number;
+    /** Where the flip starts. Default `"bottom-top"`. */
+    direction?: PixelDirection;
+    /** How the front is broken up. Default `"random"`. */
+    pattern?: PixelPattern;
+    /** How strongly the pattern shifts each pixel's timing, 0 to 1. Default `0.45`. */
+    intensity?: number;
+    /** Timing curve. Default `"ease-in-out"`. */
+    easing?: PixelEasing;
+    /** Share of pixels in the moving band that flash an accent, 0 to 1. Default `0.25`. */
+    accentShare?: number;
+    /** Up to four accent colors. */
+    accents?: string[];
+    /** Scroll length in screens (or container heights). Default `3`. */
+    length?: number;
+    /** Scroll inside this element instead of the page. */
+    container?: React.RefObject<HTMLElement | null>;
+    /** Content laid over the stage. */
+    children?: React.ReactNode;
+    /** Describes the visual for screen readers. Leave empty if it is decorative. */
+    label?: string;
+    className?: string;
+}
+export declare const PixelScroll: React.ForwardRefExoticComponent<PixelScrollProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1 @@
+export { PricingCard, type PricingCardProps, type PricingPlan, type PricingFeature, type PricingIcon } from "./pricing-card";