@beydesign/storybook 0.4.7 → 0.4.8

package/dist/stories/Buttons/MainButton.js

@@ -248,7 +248,7 @@ const StyledButton = styled.button `
       var(--global-shadows-shadow-xs-color);
   }
 `;
-export const MainButton = ({ onClick, text, disabled = false, loading = false, type = ButtonType.Button, style, size = ButtonSize.xl, hierarchy = ButtonHierarchy.Primary, displayIcon, iconWeight = 'regular', displayIconMode = ButtonDisplayMode.Default, state = ButtonState.Default, shape = ButtonShape.Square, destructive = false, showLeadingIcon = false, showTrailingIcon = false, leadingIcon = 'Circle', trailingIcon = 'Circle', testId, }) => {
+export const MainButton = ({ onClick, text, disabled = false, loading = false, type = ButtonType.Button, style, size = ButtonSize.xl, hierarchy = ButtonHierarchy.Primary, displayIcon, iconWeight = 'regular', displayIconMode = ButtonDisplayMode.Default, state = ButtonState.Default, shape = ButtonShape.Square, destructive = false, showLeadingIcon = false, showTrailingIcon = false, leadingIcon = 'Circle', trailingIcon = 'Circle', trailingIconSlot, testId, }) => {
     // Figma draws a 20px icon at every button size.
     const iconSize = 20;
     // Vertical padding comes from TEXT_BUTTON_HEIGHT; only the horizontal value
@@ -329,8 +329,8 @@ export const MainButton = ({ onClick, text, disabled = false, loading = false, t
             }, children: [showLeadingIcon &&
                     leadingIcon &&
                     getIconComponent(leadingIcon, iconProps), text && (_jsx(Typography, { size: getTextSize(), weight: TypographyWeight.SemiBold, children: text })), showTrailingIcon &&
-                    trailingIcon &&
-                    getIconComponent(trailingIcon, iconProps)] }));
+                    (trailingIconSlot ??
+                        (trailingIcon && getIconComponent(trailingIcon, iconProps)))] }));
     };
     return (_jsx(StyledButton, { onClick: onClick, type: type, disabled: state === ButtonState.Disabled || disabled, "$size": size, "$hierarchy": hierarchy, "$state": state, "$shape": shape, "$destructive": destructive, "$disabled": disabled, "$displayIconMode": displayIconMode, "$sizeStyles": sizeStyles, style: style, "data-testid": testId, children: renderContent() }));
 };

package/dist/stories/Buttons/types.d.ts

@@ -105,6 +105,13 @@ export interface MainButtonProps {
     leadingIcon?: IconName;
     /** Icon to show at the end of the button */
     trailingIcon?: IconName;
+    /**
+     * Custom node rendered in place of the name-based trailing icon. When
+     * provided (and `showTrailingIcon` is true) this takes precedence over
+     * `trailingIcon`, letting callers slot in an animated/custom icon while
+     * keeping the button's icon slot and spacing intact.
+     */
+    trailingIconSlot?: React.ReactNode;
     /** Test Id */
     testId?: string;
 }

package/dist/stories/UI/ConversationalAvatarsBanner.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '@mui/material';
+import { Box, useMediaQuery } from '@mui/material';
+import { keyframes } from '@emotion/react';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { MainButton, ButtonHierarchy, ButtonSize } from '../Buttons';
 import { BANNER_AVATARS, AVATAR_TILE_BACKGROUND, AVATAR_TILE_WIDTH, } from './bannerAvatars';
@@ -24,7 +25,35 @@ const IMAGE_COLUMN = [
     BANNER_AVATARS.micheal,
     BANNER_AVATARS.yuruo,
 ];
