✦ 20 R3F Components · Copy-Paste Ready · 60fps Guaranteed

Add 3D to Your
Next Project Today

20 production-ready React Three Fiber components — animated orbs, particle systems, geometric shapes, product mockups, glassmorphism cards, 3D text, and Spline wrappers. One good component changes everything.

Get Instant Access — $47 → Browse All 20 Components
The 20 Components

Every 3D Effect Your Site Needs

No WebGL expertise required. Each component is plug-and-play with clear props — and every one is written for real production performance.

Hero Scenes
HeroScene.tsx

Complete animated hero background — particle fields, floating orbs, atmospheric fog, and mouse parallax. 3-line setup in Next.js.

Drop-inMouse ParallaxFog
Hero Scenes
FloatingOrb

The orb every top landing page uses. Distortion shader, inner glow, floating animation. Fully configurable colour, size, and speed.

Distortion ShaderInner Glow
Particle Systems
ParticleField

3,000 particles in a sphere. GPU-optimised with BufferGeometry. Under 2ms frame time. Zero layout impact.

3,000 particlesGPU-optimised
Particle Systems
ParticleFieldDepth

Three-layer parallax particle system with depth effect. Each layer moves at a different speed for convincing 3D depth.

3-Layer ParallaxDepth Effect
Geometric Shapes
Rotating Torus

Elegant torus with configurable rotation speed and material. Metallic, wireframe, neon, and glass variants included.

MetallicWireframeNeonGlass
Geometric Shapes
DNA Helix

Animated double helix with configurable point count, colour, and rotation speed. Stunning for science and tech brands.

AnimatedConfigurable
Geometric Shapes
Orbital Rings

Multiple rings orbiting at different speeds and angles. Perfect for SaaS dashboards and data visualisation heroes.

Multi-ringVariable speed
Geometric Shapes
Infinite Grid

The classic infinite perspective grid — evocative of Tron. Configurable colour, line spacing, and fade distance.

InfinitePerspective
Glass & Cards
GlassCard3D

Floating glassmorphism card with hover tilt — rendered in WebGL for perfect glass refractions.

Hover TiltRefraction
Glass & Cards
GlassCardHTML

Pure CSS glassmorphism card for when you want the glass look without canvas overhead. Perfect performance.

CSS OnlyZero Canvas
3D Text
Text3D (5 variants)

Extruded 3D text in five stunning material variants. Each variant achieves a completely different aesthetic.

MetallicNeon FlickerHolographicGlassMatte
3D Text
StaggeredText3D

Animated letter-by-letter text reveal in 3D. Works with any font. Configurable stagger delay and entry animation.

Letter StaggerConfigurable
Product Mockups
PhoneMockup3D

Rotating 3D phone with configurable screen content. Auto-rotates, responds to hover, renders your UI inside.

Auto-RotateHover Response
Product Mockups
DashboardMockup

Animated floating dashboard UI mockup in 3D perspective. Perfect for SaaS landing pages.

3D PerspectiveFloat Animation
Spline Wrappers
SplineEmbed

Lazy-loaded Spline scene with loading state and fallback. Prevents layout shift on load.

Lazy LoadFallback
Spline Wrappers
SplineHero

Fullscreen Spline scene with a content overlay layer. Your copy sits over the 3D scene perfectly.

FullscreenContent Overlay
Spline Wrappers
SplineInteractive

Event-driven Spline with React callback support. Trigger React state changes from Spline events.

Event-DrivenReact Callbacks
Geometric Shapes
FloatingIcosahedron

Geometric floating icosahedron with configurable rotation and material. Works in all four material variants.

WireframeMetallic
Performance First

60fps on Real Hardware

3D that tanks your LCP is worse than no 3D. Every component is engineered to look great without killing performance.

📐
dpr LimitsHigh-DPI display protection — won't over-render on Retina screens.
⚡
BufferGeometryParticle systems computed GPU-side. Under 2ms frame time on mid-range hardware.
🔄
useRef AnimationsAnimation loops use refs, not state — no unnecessary React re-renders.
🗑️
Proper DisposalGeometries and materials disposed correctly. No memory leaks on unmount.
🖥️
SSR SafeDynamic import patterns for Next.js App Router — no server-side canvas errors.
📱
Mobile GuideGuidelines for dialling down complexity on lower-end devices included.

Works with

React Next.js 15 App Router Vite Remix Astro Spline (optional)
Pricing

20 Components. One Payment.

$47$97

Launch price · Instant download

  • 20 production-ready React Three Fiber components
  • Hero scenes with particle fields and orbs
  • 5 geometric shapes with 4 material variants each
  • 3D text in 5 material variants
  • Phone and dashboard product mockups
  • 3 Spline wrapper components
  • Glass cards — 3D canvas and pure CSS versions
  • Performance-first code with disposal patterns
  • Next.js SSR dynamic import guide
  • Commercial use — unlimited client projects
Get Instant Access — $47 →

📦 Download and run in 5 minutes · 30-day refund if not satisfied

FAQ

Questions

No. Each component is plug-and-play with clear props. The README explains everything including Next.js SSR setup. If you can use a React component, you can use these.
Yes — the README includes the dynamic import pattern to prevent SSR errors. One copy-paste and it works.
Designed for real production use. The HeroScene runs at 60fps on mid-range hardware. Guidelines are included for dialling down complexity for lower-end devices.
Yes — Spline has a generous free tier. The wrappers work with any Spline scene URL. You can also use all the non-Spline components without any Spline account.
Yes — the single-user license covers unlimited personal and client projects. You can't resell the components themselves.

Stop staring at flat websites.

One particle field behind your headline separates you from 95% of your competition. Add 3D to your next project this week.

Get the 3D Component Kit — $47 →