Spins and the Wall shuffle. Socials open the apps.

The reel no longer starts on Lakers. Discord copies, then opens Discord.
Export desk saves a real JSON file. About is four beats, no fluff.

Author: DigitalCurrensy

HOW-TO-PLAY.md

@@ -32,9 +32,9 @@ One pull on tape: [docs/tape/demo.mp4](docs/tape/demo.mp4)
 | **Save the card** | Downloads `first-bucket-{team}-{wins}.png`. |
 | **Share** | Phone: the system share sheet (Messages, TikTok, Snapchat, Discord). Desktop: the tray. |
 | **Pin this walk** | Keeps it on the rail. Unpin anytime. Nothing is pinned until you pin it. |
-| **X / Threads / Reddit / Facebook** | Open those apps with the walk. |
-| **TikTok / Snapchat** | Saves a 9:16 plate. Open the app and post it. |
-| **Discord** | Copies the walk for paste. |
+| **X / Threads / Reddit / Facebook / WhatsApp / Telegram / LinkedIn** | Opens that app with the walk. |
+| **Discord** | Copies the walk, then opens Discord. Paste it. |
+| **TikTok / Snapchat / Instagram** | Saves a 9:16 plate, copies the caption, opens the app. |
 | **Copy the walk** | Copies the public walk URL so you can paste it. |
 | **Open the walk** | Same five, same nights, forever. |
 

README.md

@@ -2,6 +2,8 @@
 
 **Rip a pack. Five names. Eighty-two nights. Send the card.**
 
