"use client" import { useRef, useMemo, useCallback, useEffect, useState } from "react" import { Canvas, useFrame, useThree, ThreeEvent } from "@react-three/fiber" import * as THREE from "three" // --------------------------------------------------------------------------- // Constants — wider proportions matching the pricing card reference // --------------------------------------------------------------------------- const COLS = 22 const ROWS = 30 const RECEIPT_WIDTH = 2.6 const RECEIPT_HEIGHT = RECEIPT_WIDTH * (30 / 22) const REST_X = RECEIPT_WIDTH / (COLS - 1) const REST_Y = RECEIPT_HEIGHT / (ROWS - 1) const DAMPING = 0.992 const GRAVITY = -0.1 const CONSTRAINT_ITERATIONS = 12 const GRAB_RADIUS = 0.4 const GRAB_STRENGTH = 0.4 const GRAB_Z_LIFT = 0.3 const TEX_W = 700 const TEX_H = Math.round(TEX_W * (RECEIPT_HEIGHT / RECEIPT_WIDTH)) // --------------------------------------------------------------------------- // Types // --------------------------------------------------------------------------- interface Particle { x: number; y: number; z: number ox: number; oy: number; oz: number px: number; py: number; pz: number pinned: boolean } interface Constraint { a: number; b: number; rest: number; stiffness: number } // --------------------------------------------------------------------------- // Cloth simulation // --------------------------------------------------------------------------- function createParticles(): Particle[] { const particles: Particle[] = [] for (let row = 0; row < ROWS; row++) { for (let col = 0; col < COLS; col++) { const x = col * REST_X - RECEIPT_WIDTH / 2 const y = -row * REST_Y + RECEIPT_HEIGHT / 2 particles.push({ x, y, z: 0, ox: x, oy: y, oz: 0, px: x, py: y, pz: 0, pinned: row === 0, }) } } return particles } function createConstraints(): Constraint[] { const constraints: Constraint[] = [] const add = (a: number, b: number, stiffness: number) => { const ax = (a % COLS) * REST_X, ay = Math.floor(a / COLS) * REST_Y const bx = (b % COLS) * REST_X, by = Math.floor(b / COLS) * REST_Y constraints.push({ a, b, rest: Math.hypot(ax - bx, ay - by), stiffness }) } for (let row = 0; row < ROWS; row++) { for (let col = 0; col < COLS; col++) { const i = row * COLS + col if (col < COLS - 1) add(i, i + 1, 1.0) if (row < ROWS - 1) add(i, i + COLS, 1.0) if (col < COLS - 1 && row < ROWS - 1) add(i, i + COLS + 1, 0.7) if (col > 0 && row < ROWS - 1) add(i, i + COLS - 1, 0.7) if (col < COLS - 2) add(i, i + 2, 0.35) if (row < ROWS - 2) add(i, i + COLS * 2, 0.35) } } return constraints } function useClothSimulation() { const particles = useRef(createParticles()) const constraints = useRef(createConstraints()) const grabbed = useRef<{ idx: number; weight: number }[]>([]) const grabTarget = useRef(new THREE.Vector3()) const isGrabbing = useRef(false) const step = useCallback((dt: number) => { const ps = particles.current const cs = constraints.current const t2 = Math.min(dt, 0.025) ** 2 for (let i = 0; i < ps.length; i++) { const p = ps[i] if (p.pinned) continue const vx = (p.x - p.px) * DAMPING const vy = (p.y - p.py) * DAMPING const vz = (p.z - p.pz) * DAMPING p.px = p.x; p.py = p.y; p.pz = p.z p.x += vx p.y += vy + GRAVITY * t2 p.z += vz - p.z * 0.02 } if (isGrabbing.current) { const t = grabTarget.current for (const g of grabbed.current) { const p = ps[g.idx] if (p.pinned) continue const w = g.weight * GRAB_STRENGTH p.x += (t.x - p.x) * w p.y += (t.y - p.y) * w p.z += (t.z + GRAB_Z_LIFT * g.weight - p.z) * w } } for (let iter = 0; iter < CONSTRAINT_ITERATIONS; iter++) { for (let i = 0; i < cs.length; i++) { const c = cs[i] const pa = ps[c.a], pb = ps[c.b] const dx = pb.x - pa.x, dy = pb.y - pa.y, dz = pb.z - pa.z const dist = Math.sqrt(dx * dx + dy * dy + dz * dz) if (dist < 1e-6) continue const diff = (dist - c.rest) / dist * 0.5 * c.stiffness const ox = dx * diff, oy = dy * diff, oz = dz * diff if (!pa.pinned) { pa.x += ox; pa.y += oy; pa.z += oz } if (!pb.pinned) { pb.x -= ox; pb.y -= oy; pb.z -= oz } } } }, []) const grab = useCallback((point: THREE.Vector3) => { const ps = particles.current const hits: { idx: number; weight: number }[] = [] for (let i = 0; i < ps.length; i++) { const d = Math.hypot(ps[i].x - point.x, ps[i].y - point.y, ps[i].z - point.z) if (d < GRAB_RADIUS) { const t = d / GRAB_RADIUS hits.push({ idx: i, weight: (1 - t) * (1 - t) }) } } grabbed.current = hits grabTarget.current.copy(point) isGrabbing.current = hits.length > 0 return hits.length > 0 }, []) const move = useCallback((point: THREE.Vector3) => { grabTarget.current.copy(point) }, []) const release = useCallback(() => { grabbed.current = [] isGrabbing.current = false }, []) return { particles, step, grab, move, release, isGrabbing } } // --------------------------------------------------------------------------- // Receipt texture — pricing card, near-white, black ink // --------------------------------------------------------------------------- function drawReceipt(canvas: HTMLCanvasElement) { const dpr = 3 canvas.width = TEX_W * dpr canvas.height = TEX_H * dpr const ctx = canvas.getContext("2d")! ctx.scale(dpr, dpr) const w = TEX_W const h = TEX_H const px = 52 const ink = "#111" const inkMed = "#222" const serif = 'Georgia, "Times New Roman", serif' const mono = '"Courier New", Courier, monospace' // Near-white paper ctx.fillStyle = "#f5f3ef" ctx.fillRect(0, 0, w, h) // Zigzag torn edges const zigH = 12 const zigW = 18 ctx.globalCompositeOperation = "destination-out" ctx.fillStyle = "#000" ctx.beginPath() ctx.moveTo(0, 0) for (let x = 0; x <= w; x += zigW) { ctx.lineTo(Math.min(x + zigW / 2, w), zigH) ctx.lineTo(Math.min(x + zigW, w), 0) } ctx.closePath() ctx.fill() ctx.beginPath() ctx.moveTo(0, h) for (let x = 0; x <= w; x += zigW) { ctx.lineTo(Math.min(x + zigW / 2, w), h - zigH) ctx.lineTo(Math.min(x + zigW, w), h) } ctx.closePath() ctx.fill() ctx.globalCompositeOperation = "source-over" // Subtle grain for (let i = 0; i < 3000; i++) { ctx.fillStyle = `rgba(0,0,0,${Math.random() * 0.015})` ctx.fillRect(Math.random() * w, Math.random() * h, 1, 1) } // Rules const dashedRule = (atY: number) => { ctx.save() ctx.strokeStyle = "rgba(0,0,0,0.25)" ctx.lineWidth = 1.5 ctx.setLineDash([4, 6]) ctx.beginPath() ctx.moveTo(px, atY) ctx.lineTo(w - px, atY) ctx.stroke() ctx.restore() } let y = zigH + 58 // Heading — bold italic serif ctx.fillStyle = ink ctx.font = `bold italic 56px ${serif}` ctx.textAlign = "center" ctx.fillText("It\u2019s free", w / 2, y) y += 62 dashedRule(y) y += 36 // Line items: serif label left, mono value right with strikethrough on "Free" const items: [string, string, boolean][] = [ ["GPT-5.2, Claude Sonnet 4.5,", "Free", true], ["Token usage", "Unlimited", false], ["Additional team members", "Unlimited", false], ["All API and MCP Integrations", "Free", true], ["SOC2 Compliance", "Free", true], ] const drawStrike = (val: string, atY: number) => { const tw = ctx.measureText(val).width ctx.strokeStyle = ink ctx.lineWidth = 1.5 ctx.setLineDash([]) ctx.beginPath() ctx.moveTo(w - px - tw - 3, atY - 5) ctx.lineTo(w - px + 3, atY - 5) ctx.stroke() } // First item has a second line ctx.fillStyle = ink ctx.font = `19px ${serif}` ctx.textAlign = "left" ctx.fillText(items[0][0], px, y) ctx.font = `bold 20px ${mono}` ctx.textAlign = "right" ctx.fillText(items[0][1], w - px, y) drawStrike(items[0][1], y) y += 26 ctx.font = `19px ${serif}` ctx.textAlign = "left" ctx.fillText("Gemini 3 Pro Preview", px, y) y += 30 dashedRule(y) y += 36 for (let i = 1; i < items.length; i++) { ctx.fillStyle = ink ctx.font = `19px ${serif}` ctx.textAlign = "left" ctx.fillText(items[i][0], px, y) ctx.font = `bold 20px ${mono}` ctx.textAlign = "right" ctx.fillText(items[i][1], w - px, y) if (items[i][2]) drawStrike(items[i][1], y) y += 28 dashedRule(y) y += 36 } // Total y += 4 ctx.fillStyle = ink ctx.font = `19px ${serif}` ctx.textAlign = "left" ctx.fillText("Total:", px, y) ctx.font = `bold 28px ${mono}` ctx.textAlign = "right" ctx.fillText("$0.00", w - px, y + 4) y += 52 // CTA button const btnH = 54 const btnR = 10 const btnW = w - px * 2 ctx.fillStyle = ink ctx.beginPath() ctx.roundRect(px, y, btnW, btnH, btnR) ctx.fill() ctx.fillStyle = "#f5f3ef" ctx.font = `bold 19px ${serif}` ctx.textAlign = "center" ctx.fillText("Get started for Free", w / 2, y + btnH / 2 + 7) y += btnH + 32 // Footer ctx.fillStyle = inkMed ctx.font = `14px ${mono}` ctx.textAlign = "center" ctx.fillText("Get started today, no credit card required.", w / 2, y) y += 20 ctx.fillText("Check our terms of service for more information.", w / 2, y) } function useReceiptTexture() { const texture = useMemo(() => { const canvas = document.createElement("canvas") drawReceipt(canvas) const tex = new THREE.CanvasTexture(canvas) tex.minFilter = THREE.LinearFilter tex.magFilter = THREE.LinearFilter tex.colorSpace = THREE.SRGBColorSpace return tex }, []) return texture } // --------------------------------------------------------------------------- // Cloth mesh // --------------------------------------------------------------------------- function ClothMesh({ sim, onGrabChange, }: { sim: ReturnType onGrabChange: (active: boolean) => void }) { const meshRef = useRef(null!) const texture = useReceiptTexture() const { gl, camera } = useThree() const isDragging = useRef(false) const dragPlane = useRef(new THREE.Plane(new THREE.Vector3(0, 0, 1), 0)) const raycaster = useRef(new THREE.Raycaster()) const pointer = useRef(new THREE.Vector2()) const hitPoint = useRef(new THREE.Vector3()) useEffect(() => { texture.anisotropy = gl.capabilities.getMaxAnisotropy() }, [texture, gl]) const geometry = useMemo( () => new THREE.PlaneGeometry(RECEIPT_WIDTH, RECEIPT_HEIGHT, COLS - 1, ROWS - 1), [] ) useFrame((_, delta) => { sim.step(delta) const pos = geometry.attributes.position as THREE.BufferAttribute const ps = sim.particles.current for (let i = 0; i < ps.length; i++) { pos.setXYZ(i, ps[i].x, ps[i].y, ps[i].z) } pos.needsUpdate = true geometry.computeVertexNormals() }) const projectPointer = useCallback( (clientX: number, clientY: number) => { const rect = gl.domElement.getBoundingClientRect() pointer.current.set( ((clientX - rect.left) / rect.width) * 2 - 1, -((clientY - rect.top) / rect.height) * 2 + 1 ) raycaster.current.setFromCamera(pointer.current, camera) raycaster.current.ray.intersectPlane(dragPlane.current, hitPoint.current) return hitPoint.current }, [gl, camera] ) const onPointerDown = useCallback( (e: ThreeEvent) => { e.stopPropagation() const hit = sim.grab(e.point) if (hit) { isDragging.current = true onGrabChange(true) ;(e.target as HTMLElement)?.setPointerCapture?.(e.nativeEvent.pointerId) } }, [sim, onGrabChange] ) useEffect(() => { const el = gl.domElement const onMove = (e: PointerEvent) => { if (!isDragging.current) return sim.move(projectPointer(e.clientX, e.clientY)) } const onUp = () => { if (!isDragging.current) return isDragging.current = false sim.release() onGrabChange(false) } el.addEventListener("pointermove", onMove) el.addEventListener("pointerup", onUp) el.addEventListener("pointerleave", onUp) return () => { el.removeEventListener("pointermove", onMove) el.removeEventListener("pointerup", onUp) el.removeEventListener("pointerleave", onUp) } }, [gl, sim, projectPointer, onGrabChange]) return ( ) } // --------------------------------------------------------------------------- // Scene // --------------------------------------------------------------------------- function Scene({ onGrabChange }: { onGrabChange: (active: boolean) => void }) { const sim = useClothSimulation() return ( <> ) } // --------------------------------------------------------------------------- // Main export // --------------------------------------------------------------------------- export default function ReceiptPaper() { const [reducedMotion, setReducedMotion] = useState(false) const [grabbing, setGrabbing] = useState(false) useEffect(() => { const mq = window.matchMedia("(prefers-reduced-motion: reduce)") setReducedMotion(mq.matches) const handler = (e: MediaQueryListEvent) => setReducedMotion(e.matches) mq.addEventListener("change", handler) return () => mq.removeEventListener("change", handler) }, []) const onGrabChange = useCallback((active: boolean) => { setGrabbing(active) }, []) return (

) }