+ {pieces.map((piece) => (
+
+ ))}
+
+ );
+};
+
+export default GivebackConfettiBurst;
diff --git a/packages/shared/src/features/giveback/components/GivebackDevPanel.tsx b/packages/shared/src/features/giveback/components/GivebackDevPanel.tsx
new file mode 100644
index 00000000000..7756803ce82
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackDevPanel.tsx
@@ -0,0 +1,94 @@
+import type { ReactElement } from 'react';
+import React, { useEffect, useState } from 'react';
+import {
+ Button,
+ ButtonSize,
+ ButtonVariant,
+} from '../../../components/buttons/Button';
+import { RootPortal } from '../../../components/tooltips/Portal';
+import { useAuthContext } from '../../../contexts/AuthContext';
+import { givebackInvitePrompts } from '../givebackInvitePrompts';
+import { emitGivebackQa } from '../givebackQa';
+
+// A floating QA panel for reviewing the gift entry point on any layout / preview
+// deploy. Opt in with the `?giveback_debug` query param (never shows for real
+// users). It drives the REAL mounted gift entry (header or sidebar) via the QA
+// event bus, so the money jump, invite prompts and celebration play on the
+// actual gift icon β not a separate preview.
+export function GivebackDevPanel(): ReactElement | null {
+ const { isLoggedIn } = useAuthContext();
+ const [enabled, setEnabled] = useState(false);
+ const [open, setOpen] = useState(true);
+
+ useEffect(() => {
+ if (typeof window !== 'undefined') {
+ setEnabled(window.location.search.includes('giveback_debug'));
+ }
+ }, []);
+
+ if (!enabled || !isLoggedIn) {
+ return null;
+ }
+
+ return (
+
+
+
+
+ π§ͺ Giveback QA
+
+
+
+
+ {open && (
+ <>
+
+ Plays on the live gift icon
+
+
+ {givebackInvitePrompts.map((prompt, index) => (
+
+ ))}
+
+
+ )}
+
+ setGiftHovered(true)}
+ onMouseLeave={() => setGiftHovered(false)}
+ // A custom anchor (rail link) navigates on its own; still dismiss the
+ // toast when it's clicked (capture phase β the link stays interactive).
+ onClickCapture={children ? () => setPrompt(null) : undefined}
+ >
+ {/* Soft glow bloom on a celebratory community moment. */}
+ {glowKey > 0 && (
+
+ )}
+ {children ?? (
+ setPrompt(null)}
+ />
+
+ );
+});
+
+export default GivebackGiftDock;
diff --git a/packages/shared/src/features/giveback/components/GivebackGiftEntry.tsx b/packages/shared/src/features/giveback/components/GivebackGiftEntry.tsx
new file mode 100644
index 00000000000..858c41db01b
--- /dev/null
+++ b/packages/shared/src/features/giveback/components/GivebackGiftEntry.tsx
@@ -0,0 +1,160 @@
+import type { ReactElement, ReactNode } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import { useRouter } from 'next/router';
+import type { GivebackGiftButtonVariant } from './GivebackGiftButton';
+import type { GivebackGiftDockHandle } from './GivebackGiftDock';
+import { GivebackGiftDock } from './GivebackGiftDock';
+import { givebackInvitePrompts } from '../givebackInvitePrompts';
+import type { GivebackQaAction } from '../givebackQa';
+import { GIVEBACK_QA_EVENT } from '../givebackQa';
+import { useAuthContext } from '../../../contexts/AuthContext';
+import { useLogContext } from '../../../contexts/LogContext';
+import { useViewSize, ViewSize } from '../../../hooks/useViewSize';
+import { useConditionalFeature } from '../../../hooks/useConditionalFeature';
+import { featureGiveback } from '../../../lib/featureManagement';
+import { webappUrl } from '../../../lib/constants';
+import { LogEvent } from '../../../lib/log';
+
+interface GivebackGiftEntryProps {
+ variant?: GivebackGiftButtonVariant;
+ showLabel?: boolean;
+ promptPlacement?: 'below' | 'above';
+ promptAlign?: 'start' | 'end';
+ // Custom anchor (e.g. the sidebar's own styled gift link).
+ children?: ReactNode;
+}
+
+// Rotate a different opening message on each load.
+let promptCursor = 0;
+// Only one mounted entry runs the ambient cadence, so header + rail can't both
+// fire (whichever mounts first claims it).
+let cadenceClaimed = false;
+
+// Demo cadence for the review build. NOTE: the money pulses and the invite
+// prompt are driven on a timer here as a placeholder β in the real wiring these
+// come from live backend community-activity signals, not a local timer.
+const FIRST_PULSE_MS = 3500;
+const PULSE_INTERVAL_MS = 22000;
+const PROMPT_MS = 6000;
+const PULSE_AMOUNTS = [1, 2, 3, 5, 8];
+
+const randomPulse = (): string =>
+ `+$${PULSE_AMOUNTS[Math.floor(Math.random() * PULSE_AMOUNTS.length)]}`;
+
+// The persistent giveback entry point. Gated on the same `featureGiveback` flag
+// as the page (on in development), so it shows wherever giveback is enabled. It
+// drives its dock from the ambient cadence and from QA-panel events, so the
+// money jumps and invite prompts play on the real gift (header or sidebar).
+export function GivebackGiftEntry({
+ variant = 'header',
+ showLabel = false,
+ promptPlacement,
+ promptAlign,
+ children,
+}: GivebackGiftEntryProps): ReactElement | null {
+ const router = useRouter();
+ const { isLoggedIn, isAuthReady } = useAuthContext();
+ const { logEvent } = useLogContext();
+ const dock = useRef
+ {pops.map((pop) => (
+
+ {pop.label}
+
+ ))}
+
+
+
+ {celebrate && (
+
+ );
+
+ return dropdown ?
+
+ )}
+
+ {/* Tail pointing to the gift (anchored mode only). */}
+ {!dropdown && (
+
+ )}
+
+ setHovered(true)}
+ onMouseLeave={() => setHovered(false)}
+ >
+ {/* Close button (top-right corner) with the auto-dismiss countdown ring. */}
+
+
+ {/* Left: full-width message + CTA. */}
+
+
+
+
+ {/* The Giveback charm, bobbing on a soft glow. Its artwork sits on black,
+ so mix-blend-screen drops the black on the dark card. */}
+
+
+ {eyebrow}
+
+
+
+
+ + {headline} +
++ {body} +
+
+
+ 
+
+
+
+ daily.dev
+
+);
+
+const RailFrame = ({
+ children,
+}: {
+ children: React.ReactNode;
+}): React.ReactElement => (
+
+ {children}
+
+
+
+
+
+);
+
+export const Playground: Story = {
+ args: {
+ variant: 'header',
+ },
+};
+
+export const Placement: Story = {
+ parameters: { controls: { disable: true } },
+ render: () => (
+
+ {['Feed', 'Explore', 'Bookmarks'].map((item) => (
+
+
+
+ {item}
+
+ ))}
+
+ {children}
+
+
+
+ ),
+};
diff --git a/packages/storybook/stories/features/giveback/GivebackGiftShowcase.stories.tsx b/packages/storybook/stories/features/giveback/GivebackGiftShowcase.stories.tsx
new file mode 100644
index 00000000000..51856070863
--- /dev/null
+++ b/packages/storybook/stories/features/giveback/GivebackGiftShowcase.stories.tsx
@@ -0,0 +1,181 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import React, { useEffect, useRef, useState } from 'react';
+import type { GivebackGiftDockHandle } from '@dailydotdev/shared/src/features/giveback/components/GivebackGiftDock';
+import { GivebackGiftDock } from '@dailydotdev/shared/src/features/giveback/components/GivebackGiftDock';
+import { givebackInvitePrompts } from '@dailydotdev/shared/src/features/giveback/givebackInvitePrompts';
+import { useCountUp } from '@dailydotdev/shared/src/features/giveback/useGivebackMotion';
+import {
+ Button,
+ ButtonSize,
+ ButtonVariant,
+} from '@dailydotdev/shared/src/components/buttons/Button';
+import { withGiveback } from './giveback.mocks';
+
+const ControlButton = ({
+ children,
+ onClick,
+}: {
+ children: React.ReactNode;
+ onClick: () => void;
+}): React.ReactElement => (
+
+);
+
+// Mirrors the real old-layout header (MainLayoutHeader β HeaderButtons): full
+// width, bottom border, h-16, logo left, and the action cluster right in the
+// real order β opportunity, quests, [giveback gift], notifications, profile.
+// The neighbours are Float-button-sized placeholders; the gift is the real
+// component so it can be validated in its true header context.
+const HeaderBar = ({
+ children,
+}: {
+ children: React.ReactNode;
+}): React.ReactElement => (
+
+ Header
+
+
+
+
+ Rail, labelled
+
+
+
+
+
+
+ {children}
+
+
+
+
+ {variant === 'header' ? (
+ {dockNode}
+ ) : (
+
+ );
+};
+
+const meta: Meta = {
+ title: 'Features/Giveback/Entry points/Live playground',
+ decorators: [withGiveback()],
+ parameters: {
+ layout: 'centered',
+ controls: { disable: true },
+ docs: {
+ description: {
+ component:
+ 'The gift entry point as an acquisition hook. Community money lands on the gift in real time β bare Polymarket-style dollar jumps (no chip) that flash on the button and leap up. A rotating generic invite prompt (with a visible auto-dismiss countdown) draws the eye into /giveback. No personal tracking. Motion is bounce:0 per the Jakub Krehel craft playbook.',
+ },
+ },
+ },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Header: Story = {
+ render: () =>
+
+ )}
+
+
+ {['Feed', 'Explore', 'Bookmarks'].map((item) => (
+
+
+
+ {item}
+
+ ))}
+
+ {dockNode}
+
+
+
+ This entry point is an acquisition hook β its job is to pull people
+ into the giveback page. Everything is generic + community-framed, not a
+ personal tracker.
+
+
+
+
+
+ Community raised today:{' '}
+
+ ${raised.toLocaleString('en-US')}
+
+
+
+
+
+
+ Show invite prompt β
+
+ setAmbient((v) => !v)}>
+ {ambient ? 'Stop' : 'Start'} community activity
+
+ {
+ dock.current?.reset();
+ setRaisedToday(12340);
+ setAmbient(false);
+ promptIndex.current = 0;
+ }}
+ >
+ Reset
+
+
+
+
+ βShow invite promptβ cycles through the message variants (social proof,
+ how-it-works, cause spotlight, plain invite). Celebratory ones bloom +
+ confetti.
+
+
+ daily.dev
+
+);
+
+const Label = ({ text }: { text: string }): React.ReactElement => (
+ {text}
+);
+
+const meta: Meta = {
+ title: 'Features/Giveback/Entry points/Header states',
+ parameters: {
+ layout: 'fullscreen',
+ controls: { disable: true },
+ docs: {
+ description: {
+ component:
+ 'Static poses of the header gift entry on the old layout, for review: resting icon, a community dollar jump, and the invite toast (celebration + plain).',
+ },
+ },
+ },
+ decorators: [withGiveback()],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const AllStates: Story = {
+ render: () => (
+
+
+ {children}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ),
+};