"use client"; import * as React from "react"; import { motion, useScroll, useTransform } from "motion/react"; import { AreaChart } from "./charts"; import { Badge } from "./badge"; import { QuoteIcon } from "@kineticui/icons"; const growth = [ { m: "Jan", before: 42, after: 42 }, { m: "Feb", before: 44, after: 48 }, { m: "Mar", before: 43, after: 55 }, { m: "Apr", before: 45, after: 61 }, { m: "May", before: 46, after: 66 }, { m: "Jun", before: 47, after: 72 }, ]; /** Case study: parallax hero, at-a-glance facts, challenge/solution/result sections, metric chart and a pull quote. */ export function CaseStudy() { const ref = React.useRef(null); const { scrollYProgress } = useScroll({ target: ref, offset: ["start start", "end start"] }); const y = useTransform(scrollYProgress, [0, 1], [0, 120]); const scale = useTransform(scrollYProgress, [0, 1], [1, 1.15]); return (

Case studyFintech

How Orbit lifted retention 38% by making money move

{[ ["The challenge", "Orbit's app felt static. Users didn't trust balance updates because numbers changed without explanation, and support tickets about \"missing money\" were the top category."], ["The approach", "We rebuilt every money movement as a physical animation: transfers fly between accounts, balances roll digit by digit, and pending items pulse until settled. All on Kinetic UI springs, with reduced-motion fallbacks."], ].map(([h, t], i) => ( 0{i + 1}

{h}

{t}

))}

Support tickets about balances dropped by two-thirds in the first month. People finally understood where their money went.

Priya Raman, Head of Product at Orbit

The result

Thirty-day retention climbed steadily after launch while the control group stayed flat.

`${v}%`} showLegend />

); }

Case Study

Installation