❌

Normal view

I built Detent, an open-source React wheel picker with spring physics, morphing text, and rolling numbers

I’ve just released Detent, a React wheel picker that grew into a much bigger exploration of interaction details.

The wheel has its own momentum and spring physics. I spent a lot of time tuning mouse wheel input alongside trackpads, including the awkward cases where a physical scroll wheel keeps spinning after you let go.

It also includes two separate components:

  • Detent Text: matching letters stay while the changed parts roll.
  • Detent Number: locale-aware formatting with digits that roll through intermediate values.

The examples range from practical time and date pickers to an arc menu, a zoom ring, and some more experimental visual treatments.

There’s a headless hook, separate imports for text and numbers, keyboard support, reduced motion, and no additional runtime dependencies beyond React and React DOM.

Demos and playground: https://detent.hayder.sh
Intro: https://x.com/kghayder/status/2118373654010466733?a=PzCQRSXhM5m8KUTdHk8&s=20

I’d especially appreciate feedback on how the wheel feels with your mouse or trackpad, and whether the API makes sense for something you’d actually build.

submitted by /u/hayderkg to r/reactjs
[link] [comments]

Jonas Schmedtmann vs Maximilian Schwarzmüller for react?

I've taken Jonas Schmedtmann's HTML + CSS and JavaScript course and am soon going to start learning react and I am wondering if I should just stick with Jonas or try Maximilian. If you've taken any of these courses or both I'd really love to hear your opinion on it and how they differ and who they are for!

submitted by /u/2TB_NVME to r/reactjs
[link] [comments]

I made a fintech hero where the balance rolls like an odometer when a payment lands (React + Framer Motion)

How it works, since people usually ask:

  • The odometer: each digit is its own reel of 0–9 stacked vertically, and it slides to y = −digit × 10% with a 0.9s ease-out. Commas and the $ sign never move, only digits roll. Screen readers get the plain value through an sr-only span.
  • The balance and the feed share one tick (every 3.4s): a new transaction slides in at the top of the feed and the balance is recomputed from the ledger, so the two can never disagree.
  • The payout is a tiny state machine: Sent → Converted → Arrived, 1.1s per step, then it holds 2.6s and starts over.
  • On wide screens it's a staggered bento that runs off the fold, on tablets 2×2, on phones a swipeable row. With reduced motion everything holds still.

Free to copy if it's useful: https://ui.deliverwebsite.com/components/hero-sections/fintech-hero-section-with-gradient-cards/

Feedback on the motion very welcome. I'm trying to make every animation say something about the product

submitted by /u/poojadeliverwebsite to r/reactjs
[link] [comments]

I made a portfolio where you type your startup idea and it builds it as you scroll

I'm a product engineer who builds MVPs for founders. A normal portfolio says "I build apps, websites, dashboards and AI features." I wanted mine to show it instead.

How it works:
- You type an idea in the hero ("a dog-walking app")
- It's handwritten onto a sticky note that unfolds into a 3D board
- As you scroll, the board builds the mobile app, the website, the admin dashboard, the AI features and the automations
- It ends on "Shipped." with your idea's name, and the contact section says "Let's ship Dog-Walking App."

Other bits:
- A "What goes in v1?" sorter: drag features into v1, later or cut, and a split-flap board shows the weeks to launch
- Testimonials shown as the messages they arrived in
- A live GitHub activity map
- A pixel pet that wanders around

Stack: Next.js, three.js, GSAP, Lenis, Tailwind. The 3D boards are drawn in canvas, not models.

Link in the comments. Roast it. What would you type in first?

submitted by /u/Upset_World953 to r/reactjs
[link] [comments]
❌