-export const ConversationalAvatarsBanner = ({ title, description, actions = [], background = DEFAULT_BACKGROUND, style: customStyle, testId, }) => {
+// A longer, de-duplicated sequence used only when the collage animates: every
+// avatar appears, no two adjacent tiles repeat, and the first tile differs from
+// the last so doubling it for the seamless loop never places identical tiles
+// next to each other at the seam.
+const MARQUEE_COLUMN = [
+    BANNER_AVATARS.fjolla,
+    BANNER_AVATARS.micheal,
+    BANNER_AVATARS.yuruo,
+    BANNER_AVATARS.jerome,
+    BANNER_AVATARS.nelly,
+    BANNER_AVATARS.laura,
+];
+// One full loop of the marquee — slow enough to read as ambient motion.
+const MARQUEE_DURATION = '360s';
+// The animated track is top-aligned (so it always overflows both edges of the
+// clipped window and can never expose a gap) and nudged up by this much so the
+// top tile clips into a sliver, matching the "bleed" look of the static column.
+const MARQUEE_TOP_BLEED = 90;
+// Vertical marquee: the track stacks two identical image sets, so translating by
+// exactly one set height (-50% of the doubled track) lands on a pixel-identical
+// frame and loops seamlessly.
+const marqueeUp = keyframes `
+  from { transform: translateY(0); }
+  to { transform: translateY(-50%); }
+`;
+export const ConversationalAvatarsBanner = ({ title, description, actions = [], animateAvatars = false, background = DEFAULT_BACKGROUND, style: customStyle, testId, }) => {
+    // Users who ask their OS to minimize motion get the static collage.
+    const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
+    const avatarsAnimated = animateAvatars && !prefersReducedMotion;
     const renderAction = (action, index) => (_jsx(MainButton, { text: action.text, size: ButtonSize.xxs, hierarchy: action.primary
             ? ButtonHierarchy.Primary
             : ButtonHierarchy.SecondaryColor, onClick: action.onClick, testId: testId ? `${testId}-action-${index}` : undefined }, `${action.text}-${index}`));
@@ -46,10 +75,34 @@ export const ConversationalAvatarsBanner = ({ title, description, actions = [],
                         // Push the strip past the right edge so the tile is clipped there.
                         marginRight: `calc(-1 * var(--spacing-tokens-size-in-px-spacing-spacing-lg) - ${MOBILE_TILE_CUTOFF}px)`,
                     },
-                }, children: _jsx(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", position: "absolute", left: 0, right: 0, top: "50%", sx: { transform: 'translateY(-50%)' }, children: IMAGE_COLUMN.map((image, index) => (_jsx(Box, { component: "img", src: image, alt: "", width: "100%", height: `${TILE_HEIGHT}px`, flexShrink: 0, sx: {
-                            objectFit: 'cover',
-                            borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)',
-                            background: AVATAR_TILE_BACKGROUND,
-                            display: 'block',
-                        } }, index))) }) })] }));
+                }, children: _jsx(Box, { display: "flex", flexDirection: "column", position: "absolute", left: 0, right: 0, 
+                    // Static: vertically centered (Figma hero tile). Animated: top-aligned
+                    // and nudged up by the bleed so the top tile clips into a sliver — a
+                    // top-anchored track always overflows both edges, so the marquee can
+                    // never scroll a gap into view.
+                    top: avatarsAnimated ? 0 : '50%', sx: {
+                        transform: avatarsAnimated
+                            ? `translateY(-${MARQUEE_TOP_BLEED}px)`
+                            : 'translateY(-50%)',
+                    }, children: _jsx(Box, { display: "flex", flexDirection: "column", 
+                        // Animated tracks space tiles with marginBottom (on every tile,
+                        // including the last) so the duplicated seam is uniform and the -50%
+                        // loop is pixel-perfect; the static column uses gap.
+                        gap: avatarsAnimated
+                            ? 0
+                            : 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: {
+                            animation: avatarsAnimated
+                                ? `${marqueeUp} ${MARQUEE_DURATION} linear infinite`
+                                : undefined,
+                        }, children: (avatarsAnimated
+                            ? [...MARQUEE_COLUMN, ...MARQUEE_COLUMN]
+                            : IMAGE_COLUMN).map((image, index) => (_jsx(Box, { component: "img", src: image, alt: "", width: "100%", height: `${TILE_HEIGHT}px`, flexShrink: 0, sx: {
+                                objectFit: 'cover',
+                                borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)',
+                                background: AVATAR_TILE_BACKGROUND,
+                                display: 'block',
+                                ...(avatarsAnimated && {
+                                    marginBottom: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)',
+                                }),
+                            } }, index))) }) }) })] }));
 };

package/dist/stories/UI/ConversationalAvatarsBanner.stories.d.ts

@@ -4,4 +4,5 @@ declare const meta: Meta<typeof ConversationalAvatarsBanner>;
 export default meta;
 type Story = StoryObj<typeof ConversationalAvatarsBanner>;
 export declare const Default: Story;
+export declare const Animated: Story;
 export declare const Mobile: Story;

package/dist/stories/UI/ConversationalAvatarsBanner.stories.js

@@ -26,6 +26,14 @@ const meta = {
             description: 'Action buttons — set primary: true for the brand (violet) button',
             table: { type: { summary: 'BannerAction[]' } },
         },
