Feather Sphere
Feather Sphere is an interactive background in the UI HUB interactive backgrounds collection. A procedural feather sphere rendered with Three.js ShaderMaterial: one fragment shader on a 160x120 SphereGeometry builds sawtooth feather tiers with per-tooth random heights (a five-stop deep-rose to porcelain-white radiant ramp), a luminous pole-convergence highlight and an ambient starfield, looped at a stepped 25 f…
The component is driven by 4 documented props (className, style, showHint, hintText), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: Three.js ShaderMaterial with custom GLSL; ResizeObserver on the stage container; requestAnimationFrame loop with stepped shader clock.
Preview the interactive background in the browser above, copy the source, and paste it into your project. Interactive Backgrounds components in UI HUB are grouped by category so you can compare effects side by side before choosing one.
What is Feather Sphere?
A procedural feather sphere built from one fragment shader: sawtooth feather tiers ramp from deep rose to porcelain white, a luminous pole glow and starfield sit on a near-black stage, and the pointer eases a tilt and steers the light while drag spins, scroll zooms and double-click toggles 2.5x speed.
Feather Sphere at a glance
- Category
- Interactive Backgrounds
- Pricing
- Free to use
- Libraries
- React, Three.js and motion
- Styling
- Tailwind CSS
- Configurable props
- 4
- AI prompts
- Ready for Advance, Antigravity, Claude Code, Cursor, Lovable
How Feather Sphere works
A procedural feather sphere rendered with Three.js ShaderMaterial: one fragment shader on a 160x120 SphereGeometry builds sawtooth feather tiers with per-tooth random heights (a five-stop deep-rose to porcelain-white radiant ramp), a luminous pole-convergence highlight and an ambient starfield, looped at a stepped 25 fps over a 0.96s reference cycle. The sphere is transformed by a fixed pole-aligned basis so the feather streaks converge at a reference screen position. Pointer movement eases a subtle tilt and steers the specular light with a soft glow term; dragging adds spin velocity with throw momentum that decays and settles back, scrolling eases an orthographic zoom between 0.55x and 1.9x, and double-click toggles the loop between 1x and 2.5x speed (dragging also slows the loop to 0.35x while held). An intro motion eases the zoom from 0.7 to 1 and fades the hint in after 1.2s.
Technical information for Feather Sphere
| Category | Interactive Backgrounds |
|---|---|
| Libraries | React, Three.js and motion |
| Styling | Tailwind CSS |
| Rendering | WebGL shaders, HTML canvas, ResizeObserver, requestAnimationFrame |
| State change | resting feather sphere with the hint hidden to tilted and lit by the pointer with momentum spin, zoomed by wheel or sped up by double-click |
| Props | 4 configurable |
| Usage example | Not published yet |
What Feather Sphere requires
- Three.js ShaderMaterial with custom GLSL
- ResizeObserver on the stage container
- requestAnimationFrame loop with stepped shader clock
- Pointer event listeners with pointer capture for drag
- Wheel listener with preventDefault for zoom
- Motion (animate) for intro zoom and hint fade
- prefers-reduced-motion matchMedia gating
Feather Sphere questions
What is Feather Sphere?
A procedural feather sphere built from one fragment shader: sawtooth feather tiers ramp from deep rose to porcelain white, a luminous pole glow and starfield sit on a near-black stage, and the pointer eases a tilt and steers the light while drag spins, scroll zooms and double-click toggles 2.5x speed.
How does Feather Sphere work?
A procedural feather sphere rendered with Three.js ShaderMaterial: one fragment shader on a 160x120 SphereGeometry builds sawtooth feather tiers with per-tooth random heights (a five-stop deep-rose to porcelain-white radiant ramp), a luminous pole-convergence highlight and an ambient starfield, looped at a stepped 25 fps over a 0.96s reference cycle. The sphere is transformed by a fixed pole-aligned basis so the feather streaks converge at a reference screen position. Pointer movement eases a subtle tilt and steers the specular light with a soft glow term; dragging adds spin velocity with throw momentum that decays and settles back, scrolling eases an orthographic zoom between 0.55x and 1.9x, and double-click toggles the loop between 1x and 2.5x speed (dragging also slows the loop to 0.35x while held). An intro motion eases the zoom from 0.7 to 1 and fades the hint in after 1.2s.
Which category does Feather Sphere belong to?
Feather Sphere is listed under Interactive Backgrounds in the UI HUB catalog. Interactive backgrounds react to cursor movement, scroll and pointer position, so the page feels alive instead of static. Every background here is built as a real React component with configurable props, so you can tune colours, density and speed rather than shipping a black box. Preview one in the browser, read the props, then copy the code straight into your project.
What does the className prop do in Feather Sphere?
Optional class applied to the root container. It defaults to "".
What does the style prop do in Feather Sphere?
Optional inline styles for the root container. It defaults to {}.
Is Feather Sphere free to use?
Feather Sphere is a free component on UI HUB. You can preview it in the browser and read the full props table on the component page.
Which libraries does Feather Sphere use?
Feather Sphere uses React, Three.js and motion and is styled with Tailwind CSS.
What does Feather Sphere need to run?
Feather Sphere needs Three.js ShaderMaterial with custom GLSL, ResizeObserver on the stage container, requestAnimationFrame loop with stepped shader clock and Pointer event listeners with pointer capture for drag.