Sphere Shader

A glowing 3D sphere rendered with Three.js and a bloom pass, for hero sections.

Updated Nov 6, 2026Added Mar 10, 2026Changelog

motionthreethree-stdlib@react-three/fiber@react-three/drei@types/three

Preview

Installation

pnpm dlx shadcn@latest add @satoriui/sphere-shader

Adds components/satori-ui/sphere-shader.tsx to your project and installs its dependencies.

Usage

app/page.tsx

import SphereShader from "@/components/satori-ui/sphere-shader";
export default function Example() {
  return (
    <SphereShader className="h-[480px]" />
  );
}

Examples

Beside a heading

Give it a height and set fill to size the moon inside it.

Mission 07

Night side, live

Telemetry from the far side, streamed as it lands.

Props

className: Classes for the wrapper. Give it a size: the canvas fills it. The black background can be swapped for another, such as "bg-transparent".
Typestring
fill: How much of the container's shorter side the moon spans, from 0.1 to 1.5 (above 1 it overflows the edges).
TypenumberDefault0.8
reducedMotion: "user" follows a surrounding MotionConfig, then the visitor's reduce-motion setting. "always" and "never" force the calm or the full version.
Type"user""always""never"Default"user"

Also takes every <div> prop, such as className, style and event handlers.

Reduced motion

Sphere Shader follows the visitor's “reduce motion” device setting on its own: movement, blur and looping effects stop, and fades stay. Use the Reduced motion button on the preview to see that version. To decide yourself, set the reducedMotion prop on one instance, or wrap a whole section or app in Motion's MotionConfig.

app/page.tsx

// Follows the visitor's device setting (the default, "user")
<SphereShader />
// Always the calm version, or always full motion
<SphereShader reducedMotion="always" />
<SphereShader reducedMotion="never" />
// Or for everything inside, with Motion's MotionConfig
import { MotionConfig } from "motion/react";
<MotionConfig reducedMotion="always">
  <SphereShader />
</MotionConfig>

PreviousFluid ShaderShaders