# Cork Board Testimonials with Pinned Portrait Postcards That Swing, Unpin and Turn over to a Handwritten Note > Testimonial board of portrait postcards on map pins: they sway when brushed, then unpin and turn over to a handwritten note. Free React and HTML code. A shadcn/ui block from the [@weinc](https://we.inc/components?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/weinc/cork-board-testimonials-with-pinned-portrait-postcards-that-swing-unpin-and-turn-over-to-a-handwritten-note). - Page, with a live preview: https://shadcn.exchange/r/weinc/cork-board-testimonials-with-pinned-portrait-postcards-that-swing-unpin-and-turn-over-to-a-handwritten-note - Screenshot: https://shadcn.exchange/shot/weinc/cork-board-testimonials-with-pinned-portrait-postcards-that-swing-unpin-and-turn-over-to-a-handwritten-note/light.png - Registry item: https://we.inc/r/cork-board-testimonials-with-pinned-portrait-postcards-that-swing-unpin-and-turn-over-to-a-handwritten-note.json - Listed: 2026-10-28, source last changed 2026-10-28 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/weinc/cork-board-testimonials-with-pinned-portrait-postcards-that-swing-unpin-and-turn-over-to-a-handwritten-note.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - npm packages: `framer-motion` ## Files ### `components/we-inc/cork-board-testimonials-with-pinned-portrait-postcards-that-swing-unpin-and-turn-over-to-a-handwritten-note.tsx` ```tsx import { useCallback, useEffect, useRef, useState } from "react"; import { useReducedMotion } from "framer-motion"; /** One postcard per person: the photograph is the front, the words are written on the back. */ const cards = [ { name: "Imani Okafor", role: "Founder", company: "Saltmarsh Ceramics", city: "Porto", date: "14 MAR", quote: "You rebuilt our shop in three weeks and it finally looks the way the pots feel in your hand. My mother rang to ask who took the pictures.", sign: "Imani", pin: "#d7352a", photo: { src: "https://images.pexels.com/photos/30878711/pexels-photo-30878711.jpeg?auto=compress&cs=tinysrgb&w=800", alt: "Woman with sculpted braids and red eye make-up in a red striped top against a yellow wall", tone: "#f0b400", focus: "50% 22%" }, }, { name: "Tomas Rivera", role: "Owner", company: "Rivera Cycle Works", city: "Valencia", date: "02 JUN", quote: "I sent a page of scribbles on a Sunday night. By Wednesday there was a booking page my mechanics could actually use with greasy thumbs.", sign: "Tomas", pin: "#f2c230", photo: { src: "https://images.pexels.com/photos/11492642/pexels-photo-11492642.jpeg?auto=compress&cs=tinysrgb&w=800", alt: "Man in a black jacket sitting on a wooden stool in front of an orange studio backdrop", tone: "#e8860c", focus: "50% 30%" }, }, { name: "Noor Haddad", role: "Head of Brand", company: "Fieldnote Coffee", city: "Amman", date: "27 SEP", quote: "Every agency told us to pick one colour and behave. You let the bags stay loud and made the rest of the page quiet enough to hear them.", sign: "Noor x", pin: "#1f55d8", photo: { src: "https://images.pexels.com/photos/7515731/pexels-photo-7515731.jpeg?auto=compress&cs=tinysrgb&w=800", alt: "Profile of a woman with slicked-back hair in a red top, half lit against a yellow and red backdrop", tone: "#e9a60a", focus: "50% 40%" }, }, { name: "Desmond Achebe", role: "Florist", company: "Stem and Thorn", city: "Accra", date: "09 DEC", quote: "The launch went out on a Friday and I spent Saturday wrapping peonies instead of answering emails. That has never happened before.", sign: "Des", pin: "#f4efe6", photo: { src: "https://images.pexels.com/photos/9955031/pexels-photo-9955031.jpeg?auto=compress&cs=tinysrgb&w=800", alt: "Man in a white beret and white jacket holding a pink peony against a deep blue backdrop", tone: "#1d4f86", focus: "50% 26%" }, }, { name: "Leila Mbeki", role: "Director", company: "Longroom Records", city: "Durban", date: "21 JAN", quote: "We asked for a site. We got somebody who listened to the whole back catalogue first and then argued with us about the running order.", sign: "Leila", pin: "#18996b", photo: { src: "https://images.pexels.com/photos/32174976/pexels-photo-32174976.jpeg?auto=compress&cs=tinysrgb&w=800", alt: "Woman with an afro and silver bracelets holding her hands to her hair against a red backdrop", tone: "#d2332b", focus: "50% 24%" }, }, ]; // A card is drawn at reading size and scaled down while it hangs. const CW = 340; const CH = 480; const PIN_Y = 22; // where the pin goes through, measured from the top edge // Two arrangements: a wide board and a tall one for phones. homes are [pin x, pin y, hanging angle]. const WIDE = { w: 1100, h: 680, rest: 0.56, open: 1, cx: 550, cy: 346, homes: [[152, 66, -3], [296, 372, 2.4], [550, 92, -1.4], [812, 366, -2.2], [950, 62, 3.2]] }; const TALL = { w: 400, h: 700, rest: 0.365, open: 0.92, cx: 200, cy: 416, homes: [[74, 46, -3], [200, 62, 1.6], [112, 262, 2.4], [326, 42, 3], [292, 270, -2.6]] }; const ORDER = [2, 0, 4, 1, 3]; // the order the board reads itself out in const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v)); const lerp = (a: number, b: number, t: number) => a + (b - a) * t; const ease = (t: number) => t * t * (3 - 2 * t); const svg = (s: string) => `url("data:image/svg+xml,${encodeURIComponent(s)}")`; // pressed cork: coarse granules, dark crevices between them and fine grit on top const CORK = svg( ``, ); const GRAIN = svg( ``, ); const HAND = `"Bradley Hand", "Segoe Print", "Noteworthy", "Marker Felt", cursive`; const INK = "#1c2a5a"; type Sim = { th: number; w: number; o: number; ov: number; target: number; pin: number; pinV: number; pinUp: boolean }; export default function CorkBoardPostcards() { const reduce = !!useReducedMotion(); const rootRef = useRef(null); const sceneRef = useRef(null); const wrapRefs = useRef<(HTMLDivElement | null)[]>([]); const cardRefs = useRef<(HTMLDivElement | null)[]>([]); const shadeRefs = useRef<(HTMLDivElement | null)[]>([]); const glareRefs = useRef<(HTMLDivElement | null)[]>([]); const pinRefs = useRef<(HTMLDivElement | null)[]>([]); const [tall, setTall] = useState(false); const [open, setOpen] = useState(null); const openRef = useRef(open); const sim = useRef(cards.map(() => ({ th: 0, w: 0, o: 0, ov: 0, target: 0, pin: 0, pinV: 0, pinUp: false }))); const env = useRef({ scale: 1, touched: false, inside: false, visible: true, layout: WIDE }); const paint = useCallback((i: number) => { const L = env.current.layout; const c = sim.current[i]; const [px, py, rest] = L.homes[i]; const e = clamp(c.o, 0, 1); const s = lerp(L.rest, L.open, c.o); const x = (L.cx - px) * e; const y = (L.cy - (CH / 2 - PIN_Y) * L.open - py) * e + Math.sin(e * Math.PI) * 20; const ang = (rest + c.th) * (1 - e) - 1.6 * e; const flip = 180 * ease(clamp((c.o - 0.12) / 0.74, 0, 1)); const card = cardRefs.current[i]; const shade = shadeRefs.current[i]; const wrap = wrapRefs.current[i]; const glare = glareRefs.current[i]; const pin = pinRefs.current[i]; const base = `translate3d(${x.toFixed(2)}px, ${y.toFixed(2)}px, 0) rotate(${ang.toFixed(3)}deg) scale(${s.toFixed(4)})`; if (card) card.style.transform = `${base} rotateY(${flip.toFixed(2)}deg)`; if (shade) { shade.style.transform = `${base} scaleX(${Math.max(0.06, Math.abs(Math.cos((flip * Math.PI) / 180))).toFixed(3)})`; shade.style.setProperty("--lift", e.toFixed(3)); } // the card stays under its pin until the pin has let go, then comes forward of everything if (wrap) wrap.style.zIndex = c.o > 0.28 ? "40" : c.o > 0.015 ? "20" : "10"; if (glare) glare.style.transform = `translate3d(${(c.th * 9).toFixed(1)}px, 0, 0)`; if (pin) pin.style.setProperty("--up", clamp(c.pin, 0, 1.3).toFixed(3)); }, []); const toggle = useCallback( (i: number | null, byHand: boolean) => { if (byHand) env.current.touched = true; const next = i !== null && openRef.current === i ? null : i; openRef.current = next; setOpen(next); sim.current.forEach((c, k) => { const t = k === next ? 1 : 0; if (c.target !== t) { c.target = t; c.pinUp = true; } if (reduce) { c.o = t; c.th = 0; c.pinUp = false; c.pin = 0; paint(k); } }); }, [paint, reduce], ); // size the scene to its box and pick the arrangement useEffect(() => { const root = rootRef.current; const scene = sceneRef.current; if (!root || !scene) return; const measure = () => { const narrow = root.clientWidth < 700; const L = narrow ? TALL : WIDE; const sc = clamp(root.clientWidth / L.w, 0.5, 1.12); env.current.scale = sc; env.current.layout = L; root.style.height = `${Math.round(L.h * sc)}px`; scene.style.width = `${L.w}px`; scene.style.height = `${L.h}px`; scene.style.transform = `translateX(-50%) scale(${sc.toFixed(4)})`; setTall(narrow); cards.forEach((_, i) => paint(i)); }; measure(); const ro = new ResizeObserver(measure); ro.observe(root); return () => ro.disconnect(); }, [paint]); useEffect(() => { cards.forEach((_, i) => paint(i)); }, [tall, paint]); // the swing of every card on its pin, and the trip out to the middle and back useEffect(() => { if (reduce) { toggle(ORDER[0], false); return; } const root = rootRef.current; if (!root) return; const e = env.current; let raf = 0; let last = performance.now(); let gust = 1.4; let step = 0; let wait = 0.45; const tick = (now: number) => { raf = 0; const dt = Math.min(0.032, (now - last) / 1000); last = now; // a draught crosses the board now and then gust -= dt; if (gust < 0) { gust = 3.4 + Math.random() * 1.6; const dir = Math.random() < 0.5 ? -1 : 1; sim.current.forEach((c, i) => { if (c.target === 0) c.w += dir * (14 + ((i * 37) % 11)); }); } // read the board out by itself until somebody touches it if (!e.touched && !e.inside) { wait -= dt; if (wait < 0) { if (openRef.current === null) { toggle(ORDER[step % ORDER.length], false); step += 1; wait = 4.6; } else { toggle(null, false); wait = 1.1; } } } sim.current.forEach((c, i) => { const rest = c.target === 0 && c.o < 0.02; // pendulum about the pin c.w += (-40 * c.th - 1.5 * c.w) * dt; c.th = clamp(c.th + c.w * dt, -38, 38); // travel c.ov += (72 * (c.target - c.o) - 13.5 * c.ov) * dt; c.o += c.ov * dt; if (c.pinUp && c.target === 1 && c.o > 0.3) c.pinUp = false; if (c.pinUp && c.target === 0 && c.o < 0.045) { c.pinUp = false; c.w += (i % 2 ? 1 : -1) * 46; // pressed home a little off centre } c.pinV += (260 * ((c.pinUp ? 1 : 0) - c.pin) - 22 * c.pinV) * dt; c.pin += c.pinV * dt; if (!rest || Math.abs(c.w) > 0.02 || Math.abs(c.th) > 0.02 || Math.abs(c.pinV) > 0.01) paint(i); }); if (e.visible && !document.hidden) raf = requestAnimationFrame(tick); }; const start = () => { if (!raf && e.visible && !document.hidden) { last = performance.now(); raf = requestAnimationFrame(tick); } }; const io = new IntersectionObserver(([en]) => { e.visible = en.isIntersecting; start(); }); io.observe(root); document.addEventListener("visibilitychange", start); start(); return () => { cancelAnimationFrame(raf); io.disconnect(); document.removeEventListener("visibilitychange", start); }; }, [paint, reduce, toggle]); // a passing pointer knocks the hanging cards const onMove = (ev: React.PointerEvent) => { const scene = sceneRef.current; if (!scene || reduce) return; const e = env.current; const L = e.layout; const r = scene.getBoundingClientRect(); const x = (ev.clientX - r.left) / e.scale; const y = (ev.clientY - r.top) / e.scale; const hw = (CW * L.rest) / 2; L.homes.forEach(([px, py], i) => { const c = sim.current[i]; if (c.target !== 0) return; const below = y - py; if (Math.abs(x - px) < hw + 10 && below > 10 && below < CH * L.rest) c.w -= clamp(ev.movementX, -40, 40) * 0.34 * (below / (CH * L.rest)); }); }; const L = tall ? TALL : WIDE; return (
(env.current.inside = true)} onPointerLeave={() => (env.current.inside = false)} > {/* light falling across the board from the top left, and the corners going dim */}
); } ```