+        animateAvatars: {
+            control: 'boolean',
+            description: 'Continuously scroll (marquee) the avatar collage column. Honors prefers-reduced-motion.',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
         background: {
             control: 'text',
             description: 'Background of the banner',
@@ -46,6 +54,22 @@ export const Default = {
         actions: [{ text: 'Create New Agent' }],
     },
 };
+export const Animated = {
+    args: {
+        ...Default.args,
+        animateAvatars: true,
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'The same banner with animateAvatars on: the collage column scrolls ' +
+                    'as a seamless vertical marquee (top and bottom tiles bleed off the ' +
+                    'clipped edges, no gap or repeated tile at the loop seam). ' +
+                    'Automatically suppressed for users with prefers-reduced-motion.',
+            },
+        },
+    },
+};
 const FIGMA_MOBILE_VIEWPORT = {
     viewport: {
         viewports: {

package/dist/stories/UI/DissolveIcon.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { DissolveIconProps } from './types';
+/**
+ * An icon that dissolves into dust and reforms whenever its `icon` changes.
+ *
+ * The effect is a pure SVG filter: `feTurbulence` generates a static noise field
+ * that `feDisplacementMap` uses to shove the glyph's pixels around. Driving the
+ * displacement `scale` from 0 up to a peak (while fading + blurring + drifting)
+ * makes the icon crumble into particles; swapping the glyph at the peak and
+ * running the scale back down makes the new icon coalesce from the same dust.
+ */
+export declare const DissolveIcon: React.FC<DissolveIconProps>;

package/dist/stories/UI/DissolveIcon.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { useMediaQuery } from '@mui/material';
+import { getIconComponent } from '../../utils';
+// Peak displacement (as a fraction of the icon size) that the turbulence pushes
+// the glyph's pixels apart at the midpoint of the transition — strong enough to
+// read as scattering particles, gentle enough that the shape stays recognizable
+// on the way out and in.
+const DISPLACEMENT_RATIO = 0.7;
+// Layered on top of the raw displacement to sell "dust lifting away" rather than
+// just noise: the glyph drifts up slightly and softens as it scatters.
+const DRIFT_PX = 3;
+const MAX_BLUR_PX = 1.2;
+// Smoothstep so the scatter eases in and out instead of moving linearly.
+const easeInOut = (t) => t * t * (3 - 2 * t);
+/**
+ * An icon that dissolves into dust and reforms whenever its `icon` changes.
+ *
+ * The effect is a pure SVG filter: `feTurbulence` generates a static noise field
+ * that `feDisplacementMap` uses to shove the glyph's pixels around. Driving the
+ * displacement `scale` from 0 up to a peak (while fading + blurring + drifting)
+ * makes the icon crumble into particles; swapping the glyph at the peak and
+ * running the scale back down makes the new icon coalesce from the same dust.
+ */
+export const DissolveIcon = ({ icon, size = 20, weight = 'regular', color = 'currentColor', durationMs = 600, style, testId, }) => {
+    const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
+    // Colons from useId aren't valid inside a `url(#id)` filter reference, so strip
+    // them; the result is still unique per instance (avoids filter collisions when
+    // several DissolveIcons render on the same page).
+    const filterId = `dissolve-${React.useId().replace(/:/g, '')}`;
+    const maxScale = size * DISPLACEMENT_RATIO;
+    // `displayedIcon` is what actually renders; `progress` runs 0 (fully formed) ->
+    // 1 (fully dust) -> 0 as the transition plays, with the glyph swapped at 1.
+    const [displayedIcon, setDisplayedIcon] = React.useState(icon);
+    const [progress, setProgress] = React.useState(0);
+    // Tracked in a ref (not effect deps) so mid-animation state updates don't tear
+    // down and restart the running rAF loop.
+    const displayedIconRef = React.useRef(icon);
+    const frameRef = React.useRef();
+    React.useEffect(() => {
+        if (icon === displayedIconRef.current)
+            return;
+        if (prefersReducedMotion) {
+            displayedIconRef.current = icon;
+            setDisplayedIcon(icon);
+            setProgress(0);
+            return;
+        }
+        const start = performance.now();
+        const half = durationMs / 2;
+        let swapped = false;
+        const tick = (now) => {
+            const elapsed = now - start;
+            if (elapsed < half) {
+                // Dissolve the outgoing glyph out (0 -> 1).
+                setProgress(Math.min(1, elapsed / half));
+            }
+            else if (elapsed < durationMs) {
+                // At the peak, swap to the new glyph, then reform it (1 -> 0).
+                if (!swapped) {
+                    swapped = true;
+                    displayedIconRef.current = icon;
+                    setDisplayedIcon(icon);
+                }
+                setProgress(Math.max(0, 1 - (elapsed - half) / half));
+            }
+            else {
+                if (!swapped) {
+                    displayedIconRef.current = icon;
+                    setDisplayedIcon(icon);
+                }
+                setProgress(0);
+                return;
+            }
+            frameRef.current = requestAnimationFrame(tick);
+        };
+        frameRef.current = requestAnimationFrame(tick);
+        return () => {
+            if (frameRef.current)
+                cancelAnimationFrame(frameRef.current);
+        };
+    }, [icon, durationMs, prefersReducedMotion]);
+    const eased = easeInOut(progress);
+    const scale = maxScale * eased;
+    const active = eased > 0;
+    return (_jsxs("span", { "data-testid": testId, style: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: size,
+            height: size,
+            lineHeight: 0,
+            color,
+            // Only pay for the filter while the transition is running; a crisp,
+            // unfiltered glyph the rest of the time.
+            filter: active
+                ? `url(#${filterId}) blur(${MAX_BLUR_PX * eased}px)`
+                : 'none',
+            opacity: 1 - eased,
+            transform: `translateY(${-DRIFT_PX * eased}px)`,
+            ...style,
+        }, children: [_jsx("svg", { "aria-hidden": true, width: 0, height: 0, style: { position: 'absolute' }, children: _jsxs("filter", { id: filterId, x: "-50%", y: "-50%", width: "200%", height: "200%", colorInterpolationFilters: "sRGB", children: [_jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "0.9", numOctaves: 2, seed: 7, result: "noise" }), _jsx("feDisplacementMap", { in: "SourceGraphic", in2: "noise", scale: scale, xChannelSelector: "R", yChannelSelector: "G" })] }) }), getIconComponent(displayedIcon, {
+                size,
+                weight,
+                color: 'currentColor',
+            })] }));
+};

