proNew283 lines · framer-motion, three

Hero Noise Orb

One glowing core, never quite still. A centred hero built around a three.js icosphere whose surface is displaced by a custom vertex-shader noise and rim-lit with a fresnel glow in a hand-written fragment shader.

Use it for: Products pitched around one powerful central idea: an AI core, an engine, a model — something that should feel alive at rest.
Themes: Light + dark
License: Commercial use

Live

Core · Always on

A living core for your product

A distorted glowing orb that never sits still, for products built around one powerful, central idea.

Get started →See how it works

tsx

"use client";

import * as React from "react";
import { motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

/**
 * Centred hero whose focal point is a three.js icosphere whose surface is
 * displaced by a cheap sum-of-sines "noise" in a custom vertex shader, with a
 * fresnel rim glow in the fragment shader. three.js is imported lazily.
 */

export interface HeroNoiseOrbProps {
  eyebrow?: string;
  headline?: string;

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→three.js is imported lazily; a subdivided icosphere's vertices are displaced along their normals by a cheap sum-of-sines field evaluated per-vertex in a custom ShaderMaterial vertex shader.
→The fragment shader rim-lights the surface with a fresnel term and mixes between two theme colours (--signal/--info) based on how far each point is currently displaced.
→speed scales the time fed into the displacement field; intensity scales the displacement amplitude; wireframe swaps the solid shaded surface for a wireframe read.
→Moving the pointer over the orb adds a small rotation offset on top of the constant auto-rotation.
→Colours are read from computed CSS custom properties and refreshed on every .dark class toggle via MutationObserver.
→If the WebGLRenderer can't acquire a context, a static conic-gradient circle stands in for the orb.
→Render loop pauses off-screen and when the tab is hidden; prefers-reduced-motion renders one still frame.
→On unmount: cancels the frame, disposes the geometry and shader material, calls renderer.dispose() + renderer.forceContextLoss(), and removes the canvas.

Accessibility

✓The orb canvas and its fallback are aria-hidden; only the eyebrow, heading, copy and two real <a> CTAs are exposed to assistive tech.
✓Headline is a single <h1>; the ambient glow behind the orb is a plain decorative div, also aria-hidden.
✓CTAs keep the design system's visible focus ring.
✓Honours prefers-reduced-motion.