Energy Core

Composition

A glowing distorting core wrapped by three tilted rings orbiting at different speeds.

Usage

Install: three @react-three/fiber @react-three/drei

Drop <EnergyCore /> inside your own <Canvas>.

Mood: Powerful, reactor-like, alive. An energy source or AI core.
Colors: Violet glowing core with cyan, magenta, and violet rings. Heavy bloom.
Motion: The core churns and spins while three rings rotate at different speeds and tilts, like an atom.

View component source

import { useRef } from 'react';
import { useFrame } from '@react-three/fiber';
import { MeshDistortMaterial } from '@react-three/drei';
import type { Group, Mesh } from 'three';

const RINGS: { tilt: [number, number, number]; radius: number; speed: number; color: string }[] = [
  { tilt: [Math.PI / 2, 0, 0], radius: 1.25, speed: 0.6, color: '#22e0ff' },
  { tilt: [Math.PI / 2, 0, Math.PI / 3], radius: 1.45, speed: -0.45, color: '#ff2fd0' },
  { tilt: [Math.PI / 2.6, Math.PI / 4, 0], radius: 1.65, speed: 0.35, color: '#8a5cff' },
];

export default function EnergyCore({ color = '#8a5cff', scale = 1 }: { color?: string; scale?: number }) {
  const core = useRef<Mesh>(null);
  const rings = useRef<(Group | null)[]>([]);

  useFrame((state, dt) => {
    if (core.current) core.current.rotation.y += dt * 0.4;
    const t = state.clock.elapsedTime;
    rings.current.forEach((g, i) => {
      if (g) g.rotation.z = t * RINGS[i].speed;
    });
  });

  return (
    <group scale={scale}>
      <mesh ref={core}>
        <icosahedronGeometry args={[0.7, 6]} />
        <MeshDistortMaterial
          color={color}
          emissive={color}
          emissiveIntensity={0.9}
          distort={0.35}
          speed={3}
          roughness={0.2}
          metalness={0.3}
        />
      </mesh>
      {RINGS.map((r, i) => (
        <group key={i} ref={(el) => (rings.current[i] = el)} rotation={r.tilt}>
          <mesh>
            <torusGeometry args={[r.radius, 0.012, 16, 160]} />
            <meshBasicMaterial color={r.color} toneMapped={false} />
          </mesh>
        </group>
      ))}
    </group>
  );
}