package/dist/stories/UI/DissolveIcon.stories.d.ts

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DissolveIcon } from './DissolveIcon';
+declare const meta: Meta<typeof DissolveIcon>;
+export default meta;
+type Story = StoryObj<typeof DissolveIcon>;
+/**
+ * Change the `icon` control (e.g. from `Copy` to `Check`) to watch the glyph
+ * scatter into dust and reform.
+ */
+export declare const Playground: Story;
+/**
+ * The copy-confirmation use case: tap the button to toggle between the Copy and
+ * Check icons and see them dissolve into one another.
+ */
+export declare const CopyToCheck: Story;
+/**
+ * Auto-cycles through a set of icons to show the effect works for any glyph
+ * change, not just a two-state toggle.
+ */
+export declare const Cycle: Story;

package/dist/stories/UI/DissolveIcon.stories.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { DissolveIcon } from './DissolveIcon';
+import { MainButton, ButtonHierarchy, ButtonSize } from '../Buttons';
+const meta = {
+    title: 'Design System/Components/UI/DissolveIcon',
+    component: DissolveIcon,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        icon: {
+            control: 'text',
+            description: 'The icon to display. Changing this triggers the dust dissolve/reform transition.',
+            table: { type: { summary: 'IconName' } },
+        },
+        size: {
+            control: { type: 'number' },
+            description: 'Pixel size of the square icon',
+            table: { type: { summary: 'number' }, defaultValue: { summary: '20' } },
+        },
+        weight: {
+            control: 'select',
+            options: ['thin', 'light', 'regular', 'bold', 'fill', 'duotone'],
+            description: 'Phosphor icon weight',
+            table: {
+                type: { summary: 'IconWeight' },
+                defaultValue: { summary: 'regular' },
+            },
+        },
+        color: {
+            control: 'text',
+            description: 'Icon color (any CSS color or design token)',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'currentColor' },
+            },
+        },
+        durationMs: {
+            control: { type: 'number' },
+            description: 'Total duration of the dissolve-out + reform-in transition',
+            table: { type: { summary: 'number' }, defaultValue: { summary: '600' } },
+        },
+    },
+};
+export default meta;
+/**
+ * Change the `icon` control (e.g. from `Copy` to `Check`) to watch the glyph
+ * scatter into dust and reform.
+ */
+export const Playground = {
+    args: {
+        icon: 'Copy',
+        size: 32,
+        color: 'var(--color-foreground-fg-primary)',
+        durationMs: 600,
+    },
+};
+const COPY_STATES = ['Copy', 'Check'];
+/**
+ * The copy-confirmation use case: tap the button to toggle between the Copy and
+ * Check icons and see them dissolve into one another.
+ */
+export const CopyToCheck = {
+    render: (args) => {
+        const CopyDemo = () => {
+            const [index, setIndex] = useState(0);
+            const icon = COPY_STATES[index];
+            return (_jsxs("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    gap: 24,
+                }, children: [_jsx(DissolveIcon, { ...args, icon: icon, size: 40, color: "var(--color-foreground-fg-success)" }), _jsx(MainButton, { text: icon === 'Check' ? 'Copied!' : 'Copy code', size: ButtonSize.md, hierarchy: ButtonHierarchy.SecondaryColor, onClick: () => setIndex((i) => (i + 1) % COPY_STATES.length) })] }));
+        };
+        return _jsx(CopyDemo, {});
+    },
+};
+const CYCLE_ICONS = ['Sun', 'Moon', 'Star', 'Heart', 'Lightning'];
+/**
+ * Auto-cycles through a set of icons to show the effect works for any glyph
+ * change, not just a two-state toggle.
+ */
+export const Cycle = {
+    render: (args) => {
+        const CycleDemo = () => {
+            const [index, setIndex] = useState(0);
+            return (_jsxs("div", { style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    gap: 24,
+                }, children: [_jsx(DissolveIcon, { ...args, icon: CYCLE_ICONS[index], size: 48, color: "var(--color-foreground-fg-primary)" }), _jsx(MainButton, { text: "Next icon", size: ButtonSize.md, hierarchy: ButtonHierarchy.Primary, onClick: () => setIndex((i) => (i + 1) % CYCLE_ICONS.length) })] }));
+        };
+        return _jsx(CycleDemo, {});
+    },
+};

package/dist/stories/UI/PromoBanner.js

@@ -1,8 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { Box, useMediaQuery } from '@mui/material';
+import { keyframes } from '@emotion/react';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { MainButton, ButtonHierarchy, ButtonSize } from '../Buttons';
 import { BANNER_AVATARS as AVATARS, AVATAR_TILE_BACKGROUND, } from './bannerAvatars';
+import { DissolveIcon } from './DissolveIcon';
 const DEFAULT_BACKGROUND = 'linear-gradient(180deg, rgba(194, 171, 252, 0.08) 0%, rgba(128, 96, 198, 0.2) 100%)';
 // Below this width the banner switches to the Figma mobile variant: text
 // centered, features/footer hidden, promo code + CTA stacked, and the mobile*
@@ -17,17 +20,70 @@ const HIDE_COLLAGE = '@media (max-width: 1121px)';
 // side collages adjacent to the text on wide (e.g. Full HD) viewports instead
 // of stretching apart; the row stays centered so extra space becomes gutters.
 const CONTENT_MAX_WIDTH = '458px';
