Scene Hero

Installation

Copy the source into your project, or keep it behind a package.

npx shadcn@latest add Tinkerers-Labs/mischief-ui/scene-hero

import { SceneHero } from "mischief-ui/scene-hero"

1"use client"2 3import * as React from "react"4import * as THREE from "three"5import {6  RenderSurface,7  useThemeColors,8  type SurfaceColor,9} from "@/registry/default/render-surface/render-surface"10import { cn } from "@/lib/utils"11 12export type SceneHeroShape =13  "torus-knot" | "icosahedron" | "capsule" | "box" | "torus"14 

Usage

export function Hero() {
  return (
    <SceneHero shape="torus-knot" className="rounded-xl">
      <div className="px-8 py-20 text-center">
        <h1>Built in the open</h1>
      </div>
    </SceneHero>
  )
}

What it needs installed

This is the only component in the collection that reaches for three, and it is an optional peer like every other heavy dependency here. Nothing else in Mischief pulls it in, and the package root does not export this component, because a barrel holding it would fail to resolve for everyone who had not installed three.

npm install mischief-ui three

That is the trade. Around a hundred and fifty kilobytes for anyone who wants a lit object, and nothing at all for everyone else.

Why this one is allowed to be heavy

Everything else in this family is drawn with CSS, a two dimensional canvas, or a single shader, because those were enough. Real geometry, a metal surface that responds to two lights, and depth that survives being rotated are not things a gradient can imitate, and that is the bar a component has to clear before it may ask for a renderer.

The renderer is built once and survives a resize rather than being rebuilt, since a browser will only hand out a few GPU contexts and dragging a window edge should not spend them all.

Coloured by the page it is on

The material takes --primary and the fill light takes --foreground, both read from the mounted element and both updated on the next frame when the theme changes. The background stays transparent, so whatever the section behind it is painted with shows through and the object appears to be standing in the page rather than in a window cut into it.

<SceneHero shape="icosahedron" color="--ring" metalness={0.9} roughness={0.1} />

API

Accessibility

The object is decoration and the canvas is hidden from assistive technology, so a headline placed inside is read exactly as a headline. The lean follows the pointer and returns to centre when it leaves. Under reduced motion one frame is drawn and the object neither turns nor leans.