CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/crystal-logo-prism

Logo Inside a Crystal

A slowly rotating crystal prism (3D ray-marched rounded cube) with your logo suspended inside as a glowing emissive mesh. Per-channel IOR refraction on the cube faces splits white light into rainbow seams; caustic highlights pool on the virtual floor; soft bloom on the inner emission.

ReactWebGLImageInteractiveFont#crystal#prism#logo#refraction#chromatic-aberration#dispersion#raymarching#caustics#bloom#premium

Usage

import CrystalLogoPrism from '@crazygl/hero-crystal-logo-prism';

export default function Page() {
  return (
    <CrystalLogoPrism
      heading="Held in crystal."
      logo="https://crazygl.com/samples/crazygl.svg"
      logoEmission="#9be5ff"
      dispersion={0.055}
      ior={1.5}
    />
  );
}

Customise

  • Content — heading / subheading, or switch contentType to two-columns / custom node.
  • Logo — logo (SVG/PNG; sampled to an alpha mask), logoEmission color, logoBrightness.
  • Crystal — crystalSize, crystalRound edge round-off, crystalCenterX lateral position, rotSpeed, tiltX.
  • Optics — ior (green channel), dispersion rainbow spread, fresnel rim, specGloss, absorbHex inner tint.
  • Caustics & Bloom — causticStrength, causticHex, bloom on the inner logo.
  • Background / Behavior — bgTop, bgBottom, vignette, pointerParallax.

Best for

  • Premium SaaS and brand launch pages
  • Luxury product, jewelry, and identity-system showcases
  • Web3 / fintech landing pages wanting a "hand-cut light" signature
  • Agency and design-studio portfolios
01 · Install the package

One command, zero config.

npm install @crazygl/hero-crystal-logo-prism
02 · Render the component

Import once, drop it in.

The component takes the same props you see in the live customizer on the right — every default ships poster-quality.

hero.tsx
import LogoInsideACrystal from '@crazygl/hero-crystal-logo-prism';

export default function Landing() {
  return (
    <LogoInsideACrystal />
  );
}
03 · Use it in a page

SSR-safe by default.

The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.

page.tsx
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';

import LogoInsideACrystal from '@crazygl/hero-crystal-logo-prism';

export default function Page() {
  return (
    <section>
      <LogoInsideACrystal
        heading="Say hi."
        subheading="Your new hero."
      />
      <article>
        <h2>Welcome</h2>
        <p>Your content keeps its own voice below the hero.</p>
      </article>
    </section>
  );
}
You might also like

Similar heroes

Crystal Refraction Field

Six raymarched octahedral crystals drift across the screen, refracting the background through each face with per-channel chromatic dispersion at the rim.

Glass Cube Maze

Raymarched lattice of transparent glass cubes drifting in 3D space. The cursor orbits the camera, and chromatic dispersion paints rainbow rims along the hits.

Ice Encased Logo

Your logo is frozen inside a chunky beveled cube of real refractive ice. Three.js MeshPhysicalMaterial with IOR 1.31, clearcoat, Beer-Lambert blue attenuation and chromatic dispersion bends the studio HDRI around the brand. Frost on the front face melts on load to reveal the logo inside a clear ice-cube body.

Liquid Glass Badge Logo

Your logo becomes a thick translucent liquid-glass badge that refracts a user-supplied photograph through its biconvex body. Per-channel IORs paint a real rainbow seam at the rim, the interior reads as frosted glass, and a 4-light Blinn-Phong studio rig sells the volume. Falls back to a rotating gradient backdrop when no image is supplied.

Glass Logo Sculpture

Upload a logo (SVG / PNG / GLB) and watch it become a real 3D glass paperweight: Three.js MeshPhysicalMaterial with true volumetric transmission, per-wavelength dispersion, clearcoat, Beer-Lambert attenuation, ContactShadows, an HDRI-lit studio rig and pointer-driven parallax orbit that visibly bends the photographic background through the body.

Liquid Data Core

A glowing ray-marched glass sphere with refracted, dispersed inner orbits of data points — a living analytics engine that reacts to the cursor.Live customizer

Logo Inside a Crystal

Logo (SVG/PNG)The silhouette is sampled into an alpha texture and rendered as the inner emissive mesh visible through the crystal.Logo emissionSelf-illuminated colour of the logo inside the crystal. Bright enough to read through the chromatic refraction.Logo brightness1.4Multiplier on the emission intensity. Above 2 starts to bloom over the rim.Background topBackground bottomVignette0.55Crystal size1.05Half-extent of the rounded box in world units.Edge round-off0.18Rounding radius on the cube edges. 0.02 = razor-sharp cube, 0.4 = nearly a sphere.Crystal horizontal position0.32Lateral offset so heading text can sit opposite. 0 = centred. Beyond ±0.9 the crystal sits near the canvas edge.Rotation speed0.25Slow Y-axis rotation. 0 freezes the crystal.Tilt down0.2Static X-axis tilt — angles the cube so two adjacent faces catch light.IOR (green channel)1.5Glass = 1.5, sapphire ≈ 1.77, diamond ≈ 2.42. The red and blue channels are offset by the dispersion slider.Chromatic dispersion0.055Spread of IOR between R/G/B. 0 = no rainbow, 0.055 = real crown glass, 0.15+ = exaggerated prism.Fresnel rim1.1Schlick edge brightening — the silver-bright halo at glancing angles.Specular gloss1Inner tintBeer-Lambert-style absorption colour. Slight blue is the natural shade of clean crystal.Floor caustics0.9Bright wavy puddles below the crystal — light that passed through the prism.Caustic colourBloom on inner logo1Soft glow around bright pixels — fakes a real bloom pass for the emissive logo.Pointer parallax1How much the camera shifts toward the cursor. 0 = locked, 1 = subtle, 2 = exaggerated.Heading FontInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.