+// One full loop of the avatar marquee. Slow enough to read as ambient motion
+// rather than a distraction.
+const MARQUEE_DURATION = '180s';
+// When the collage animates, the track is top-aligned (so it always overflows
+// both edges of the 220px window and can never expose a gap) and nudged up by
+// this much so the top row of tiles is clipped into a sliver, matching the
+// "bleed" look of the static collage instead of sitting flush against the edge.
+const MARQUEE_TOP_BLEED = 90;
+// How long the copy-confirmation state (Check icon + pulse) lingers before the
+// button reverts to its idle Copy state.
+const COPY_FEEDBACK_MS = 1200;
+// Vertical marquee: the track holds two identical image sets stacked, so
+// translating by exactly one set height (-50% of the doubled track) lands on a
+// pixel-identical frame and loops seamlessly. Even columns scroll up, odd
+// columns scroll down, so adjacent columns drift in opposite directions.
+const marqueeUp = keyframes `
+  from { transform: translateY(0); }
+  to { transform: translateY(-50%); }
+`;
+const marqueeDown = keyframes `
+  from { transform: translateY(-50%); }
+  to { transform: translateY(0); }
+`;
+// A restrained pop the promo-code *label* plays as it morphs to "COPIED!" — a
+// small, tasteful scale on the pill only (never the whole button), so the copy
+// confirmation reads as a deliberate success state rather than a bounce.
+const labelPop = keyframes `
+  0% { transform: scale(1); }
+  40% { transform: scale(1.08); }
+  100% { transform: scale(1); }
+`;
 // The middle tile of each column is the fully-visible "hero"; the first and
 // last tiles are clipped to slivers above/below by the banner height. Columns
 // are centered in the banner, then `offset` shifts them vertically (negative =
 // up) so the two columns of each side interlock, matching the Figma layout.