+Basketball pack · NBA · WNBA · sports cards · holographic foil · WebGL · 82-0
+
 A browser basketball pack you can fork. Not a shop. Not a sportsbook. Not the NBA.
 
 **Live booth:** [first-bucket-studios.vercel.app](https://first-bucket-studios.vercel.app)  

SUPPORT.md

@@ -22,9 +22,13 @@ Save is a native file link (`<a download>` with a PNG data URL). A nested previe
 
 ## Share on social did nothing
 
-**Share** is the system sheet on a phone (Messages, TikTok, Snapchat, Discord). On a desktop it opens the tray: X, Threads, Reddit, Facebook, TikTok, Snapchat, Discord.
+**Share** is the phone sheet (Messages, TikTok, Snapchat, Discord, Instagram). On a desktop the tray opens the real destination:
 
-TikTok and Snapchat have no web post button. Those buttons save a 9:16 plate and copy the caption — then you post in the app.
+- **X / Threads / Reddit / Facebook / WhatsApp / Telegram / LinkedIn** — post the walk in that app.
+- **Discord** — copies the walk, then opens Discord. Paste it.
+- **TikTok / Snapchat / Instagram** — saves a 9:16 plate, copies the caption, then opens the app. Finish the post there.
+
+Those three have no web post button. The file and the caption still leave this desk.
 
 ## Thunder is pinned and I never pinned it
 

package.json

@@ -2,7 +2,24 @@
   "name": "first-bucket-studios",
   "private": true,
   "license": "MIT",
-  "description": "A 90-second basketball pack. Tear the foil. Send the card.",
+  "description": "Rip a basketball pack. Ten cards. Five names. Eighty-two nights. Send the card.",
+  "keywords": [
+    "basketball",
+    "nba",
+    "wnba",
+    "sports-cards",
+    "trading-cards",
+    "holographic",
+    "foil",
+    "webgl",
+    "pack-opener",
+    "react",
+    "typescript",
+    "tanstack-start",
+    "vite",
+    "simulation",
+    "collector"
+  ],
   "sideEffects": false,
   "type": "module",
   "overrides": {

src/components/file-tray.tsx

@@ -4,15 +4,23 @@ import { X } from "lucide-react";
 import {
   copyText,
   discordCopy,
+  discordOpen,
   facebookIntent,
+  instagramOpen,
+  linkedinIntent,
   nativeShare,
   objectUrl,
+  openTab,
   redditIntent,
   registerProofOpener,
   saveCardFile,
   shareSheetOk,
+  snapchatOpen,
+  telegramIntent,
   threadsIntent,
+  tiktokOpen,
   tweetIntent,
+  whatsappIntent,
   type Proof,
 } from "@/lib/deliver";
 import { ASPECTS, lastShareOpts, renderShareCard, type CardAspect } from "@/lib/share-card";
@@ -126,7 +134,7 @@ function FileTray({ proof, onClose }: { proof: Proof; onClose: () => void }) {
     await onCopyWalk();
   }
 
-  async function shareStory(app: "tiktok" | "snap") {
+  async function shareStory(app: "tiktok" | "snap" | "instagram") {
     markDemo("save", app);
     if (canShare) {
       const result = await nativeShare(sheet, proof.name, proof.caption, shareHref || undefined);
@@ -136,7 +144,9 @@ function FileTray({ proof, onClose }: { proof: Proof; onClose: () => void }) {
     try {
       await saveCardFile(sheet, proof.name.replace(/\.png$/i, "") + "-story.png");
       await copyText([postText, shareHref].filter(Boolean).join("\n"));
-      setNote(app === "tiktok" ? "9:16 plate saved. Open TikTok and post it." : "9:16 plate saved. Open Snapchat and post it.");
+      const dest = app === "tiktok" ? tiktokOpen() : app === "snap" ? snapchatOpen() : instagramOpen();
+      openTab(dest);
+      setNote("Plate saved. Caption copied. Finish the post in the app.");
     } catch {
       setNote("Save the plate, then open the app.");
     }
@@ -149,7 +159,14 @@ function FileTray({ proof, onClose }: { proof: Proof; onClose: () => void }) {
       if (result === "shared" || result === "abort") return;
     }
     const ok = await copyText(discordCopy(postText, shareHref));
-    setNote(ok ? "Copied for Discord. Paste it in a chat." : "Copy the walk, then paste in Discord.");
+    openTab(discordOpen());
+    setNote(ok ? "Copied. Paste it in Discord." : "Copy the walk, then paste in Discord.");
+  }
+
+  async function onCopyFile() {
+    const text = await proof.blob.text();
+    const ok = await copyText(text);
+    setNote(ok ? "Desk JSON copied." : "Couldn’t copy.");
   }
 
   function onOpenWalk() {
@@ -310,14 +327,50 @@ function FileTray({ proof, onClose }: { proof: Proof; onClose: () => void }) {
                   Facebook
                 </a>
               ) : null}
+              {shareHref ? (
+                <a
+                  className="tray-btn"
+                  href={whatsappIntent(postText, shareHref)}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  onClick={() => markDemo("save", "whatsapp")}
+                >
+                  WhatsApp
+                </a>
+              ) : null}
+              {shareHref ? (
+                <a
+                  className="tray-btn"
+                  href={telegramIntent(postText, shareHref)}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  onClick={() => markDemo("save", "telegram")}
+                >
+                  Telegram
+                </a>
+              ) : null}
+              {shareHref ? (
+                <a
+                  className="tray-btn"
+                  href={linkedinIntent(shareHref)}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  onClick={() => markDemo("save", "linkedin")}
+                >
+                  LinkedIn
+                </a>
+              ) : null}
+              <button type="button" className="tray-btn" onClick={() => void onDiscord()}>
+                Discord
+              </button>
               <button type="button" className="tray-btn" onClick={() => void shareStory("tiktok")}>
                 TikTok
               </button>
               <button type="button" className="tray-btn" onClick={() => void shareStory("snap")}>
                 Snapchat
               </button>
-              <button type="button" className="tray-btn" onClick={() => void onDiscord()}>
-                Discord
+              <button type="button" className="tray-btn" onClick={() => void shareStory("instagram")}>
+                Instagram
               </button>
               {walkPath ? (
                 <button type="button" className="tray-btn" onClick={() => void onCopyWalk()}>
@@ -348,6 +401,9 @@ function FileTray({ proof, onClose }: { proof: Proof; onClose: () => void }) {
             ) : (
               <span className="tray-btn tray-btn-primary opacity-40">Save the file</span>
             )}
+            <button type="button" className="tray-btn" onClick={() => void onCopyFile()}>
+              Copy JSON
+            </button>
           </div>
         )}
       </div>

src/components/how-it-works.tsx

@@ -23,25 +23,25 @@ const BEATS = {
     { n: "01", title: "Rip", body: "Tear the foil. Ten from the whole book. Or open it." },
     { n: "02", title: "Five", body: "No franchise. No era. Turn five names." },
     { n: "03", title: "Circle", body: "Peak, mix, spread. Not 82 nights." },
-    { n: "04", title: "Send", body: "The serial is the plate. The URL is the certificate." },
+    { n: "04", title: "Send", body: "Save the plate. Share the walk." },
   ],
   wnba: [
     { n: "01", title: "Pull", body: "A W club, era, luck. One pull." },
     { n: "02", title: "Rip", body: "Tear the W pack. Ten carbon backs. Turn five." },
     { n: "03", title: "Forty", body: "Honest length. Not 82." },
-    { n: "04", title: "Send", body: "The serial is the plate. The URL is the certificate." },
+    { n: "04", title: "Send", body: "Save the plate. Share the walk." },
   ],
   corners: [
     { n: "01", title: "Pull", body: "Franchise, era, luck. One pull." },
     { n: "02", title: "Deal", body: "The pack is G / G / F / F / C. Corners hold." },
     { n: "03", title: "Walk", body: "Then 82 nights, same as the machine." },
-    { n: "04", title: "Send", body: "The serial is the plate. The URL is the certificate." },
+    { n: "04", title: "Send", body: "Save the plate. Share the walk." },
   ],
   playoff: [
     { n: "01", title: "Pull", body: "Franchise, era, luck. One pull." },
     { n: "02", title: "Rip", body: "Ten face-down. Turn five." },
     { n: "03", title: "Sixteen", body: "Four rounds. Banner or out." },
-    { n: "04", title: "Send", body: "The serial is the plate. The URL is the certificate." },
+    { n: "04", title: "Send", body: "Save the plate. Share the walk." },
   ],
   keepers: [
     { n: "01", title: "KEEP", body: "That call fills the five. TRADE and CUT stay on the desk." },

src/components/press-furniture.tsx

@@ -1,9 +1,10 @@
 import type { PointerEvent, ReactNode } from "react";
 import { Link, useNavigate } from "@tanstack/react-router";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { RipPack } from "@/components/rip-pack";
 import { useSpecular } from "@/lib/hooks";
 import { markDemo } from "@/lib/demo-funnel";
+import { FRANCHISES } from "@/lib/nba";
 import { cn } from "@/lib/utils";
 
 export function PressStage({
@@ -93,6 +94,10 @@ export function StepRail({
 export function PackHero() {
   const navigate = useNavigate();
   const [ripping, setRipping] = useState(false);
+  const [club, setClub] = useState<string | undefined>(undefined);
+  useEffect(() => {
+    setClub(FRANCHISES[Math.floor(Math.random() * FRANCHISES.length)]);
+  }, []);
   const well = useRef<HTMLDivElement>(null);
   useSpecular(well);
 
@@ -139,7 +144,7 @@ export function PackHero() {
       >
         <div className="pack-float">
           <div className="pack-tilt">
-            <RipPack lot="live:home" ripping={ripping} onRip={go} />
+            <RipPack lot={`live:home:${club}`} team={club} ripping={ripping} onRip={go} />
           </div>
         </div>
       </div>

src/components/studio-file.tsx

@@ -14,7 +14,7 @@ export function ExportStudioButton({
     <Button
       variant={tone === "ghost" ? "ghost" : "primary"}
       onClick={() => {
-        downloadStudioFile();
+        void downloadStudioFile();
       }}
     >
       {loud ? "Export the desk" : "Export desk"}

src/components/team-reel.tsx

@@ -3,7 +3,7 @@ import { Crest, EraMark, LuckMark, clubAbbr } from "@/components/crest";
 import { ERAS, FRANCHISES, WNBA_FRANCHISES } from "@/lib/nba";
 import { LUCKS } from "@/lib/luck";
 import { tick } from "@/lib/tick";
-import { cn } from "@/lib/utils";
+import { cn, shuffle } from "@/lib/utils";
 
 export function TeamReel<T extends string>({
   items,
@@ -29,15 +29,19 @@ export function TeamReel<T extends string>({
   const [rot, setRot] = useState(0);
   const [armed, setArmed] = useState(false);
   const [landed, setLanded] = useState(false);
-  const n = Math.max(items.length, 1);
+  const [faces, setFaces] = useState<T[]>(() => [...items] as T[]);
+  useEffect(() => {
+    setFaces(shuffle(items));
+  }, [items]);
+  const n = Math.max(faces.length, 1);
   const angle = 360 / n;
   const radius = rowH / (2 * Math.tan(Math.PI / n));
-  const land = target ? Math.max(0, items.indexOf(target as T)) : 0;
-  const clubs = items[0]
-    ? (FRANCHISES as readonly string[]).includes(items[0]) || (WNBA_FRANCHISES as readonly string[]).includes(items[0])
+  const land = target ? Math.max(0, faces.indexOf(target as T)) : Math.floor(n / 2);
+  const clubs = faces[0]
+    ? (FRANCHISES as readonly string[]).includes(faces[0]) || (WNBA_FRANCHISES as readonly string[]).includes(faces[0])
     : false;
-  const eras = items[0] ? (ERAS as readonly string[]).includes(items[0]) : false;
-  const lucks = items[0] ? (LUCKS as readonly string[]).includes(items[0]) : false;
+  const eras = faces[0] ? (ERAS as readonly string[]).includes(faces[0]) : false;
+  const lucks = faces[0] ? (LUCKS as readonly string[]).includes(faces[0]) : false;
   const idle = !target;
   const markSize = compact ? "size-6" : "size-11";
 
@@ -46,7 +50,7 @@ export function TeamReel<T extends string>({
     if (!node) return;
     const h = node.offsetHeight;
     if (h > 0) setRowH(h);
-  }, [items, compact]);
+  }, [faces, compact]);
 
   useEffect(() => {
     rested.current = false;
@@ -120,7 +124,7 @@ export function TeamReel<T extends string>({
             rest();
           }}
         >
-          {items.map((name, i) => (
+          {faces.map((name, i) => (
             <div
               key={`${name}-${i}`}
               ref={i === 0 ? rowRef : undefined}

src/lib/deliver.test.ts

@@ -1,6 +1,20 @@
 import assert from "node:assert/strict";
 import { test } from "node:test";
-import { asShareFile, canUseSavePicker, discordCopy, facebookIntent, redditIntent, shareAttempts, shareSheetOk, threadsIntent, tweetIntent } from "./deliver.ts";
+import {
+  asShareFile,
+  canUseSavePicker,
+  discordCopy,
+  discordOpen,
+  facebookIntent,
+  linkedinIntent,
+  redditIntent,
+  shareAttempts,
+  shareSheetOk,
+  telegramIntent,
+  threadsIntent,
+  tweetIntent,
+  whatsappIntent,
+} from "./deliver.ts";
 
 test("share attempts send the file, never files plus url, never text as the card", () => {
   const file = new File(["png"], "first-bucket-thunder-58.png", { type: "image/png" });
@@ -75,3 +89,12 @@ test("discord copy is caption plus the public walk", () => {
   assert.match(text, /Thunder/);
   assert.match(text, /first-bucket-studios\.vercel\.app\/walk/);
 });
+
+test("whatsapp, telegram, linkedin, and discord open real destinations", () => {
+  const walk = "https://first-bucket-studios.vercel.app/walk/v1.OKC";
+  assert.match(whatsappIntent("51–31 Thunder", walk), /wa\.me/);
+  assert.match(telegramIntent("51–31 Thunder", walk), /t\.me\/share/);
+  assert.match(linkedinIntent(walk), /linkedin\.com\/sharing/);
+  assert.equal(discordOpen(), "https://discord.com/channels/@me");
+  assert.equal(linkedinIntent("/walk/v1.OKC").includes("url="), false);
+});