Skip to content
SloplessTry the picker

Signature look · 3d

R3F floating object

A single 3D object (the product or a brand form) floats in the hero, idles with a slow bob and turns towards the pointer; drag to rotate. Built with React Three Fiber and drei.

Id
r3f-floating-object
Cost
about 210 KB of JavaScript (gzipped), counted against the design's performance budget
Stacks
Next.js, Astro
Motion
Respect prefers-reduced-motion with a static fallback (shown below)

What the agent must do

  • Build the object as a React Three Fiber <Canvas> component; in Astro mount it as a React island with client:visible, in Next.js load it with next/dynamic and ssr: false.
  • Use a single GLB (Draco or meshopt compressed, under 1.5 MB) or a primitive; light it with one environment map and colours from tokens.json; drei <Float> for the idle motion.
  • Render a static poster image (same framing) in the server HTML and swap to the canvas once it has loaded; set frameloop="demand" when idle and stop rendering off-screen.
  • Under prefers-reduced-motion, disable Float and auto-rotation and keep the poster unless the user drags; on phones keep the poster only.
  • This look needs React: it is not available for SvelteKit or plain HTML (use webgl-hero-scene there).

Required skills (the agent asks before installing, per project)

threejs-react-three-fiber
React Three Fiber + drei scenes in React/Next.js: Canvas setup, frame loop, adaptive performance. Source: CloudAI-X/threejs-skills, reviewed 2026-10-24 at 6b45dfe78f2c.
npx skills add CloudAI-X/threejs-skills#6b45dfe78f2cc9204178cc1f3694ba9d3d972f38 --skill threejs-react-three-fiber

Running demo, in Bento Tech

The preview renderer's stand-in for this look on the hero of a Bento Tech design. It shows where the look lives and how much of the screen it takes; the real effect is built with the skills above.

Full reference renderTry it in the picker

Northfold
  • About
  • Contact
Read case studiesStart a project

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies

Corvid Robotics — identity

06

Booking projects from June 2026

Strategy and design for companies that make things

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Corvid Robotics

Fieldstack

Tidewater Labs

Arklow Valves

Mosswood Bio

Desktop
Northfold
  • About
  • Contact
Start a project

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies

Corvid Robotics — identity

06

Booking projects from June 2026

Strategy and design for companies that make things

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Phone

Reduced-motion fallback

What visitors with prefers-reduced-motion: reduce must get: the same layout, no movement.

Northfold
  • About
  • Contact
Read case studiesStart a project

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies

Corvid Robotics — identity

06

Booking projects from June 2026

Strategy and design for companies that make things

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Corvid Robotics

Fieldstack

Tidewater Labs

Arklow Valves

Mosswood Bio

Desktop, prefers-reduced-motion: reduce
Northfold
  • About
  • Contact
Start a project

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a projectRead case studies

Corvid Robotics — identity

06

Booking projects from June 2026

Strategy and design for companies that make things

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Phone, reduced motion

Styles it suits

Bento TechFrosted GlassMaximalist CollageSynthwave Retro-FutureY2K Chrome