+//
+// The two columns on a side hold DISJOINT sets of avatars (there are exactly 6
+// avatars, split 3/3), so the same face never shows up in both columns of a
+// side — statically or while the marquee scrolls. Each column's `marqueeImages`
+// is therefore just its 3 avatars; doubling that set for the seamless loop keeps
+// no two adjacent tiles (or seam tiles) identical since the three are distinct.
 const LEFT_COLUMNS = [
-    { offset: 0, images: [AVATARS.jerome, AVATARS.micheal, AVATARS.jerome] },
-    { offset: -40, images: [AVATARS.laura, AVATARS.nelly, AVATARS.fjolla] },
+    {
+        offset: -40,
+        images: [AVATARS.micheal, AVATARS.nelly, AVATARS.fjolla],
+        marqueeImages: [AVATARS.nelly, AVATARS.micheal, AVATARS.fjolla],
+    },
+    {
+        offset: 0,
+        images: [AVATARS.laura, AVATARS.jerome, AVATARS.yuruo],
+        marqueeImages: [AVATARS.laura, AVATARS.jerome, AVATARS.yuruo],
+    },
 ];
 const RIGHT_COLUMNS = [
-    { offset: 0, images: [AVATARS.jerome, AVATARS.fjolla, AVATARS.yuruo] },
-    { offset: -20, images: [AVATARS.micheal, AVATARS.laura, AVATARS.nelly] },
+    {
+        offset: -20,
+        images: [AVATARS.laura, AVATARS.yuruo, AVATARS.jerome],
+        marqueeImages: [AVATARS.yuruo, AVATARS.laura, AVATARS.jerome],
+    },
+    {
+        offset: 0,
+        images: [AVATARS.fjolla, AVATARS.yuruo, AVATARS.nelly],
+        marqueeImages: [AVATARS.fjolla, AVATARS.yuruo, AVATARS.nelly],
+    },
 ];
 export const PromoBanner = ({ title = 'Real-time AI avatars for every conversation.', description = 'Trusted by developers, startups, educators, and enterprises to build engaging AI experiences at scale:', features = [
     'Real-Time',
@@ -35,18 +91,38 @@ export const PromoBanner = ({ title = 'Real-time AI avatars for every conversati
     'API-first',
     'Enterprise-ready',
     'GDPR Compliant',
-], promoCode, promoCodeLabel = 'YOUR PROMO CODE', onCopyPromoCode, ctaText, onCtaClick, ctaLoading, ctaDisabled, footerText, mobileTitle, mobileDescription, mobileCtaText, showImages = true, background = DEFAULT_BACKGROUND, style: customStyle, testId, }) => {
+], promoCode, promoCodeLabel = 'YOUR PROMO CODE', onCopyPromoCode, ctaText, onCtaClick, ctaLoading, ctaDisabled, footerText, mobileTitle, mobileDescription, mobileCtaText, showImages = true, animateAvatars = false, animateActions = false, background = DEFAULT_BACKGROUND, style: customStyle, testId, }) => {
     // Below 640px the banner renders the Figma mobile variant, swapping to any
     // provided mobile* copy and falling back to the desktop content otherwise.
     const isMobile = useMediaQuery(MOBILE_QUERY);
     const resolvedTitle = isMobile && mobileTitle ? mobileTitle : title;
     const resolvedDescription = isMobile && mobileDescription ? mobileDescription : description;
     const resolvedCtaText = isMobile && mobileCtaText ? mobileCtaText : ctaText;
+    // Users who ask their OS to minimize motion get a static banner: the marquee
+    // and the hover-lift/pulse are suppressed, while the (non-motion) copy->check
+    // icon swap still fires as feedback.
+    const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
+    const avatarsAnimated = animateAvatars && !prefersReducedMotion;
+    const actionsMotion = animateActions && !prefersReducedMotion;
+    // Tracks the just-copied state so the promo-code button can show a Check icon
+    // (and, when motion is allowed, a pulse) for a moment after a copy.
+    const [copied, setCopied] = React.useState(false);
+    const copyResetTimer = React.useRef();
+    React.useEffect(() => () => {
+        if (copyResetTimer.current)
+            clearTimeout(copyResetTimer.current);
+    }, []);
     const handleCopyPromoCode = () => {
         if (!promoCode)
             return;
         navigator.clipboard?.writeText(promoCode);
         onCopyPromoCode?.(promoCode);
+        if (animateActions) {
+            setCopied(true);
+            if (copyResetTimer.current)
+                clearTimeout(copyResetTimer.current);
+            copyResetTimer.current = setTimeout(() => setCopied(false), COPY_FEEDBACK_MS);
+        }
     };
     // Features are part of the desktop-only layout (hidden on the mobile variant).
     const featuresText = !isMobile && features?.length
@@ -55,11 +131,47 @@ export const PromoBanner = ({ title = 'Real-time AI avatars for every conversati
     const renderAvatarMatrix = (columns) => {
         if (!showImages)
             return null;
-        return (_jsx(Box, { display: "flex", alignItems: "center", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-lg)", height: "100%", flexShrink: 0, overflow: "hidden", sx: { [HIDE_COLLAGE]: { display: 'none' } }, children: columns.map((column, columnIndex) => (_jsx(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", flexShrink: 0, sx: { transform: `translateY(${column.offset}px)` }, children: column.images.map((image, imageIndex) => (_jsx(Box, { component: "img", src: image, alt: "", width: "130px", height: "150px", flexShrink: 0, sx: {
-                        objectFit: 'cover',
-                        borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)',
-                        background: AVATAR_TILE_BACKGROUND,
-                    } }, imageIndex))) }, columnIndex))) }));
+        return (_jsx(Box, { display: "flex", 
+            // Static collage is vertically centered (Figma "hero middle tile"), but
+            // an animated track must be top-aligned: centering a track only two sets
+            // tall lets its bottom edge scroll into the window and expose a gap, so
+            // we pin it to the top where it always overflows both edges instead.
+            alignItems: avatarsAnimated ? 'flex-start' : 'center', gap: "var(--spacing-tokens-size-in-px-spacing-spacing-lg)", height: "100%", flexShrink: 0, overflow: "hidden", sx: { [HIDE_COLLAGE]: { display: 'none' } }, children: columns.map((column, columnIndex) => {
+                // When animating, the track holds two copies of the (de-duplicated,
+                // full-length) marquee sequence so it can scroll one set's worth and
+                // loop seamlessly with no repeated tile at the seam. Even columns
+                // scroll up, odd columns scroll down.
+                const trackImages = avatarsAnimated
+                    ? [...column.marqueeImages, ...column.marqueeImages]
+                    : column.images;
+                const trackAnimation = avatarsAnimated
+                    ? `${columnIndex % 2 === 0 ? marqueeUp : marqueeDown} ${MARQUEE_DURATION} linear infinite`
+                    : undefined;
+                return (
+                // Outer wrapper carries the static positioning; the inner track
+                // carries the marquee animation so the two transforms don't clash.
+                // When animating we still layer the per-column interlock `offset` on
+                // top of the top-bleed nudge, so the two columns stay staggered
+                // (never aligned tile-for-tile) instead of starting in lockstep.
+                _jsx(Box, { display: "flex", flexDirection: "column", flexShrink: 0, sx: {
+                        transform: `translateY(${avatarsAnimated
+                            ? -MARQUEE_TOP_BLEED + column.offset
+                            : column.offset}px)`,
+                    }, children: _jsx(Box, { display: "flex", flexDirection: "column", 
+                        // Animated tracks space tiles with marginBottom (applied to every
+                        // tile, including the last) so the duplicated seam is uniform and
+                        // the -50% loop is pixel-perfect; the static layout uses gap.
+                        gap: avatarsAnimated
+                            ? 0
+                            : 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: { animation: trackAnimation }, children: trackImages.map((image, imageIndex) => (_jsx(Box, { component: "img", src: image, alt: "", width: "130px", height: "150px", flexShrink: 0, sx: {
+                                objectFit: 'cover',
+                                borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)',
+                                background: AVATAR_TILE_BACKGROUND,
+                                ...(avatarsAnimated && {
+                                    marginBottom: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)',
+                                }),
+                            } }, imageIndex))) }) }, columnIndex));
+            }) }));
     };
     return (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "center", gap: "40px", height: "220px", width: "100%", overflow: "hidden", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-lg)", paddingX: "var(--spacing-tokens-size-in-px-spacing-spacing-2xl)", sx: {
             background,
