Modules/ PricingFree

3D Floating Orb Pricing

Ethereal pricing page featuring Three.js floating orbs with organic movement, iridescent shaders, and bloom post-processing. Each pricing tier is represented by a unique glowing orb with interactive mouse tracking.

Install

npm install three @react-three/fiber @react-three/drei @stripe/stripe-js stripe

Usage guide

## Usage Guide\n\n### Orb Customization\nEdit `ORBS` array to change names, prices, sizes, colors, and positions. Each orb\'s `size` affects its visual scale and the text offset.\n\n### Bloom & Glow\nThe `EffectComposer` with `Bloom` gives orbs their ethereal glow. Higher `intensity` = more bloom, `luminanceThreshold` controls which pixels bloom.\n\n### Floating Motion\nEach orb has independent sine-wave floating (controlled by `index` offset), plus mouse-responsive movement that creates a gravitational pull effect.