Hero made by @ybouane.

@crazygl/hero-database-core

A central 3D database core — a stack of slowly rotating cylindrical disks with glowing seams. Query pulses radiate across the floor and flash through the core's seams; configurable satellite shapes orbit around it. Built for data platforms, ORMs, and infrastructure landing pages.

Demo

Database Core

Install

npm install @crazygl/hero-database-core

Usage

import DatabaseCore from '@crazygl/hero-database-core';

export default function Page() {
  return (
    <DatabaseCore
      heading="The database, reimagined."
      diskCount={6}
      seamColor="#62f0ff"
      pulseRate={0.8}
      ctaLabel="Start free"
    />
  );
}

Customise

• Content — contentType, heading, subheading, ctaLabel, onCTAClick.
• Core — diskCount (3–12), diskColor, seamColor, glowIntensity, coreHeight.
• Pulses — pulseRate (/s), pulseStrength, pulseColor.
• Satellites — satelliteCount, satelliteColor, satelliteOrbitRadius.
• Motion — autoRotate, autoRotateSpeed, parallaxStrength.
• Background — transparentBackground, bgColor, bgGradient (radial vignette).

Best for

• Serverless / managed database landing pages (Postgres-as-a-service, vector DBs, query layers).
• ORM, data-platform, and pipeline tools.
• Cloud infrastructure and developer SaaS where "live and scalable" is the pitch.
• AI / inference platforms wanting a calm, technical centrepiece.

This hero is part of CrazyGL, a collection of production-ready WebGL, canvas, 3D, and typography effects. Every CrazyGL hero ships with an agent-ready SKILL.md file that helps developers and coding agents adapt the effect into custom landing pages and interactive experiences.