@@ -80,11 +192,28 @@ export const PromoBanner = ({ title = 'Real-time AI avatars for every conversati
                                 width: 'fit-content',
                                 '& button': { width: '100%' },
                             },
-                        }, children: [promoCode && (_jsxs(Box, { position: "relative", display: "flex", children: [_jsx(MainButton, { text: promoCode, size: ButtonSize.md, hierarchy: ButtonHierarchy.SecondaryColor, showTrailingIcon: true, trailingIcon: "Copy", onClick: handleCopyPromoCode, style: {
+                        }, children: [promoCode && (_jsxs(Box, { position: "relative", display: "flex", children: [_jsx(MainButton, { text: promoCode, size: ButtonSize.md, hierarchy: ButtonHierarchy.SecondaryColor, showTrailingIcon: true, trailingIcon: copied ? 'Check' : 'Copy', trailingIconSlot: actionsMotion ? (_jsx(DissolveIcon, { icon: copied ? 'Check' : 'Copy', size: 20, color: "currentColor" })) : undefined, onClick: handleCopyPromoCode, style: {
                                             border: '1px dashed var(--color-border-border-secondary-action)',
                                             height: '100%',
-                                        }, testId: testId ? `${testId}-promo-code` : undefined }), promoCodeLabel && (_jsx(Box, { position: "absolute", top: "-13px", left: "-8px", bgcolor: "var(--color-background-bg-icon-badge)", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-xs)", padding: "var(--spacing-tokens-size-in-px-spacing-spacing-xxs) var(--spacing-tokens-size-in-px-spacing-spacing-sm)", whiteSpace: "nowrap", zIndex: 1, children: _jsx(Typography, { size: TypographySize.Text2XS, weight: TypographyWeight.SemiBold, 
-                                            // Invariant violet label (bg-icon-badge) -> pin to the
-                                            // invariant dark text so it stays legible in both themes.
-                                            color: "var(--color-text-text-dark)", children: promoCodeLabel }) }))] })), resolvedCtaText && (_jsx(MainButton, { text: resolvedCtaText, size: ButtonSize.md, hierarchy: ButtonHierarchy.Primary, onClick: onCtaClick, loading: ctaLoading, disabled: ctaDisabled, testId: testId ? `${testId}-cta` : undefined }))] })), !isMobile && footerText && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--color-text-text-title)", textStyle: { width: '100%' }, children: footerText }))] }), renderAvatarMatrix(RIGHT_COLUMNS)] }));
+                                        }, testId: testId ? `${testId}-promo-code` : undefined }), promoCodeLabel && (_jsx(Box, { position: "absolute", top: "-13px", left: "-8px", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-xs)", padding: "var(--spacing-tokens-size-in-px-spacing-spacing-xxs) var(--spacing-tokens-size-in-px-spacing-spacing-sm)", whiteSpace: "nowrap", zIndex: 1, sx: {
+                                            // On copy the pill morphs from the violet "promo code"
+                                            // badge into the DS success badge, easing the colour so the
+                                            // state change feels intentional rather than an instant swap.
+                                            backgroundColor: copied
+                                                ? 'var(--color-background-bg-badge-accent-success)'
+                                                : 'var(--color-background-bg-icon-badge)',
+                                            transition: 'background-color 0.25s ease',
+                                            // The pop is motion, so it's gated on actionsMotion; the
+                                            // colour/label morph above is a non-motion state change and
+                                            // still fires for reduced-motion users as feedback.
+                                            ...(actionsMotion &&
+                                                copied && {
+                                                animation: `${labelPop} 0.35s ease`,
+                                            }),
+                                        }, children: _jsx(Typography, { size: TypographySize.Text2XS, weight: TypographyWeight.SemiBold, 
+                                            // Both the violet and success badge fills are invariant, so
+                                            // pin the label to the matching on-colour text token.
+                                            color: copied
+                                                ? 'var(--color-text-text-success-on-color)'
+                                                : 'var(--color-text-text-dark)', children: copied ? 'COPIED!' : promoCodeLabel }) }))] })), resolvedCtaText && (_jsx(MainButton, { text: resolvedCtaText, size: ButtonSize.md, hierarchy: ButtonHierarchy.Primary, onClick: onCtaClick, loading: ctaLoading, disabled: ctaDisabled, testId: testId ? `${testId}-cta` : undefined }))] })), !isMobile && footerText && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--color-text-text-title)", textStyle: { width: '100%' }, children: footerText }))] }), renderAvatarMatrix(RIGHT_COLUMNS)] }));
 };

package/dist/stories/UI/PromoBanner.stories.d.ts

@@ -7,4 +7,5 @@ export declare const Default: Story;
 export declare const WithoutImages: Story;
 export declare const WithoutPromoCode: Story;
 export declare const TitleAndCtaOnly: Story;
+export declare const Animated: Story;
 export declare const Mobile: Story;

package/dist/stories/UI/PromoBanner.stories.js

@@ -102,6 +102,22 @@ const meta = {
                 type: { summary: 'boolean' },
             },
         },
