CrazyGLCrazyGLHomeExploreGitHubBrowse heroesLoading hero…← Back to gallery@crazygl/floating-ceramic-ui

Floating Ceramic UI

A matte ceramic-like tablet panel with rounded edges presents your dashboard screenshot under soft studio lighting. The slab breathes through a slow yaw oscillation with subtle pointer-driven tilt; ambient occlusion sells the screen-to-bezel seam.

ReactWebGL3DImageInteractiveFont#3d#ceramic#saas#dashboard#pbr#hdri#three#screenshot

Usage

import FloatingCeramicUI from '@crazygl/hero-floating-ceramic-ui';

export default function Page() {
  return (
    <FloatingCeramicUI
      heading="Built for clarity."
      screenshot="https://example.com/dashboard.png"
      panelTint="#f7f3ee"
      rotationAmplitude={8}
    />
  );
}

Customise

  • Screen — screenshot (aspect derived from the image), screenshotScale, screenshotX/Y, screenBrightness.
  • Panel — panelTint, panelRoughness, panelClearcoat, panelDepth, panelBevel, roughnessVariation, sheenStrength, subsurfaceTint.
  • Motion — rotationAmplitude, rotationSpeed, pointerParallax, tiltX.
  • Lighting — keyLight*, fillLight*, envIntensity, exposure, shadowOpacity.
  • Background — transparentBackground, bgTopColor, bgBottomColor.

Best for

  • Premium SaaS launch and pricing pages.
  • Fintech and analytics dashboard products.
  • AI productivity tools and polished admin / developer-platform sites showing off an app screen.
01 · Install the package

One command, zero config.

npm install @crazygl/hero-floating-ceramic-ui
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 FloatingCeramicUI from '@crazygl/hero-floating-ceramic-ui';

export default function Landing() {
  return (
    <FloatingCeramicUI />
  );
}
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 FloatingCeramicUI from '@crazygl/hero-floating-ceramic-ui';

export default function Page() {
  return (
    <section>
      <FloatingCeramicUI
        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

Floating Screen Recording

A product demo screenshot or video floats on a screen panel with an animated cursor, a glowing motion trail, expanding click ripples, and a zoom-lens magnifier that highlights UI moments.

Calm Cloud Interface

A SaaS dashboard floats among soft cloud sprites under a friendly cream-to-sky-blue sky. Pointer drift parallaxes both the camera and the layered clouds for a light, approachable, effortless mood.

Product Pedestal

A 3D product model rests on a minimal floating pedestal under studio HDRI lighting. Slow turntable rotation, soft contact shadow, drifting dust, subtle mouse parallax, and press-and-drag to free-spin the product.

Product Turntable Studio

A 3D product model rotates on a premium polished turntable disc beside the hero copy. Studio HDRI lighting, warm key and cool fill softboxes, drag to free-spin, and pointer hover-zoom — a high-end product launch in code.

White Infinity Studio

A 3D product GLB floats in a bright seamless infinity studio — the floor sweeps continuously up into the back wall with no visible seam. Three-point softbox lighting, a soft floor reflection, and a very subtle camera dolly sell the look of a premium catalogue photoshoot.

Floating Product

A 3D product model drifts and slowly turns in a quiet studio atmosphere. The model wears its own PBR textures; soft dust particles drift through the air around it.Live customizer

Floating Ceramic UI

ScreenshotAny dashboard / app PNG, JPG, WebP, or AVIF. The plane derives its aspect from the loaded image; the bezel stays even on all sides.Screen size0.92Fraction of the front face the screen inset occupies. 0.92 leaves a tasteful ceramic bezel; push to 0.98 for a max-screen look.Screen offset X0worldNudges the screen inset along the panel's local X. Default 0 is centred.Screen offset Y0worldNudges the screen inset along the panel's local Y. Default 0 is centred.Screen brightness1How emissive the screen appears. 1.0 reads as a powered display; <0.8 reads as a print.Panel scale1Overall size of the slab in the frame.Ceramic tintOff-white default reads as warm porcelain. Dial toward black for matte obsidian.Surface roughness0.55Matte finish at 0.55. Below 0.35 reads as glazed; above 0.8 reads as bisque.Clearcoat0.4Thin polish layer over the matte ceramic body. 0.4 gives the glazed-porcelain shoulder pop; 0 reads as bisque.Panel thickness0.12How thick the slab is along Z. Thicker reads as a heavy ceramic tablet; thinner as a magazine cover.Edge radius0.08Corner / edge radius. Larger = softer, more pillow-like.Roughness variation0.4Amplitude of the procedural FBM gloss variation across the surface. 0 = perfectly uniform matte (plastic-y); 0.4 = realistic ceramic patches; 1 = strongly mottled.Sheen strength0.5The warm shoulder sheen that ceramics share with fabrics. 0 = inert dielectric; 0.5 = polished porcelain glow; 1 = velvet-ceramic.Subsurface tintWarm hue that bleeds through the first millimeter of the ceramic glaze — picked up by the emissive baseline and the grazing-angle SSS injection. Default is a cream warmth.Rotation amplitude8°Half-angle of the slow yaw oscillation. The panel sweeps between -A and +A.Rotation speed0.52Angular frequency of the yaw oscillation in radians/sec. Default ~0.52 gives a ~12s full sweep.Pointer parallax0.35How much the cursor adds on top of the ambient yaw + a hint of pitch. 0.35 is a subtle product cue.Base tilt-3°Static pitch on the panel. A slight negative tips the top toward the camera for a flattering portrait pose.Key lightWarm key directional that defines the shoulder highlight.Key intensity1.4Fill lightCool ambient fill. Keeps the dark side from going inky.Fill intensity0.35Env intensity0.85Strength of the PMREM HDRI on the ceramic. Ceramic should NOT look mirror-bright.Exposure1Drop shadow0.55Soft ground shadow underneath the panel.Transparent backgroundDrop the gradient so the panel composites cleanly over your page background.BG topBG bottomHeading FontInteractivityWhich input drives the hero — try Scroll if you want the page to drive motion.CrazyGL · crazygl.comProgrammable hero sections for real websites.