# Reroute Features > A bento grid of platform features: a processor wheel that reroutes around its own outages, a charge snippet, regions, a vault with its tokens drifting round a glowing lock, payment methods, flat pricing rows, and refunds clearing a Checkpoint of finance rules. A shadcn/ui block from the [@keyframeui](https://keyframeui.com/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/keyframeui/reroute-features). - Page, with a live preview: https://shadcn.exchange/r/keyframeui/reroute-features - Screenshot: https://shadcn.exchange/shot/keyframeui/reroute-features/light.png - Registry item: https://keyframeui.com/r/reroute-features.json - Categories: blocks, feature-sections - Listed: 2026-11-02, source last changed 2026-11-02 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/keyframeui/reroute-features.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - Registry items: `https://keyframeui.com/r/checkpoint.json`, `https://keyframeui.com/r/reroute.json`, `utils` ## Notes from the registry Live preview and the components it's built with: https://keyframeui.com/blocks/feature-sections/reroute-features ## Files ### `registry/blocks/reroute-features.tsx` ```tsx "use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { Checkpoint, type CheckpointRequest, type CheckpointRule } from "@/components/ui/checkpoint"; import { Reroute, type RerouteItem } from "@/components/ui/reroute"; /* ── Content ───────────────────────────────────────────────── * Everything you'd change to make the section yours: the copy * for each cell, the processors on the wheel and the outage it * drills, the snippet, the vault's tokens, the payment methods, * the pricing rows, and the rules a refund has to clear. * ─────────────────────────────────────────────────────────── */ /** The one accent: the hub, the cable, the checks and highlighted values. */ const ACCENT = "#ff3b1f"; const ACCENT_DARK = "#ff5a3c"; const EYEBROW = "Platform"; const HEADLINE = "Every charge finds a way through."; const SUBLINE = "Routing, retries and approvals in one layer between your checkout and your processors."; const ROUTING = { title: "Route around any outage", body: "When a processor stalls, the charge retries on the next healthy one in under 50 ms. Customers never see the error.", }; /** ms: how long a processor stays down in the drill, and the calm between drills. */ const DRILL = { first: 2200, down: 2600, calm: 4200 }; const API = { title: "One API for every processor", body: "Keep the contracts you already have. Switchyard speaks to each processor so your code doesn't have to.", // Kept as lines, not one template string, so no line is read as an import. code: [ ["await", " yard.charges.create({", "", ""], ["", " amount: ", "", "4200,"], ["", " currency: ", "", '"eur",'], ["", " route: ", "", '"best-approval",'], ["", "});", "", ""], ], }; const REGIONS = { title: "Runs in the region you pick", body: "Deploy in the US, the EU or Asia Pacific, and keep card data where your auditors want it.", chips: ["us-east", "eu-central", "ap-southeast"], }; const VAULT = { title: "Card data stays in your vault", body: "Tokens live in your own cloud account, so you can switch processors without moving a single card.", chips: ["•••• 4242", "tok_9fQ2", "exp 08/29", "3DS ✓", "fp_a71c"], }; const METHODS = { stat: "140+", unit: "ways to pay", title: "Local methods in 60 markets", body: "Wallets, bank debits and instant transfers switch on per country, with the right one shown at checkout.", rows: [ ["Cards", "Wallets", "SEPA Debit", "Pix", "UPI", "ACH", "Bank transfer"], ["Pay by link", "BACS", "Installments", "Instant payouts", "BLIK", "FPX"], ["Network tokens", "3-D Secure", "Subscriptions", "Multi-currency", "PayNow", "Boleto"], ], }; const PRICING = { stat: "0 bps", unit: "on your volume", title: "A flat fee, never a cut", body: "One monthly price per environment. Retries, failover and tokens are included, however much you process.", rows: [ { label: "Smart retries", value: "Included" }, { label: "Failover routing", value: "Included" }, { label: "Network tokens", value: "Included" }, ], }; const APPROVALS = { title: "Rules finance signs off on", body: "Refunds and payouts clear your policy first. Anything unusual waits for a second pair of eyes, and every decision is logged.", }; function Mark({ children }: { children: React.ReactNode }) { return ( {children} ); } // Every processor name and mark is made up. const PROCESSORS: RerouteItem[] = [ { id: "northpay", name: "Northpay", detail: "auth 98.4%", icon: ( ), }, { id: "kestrel", name: "Kestrel", detail: "auth 97.9%", icon: ( ), }, { id: "paywell", name: "Paywell", detail: "auth 98.1%", icon: ( ), }, { id: "ledgerline", name: "Ledgerline", detail: "auth 98.7%", icon: ( ), }, { id: "orbit", name: "Orbit Pay", detail: "auth 97.6%", icon: ( ), }, ]; const RULES: CheckpointRule[] = [ { id: "role", label: "Requested by", detail: "Support or finance", value: "SUPPORT" }, { id: "amount", label: "Amount", detail: "Over $500 needs sign-off", value: "≤ $500" }, { id: "destination", label: "Destination", detail: "Back to the card it came from", value: "ORIGINAL" }, { id: "age", label: "Charge age", detail: "Within the refund window", value: "≤ 120 DAYS" }, ]; const REQUESTS: CheckpointRequest[] = [ { id: "r1", label: "refund ch_3Lq8", meta: "$64.00 · Ana, support" }, { id: "r2", label: "refund ch_9Pe2", meta: "$1,240.00 · Ana, support", verdicts: { amount: "hold" } }, { id: "r3", label: "refund ch_2Hx7", meta: "$310.00 to a new card", verdicts: { destination: "block" }, reason: "Refunds go back to the original card", }, ]; /* ── Bits ── */ const REDUCED = "(prefers-reduced-motion: reduce)"; function useReducedMotion() { return React.useSyncExternalStore( (onChange) => { const q = window.matchMedia(REDUCED); q.addEventListener("change", onChange); return () => q.removeEventListener("change", onChange); }, () => window.matchMedia(REDUCED).matches, () => false, ); } function Check({ className }: { className?: string }) { return ( ); } function Cell({ title, body, className, children, bare, center, }: { title: string; body: string; className?: string; children: React.ReactNode; bare?: boolean; /** Center the visual in the space above the caption (the diagram cells). */ center?: boolean; }) { return (
{children}