+        animateAvatars: {
+            control: 'boolean',
+            description: 'Continuously scroll (marquee) the side avatar collages. Honors prefers-reduced-motion.',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
+        animateActions: {
+            control: 'boolean',
+            description: 'Enable the premium copy confirmation: the promo-code label morphs into a success "COPIED!" state (Copy->Check icon swap + subtle pop). Honors prefers-reduced-motion.',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
         background: {
             control: 'text',
             description: 'Background of the banner',
@@ -162,6 +178,28 @@ export const TitleAndCtaOnly = {
         ctaText: 'Get Started',
     },
 };
+export const Animated = {
+    args: {
+        ...Default.args,
+        animateAvatars: true,
+        animateActions: true,
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'The same PromoBanner as Default with both optional animations on: ' +
+                    'the side avatar collages scroll as a seamless vertical marquee ' +
+                    '(adjacent columns drift in opposite directions), and copying the ' +
+                    'promo code morphs its label pill into a success "COPIED!" state with ' +
+                    'a Copy->Check icon swap and a subtle pop. Both are gated ' +
+                    'independently via animateAvatars / animateActions and are ' +
+                    'automatically suppressed for users with prefers-reduced-motion (the ' +
+                    'label/colour morph and Copy->Check swap still fire as non-motion ' +
+                    'feedback; only the marquee and the pop are dropped).',
+            },
+        },
+    },
+};
 const FIGMA_MOBILE_VIEWPORT = {
     viewport: {
         viewports: {

package/dist/stories/UI/bannerAvatars.js

@@ -3,12 +3,12 @@
 // the same set of avatars.
 const AVATAR_BASE = 'https://storage.googleapis.com/bey-dev-public';
 export const BANNER_AVATARS = {
-    nelly: `${AVATAR_BASE}/nelly.jpg`,
-    micheal: `${AVATAR_BASE}/micheal.jpg`,
-    fjolla: `${AVATAR_BASE}/fjolla.png`,
-    laura: `${AVATAR_BASE}/laura.png`,
-    yuruo: `${AVATAR_BASE}/yuruo.png`,
-    jerome: `${AVATAR_BASE}/jerome.png`,
+    nelly: `${AVATAR_BASE}/nelly.webp`,
+    micheal: `${AVATAR_BASE}/micheal.webp`,
+    fjolla: `${AVATAR_BASE}/fjolla.webp`,
+    laura: `${AVATAR_BASE}/laura.webp`,
+    yuruo: `${AVATAR_BASE}/yuruo.webp`,
+    jerome: `${AVATAR_BASE}/jerome.webp`,
 };
 // Placeholder gradient shown behind avatars with transparent areas so every
 // tile has a consistent backdrop (matches the Figma image tile fill).

package/dist/stories/UI/index.d.ts

@@ -4,6 +4,7 @@ export * from './Avatar';
 export * from './ConversationalAvatarsBanner';
 export * from './CheckIcon';
 export * from './ConversationalVoiceAgentsBanner';
+export * from './DissolveIcon';
 export * from './HintBubble';
 export * from './Logo';
 export * from './Menu';

package/dist/stories/UI/index.js

@@ -4,6 +4,7 @@ export * from './Avatar';
 export * from './ConversationalAvatarsBanner';
 export * from './CheckIcon';
 export * from './ConversationalVoiceAgentsBanner';
+export * from './DissolveIcon';
 export * from './HintBubble';
 export * from './Logo';
 export * from './Menu';

package/dist/stories/UI/types.d.ts

@@ -374,6 +374,10 @@ export interface PromoBannerProps {
     mobileCtaText?: string;
     /** Whether to show the avatar collage on both sides of the banner */
     showImages?: boolean;
+    /** Whether to continuously scroll (marquee) the side avatar collages. Honors prefers-reduced-motion. Defaults to false. */
+    animateAvatars?: boolean;
+    /** Whether to enable the premium copy confirmation: the promo-code label pill morphs into a success "COPIED!" state (with a subtle pop) and the button icon swaps Copy→Check. Honors prefers-reduced-motion. Defaults to false. */
+    animateActions?: boolean;
     /** Background of the banner */
     background?: string;
     /** Custom style of the banner */
@@ -405,6 +409,8 @@ export interface ConversationalAvatarsBannerProps {
     description?: string;
     /** Action buttons */
     actions?: BannerAction[];
+    /** Whether to continuously scroll (marquee) the avatar collage column. Honors prefers-reduced-motion. Defaults to false. */
+    animateAvatars?: boolean;
     /** Background of the banner */
     background?: string;
     /** Custom style of the banner */
@@ -595,3 +601,26 @@ export interface ButtonCardProps {
     /** Test id */
     testId?: string;
 }
+/**
+ * {@link DissolveIcon} props. Renders a single icon that, when the `icon` prop
+ * changes, animates a "turn to dust and reform" transition: the outgoing glyph
+ * scatters into particles (SVG turbulence displacement) and fades out, then the
+ * incoming glyph coalesces back from the same dust. Honors prefers-reduced-motion
+ * (falls back to an instant swap).
+ */
+export interface DissolveIconProps {
+    /** The icon to display. Changing this triggers the dust dissolve/reform transition. */
+    icon: IconName;
+    /** Pixel size of the (square) icon. Defaults to 20. */
+    size?: number;
+    /** Phosphor icon weight. Defaults to 'regular'. */
+    weight?: IconWeight;
+    /** Icon color — any CSS color or design token. Defaults to 'currentColor'. */
+    color?: string;
+    /** Total duration of the dissolve-out + reform-in transition, in ms. Defaults to 600. */
+    durationMs?: number;
+    /** Custom style applied to the icon wrapper. */
+    style?: CSSProperties;
+    /** Test ID applied to the icon wrapper. */
+    testId?: string;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beydesign/storybook",
   "private": false,
-  "version": "0.4.7",
+  "version": "0.4.8",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",