{title}

{body}

); } /** Chips floating round the vault's glowing lock. They drift a couple of px, slowly, and stop for reduced motion. */ function Vault({ reduced }: { reduced: boolean }) { const chips = React.useRef<(HTMLSpanElement | null)[]>([]); const glow = React.useRef(null); React.useEffect(() => { if (reduced) return; const anims = chips.current.map((el, i) => el?.animate([{ transform: "translateY(0)" }, { transform: `translateY(${i % 2 ? 3 : -3}px)` }], { duration: 2600 + i * 380, direction: "alternate", iterations: Infinity, easing: "ease-in-out", delay: -i * 600, }), ); const g = glow.current?.animate([{ opacity: 0.55 }, { opacity: 1 }], { duration: 2000, direction: "alternate", iterations: Infinity, easing: "ease-in-out", }); return () => { anims.forEach((a) => a?.cancel()); g?.cancel(); }; }, [reduced]); // A 352 × 236 box, scaled to fit: the lock sits low in the middle and the // five chips ride a circle of radius 150 round it, so the arc runs through them. const spots = [ { x: 13, y: 44.5 }, { x: 27.4, y: 22.5 }, { x: 50, y: 12.7 }, { x: 72.6, y: 22.5 }, { x: 87, y: 44.5 }, ]; return (
{VAULT.chips.map((chip, i) => ( { chips.current[i] = el; }} className="absolute will-change-transform" style={{ left: `${spots[i].x}%`, top: `${spots[i].y}%` }} > {chip} ))}
); } /* ── Section ── */ export function RerouteFeatures() { const reduced = useReducedMotion(); const [down, setDown] = React.useState([]); const live = React.useRef(PROCESSORS[0].id); const sectionRef = React.useRef(null); // The routing cell drills an outage now and then, while it's on screen. React.useEffect(() => { const section = sectionRef.current; if (!section) return; let visible = false; let timer = 0; const next = (ms: number, fn: () => void) => { window.clearTimeout(timer); timer = window.setTimeout(fn, ms); }; const drop = () => { if (!visible) return; if (live.current) setDown([live.current]); next(DRILL.down, () => { setDown([]); next(DRILL.calm, drop); }); }; const io = new IntersectionObserver(([entry]) => { const was = visible; visible = entry.isIntersecting; if (visible && !was) next(DRILL.first, drop); if (!visible) { window.clearTimeout(timer); setDown([]); } }); io.observe(section); return () => { io.disconnect(); window.clearTimeout(timer); }; }, []); // Cells rise in, one after another, if the section starts below the fold. React.useEffect(() => { const section = sectionRef.current; if (!section || reduced) return; if (section.getBoundingClientRect().top < window.innerHeight * 0.9) return; const cells = Array.from(section.querySelectorAll("[data-cell]")); cells.forEach((c) => (c.style.opacity = "0")); const io = new IntersectionObserver( ([entry]) => { if (!entry.isIntersecting) return; io.disconnect(); cells.forEach((c, i) => { c.style.opacity = ""; c.animate( [ { opacity: 0, transform: "translateY(14px)" }, { opacity: 1, transform: "translateY(0)" }, ], { duration: 520, delay: i * 60, easing: "cubic-bezier(0.23, 1, 0.32, 1)", fill: "backwards" }, ); }); }, { threshold: 0.12 }, ); io.observe(section); return () => { io.disconnect(); cells.forEach((c) => (c.style.opacity = "")); }; }, [reduced]); return (

{EYEBROW}

{HEADLINE}

{SUBLINE}

{/* Routing */} (live.current = id)} hub={ } /> {/* API + regions, stacked */} 
                {API.code.map(([kw, a, kw2, b], i) => (
                  

                    {kw}
                    {a}
                    {kw2}
                    {b}
                  

                ))}
{REGIONS.chips.map((r, i) => ( {r} ))}
{/* Vault */} {/* Methods + pricing, stacked */}

{METHODS.stat}

{METHODS.unit}

{METHODS.rows.map((row, r) => (
{row.map((m) => ( {m} ))}
))}

{PRICING.stat}

{PRICING.unit}

{PRICING.rows.map((row) => (
{row.label}
{row.value}
))}
{/* Approvals */}
); } ```