Dither sculpture

Depth-tested sculptural forms printed as ordered dots, halftone, error diffusion or stipple.

React · copy into your project · light and dark themes

Try it

Variant

A form, a thousand small dots.

A small print study: the shadows become dots and the light leaves room for paper.

Zoom100%

Drag to turn. Arrow keys rotate, + / − zoom, Home resets. Touch: swipe sideways to turn.

Form

Ink color

Print pattern

Grain size

3px

Follow pointer

Try your own shapeLocal only. GLB, filled SVG, PNG or JPEG. Up to 8 MiB and 4 million image pixels. Images become a shallow luminance relief; model materials are replaced by ink.

Loading preview…

Take it with you

Copy the example, API and usage notes for your editor or AI assistant.

Add to your project

Terminal

npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/dither-sculpture.json

The command includes the component’s shared dependencies. Your project keeps editable source files.

Include the complete example

This example also composes glyph-sculpture, ink-sculpture, sculpture-orbit, button, card, input, label, native-select, slider, switch, typography. Install its parts together:

Terminal

npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/glyph-sculpture.json https://luv-jeri.github.io/cojeev-ui/r/dither-sculpture.json https://luv-jeri.github.io/cojeev-ui/r/ink-sculpture.json https://luv-jeri.github.io/cojeev-ui/r/sculpture-orbit.json https://luv-jeri.github.io/cojeev-ui/r/button.json https://luv-jeri.github.io/cojeev-ui/r/card.json https://luv-jeri.github.io/cojeev-ui/r/input.json https://luv-jeri.github.io/cojeev-ui/r/label.json https://luv-jeri.github.io/cojeev-ui/r/native-select.json https://luv-jeri.github.io/cojeev-ui/r/slider.json https://luv-jeri.github.io/cojeev-ui/r/switch.json https://luv-jeri.github.io/cojeev-ui/r/typography.json

Using dither sculpture

Choose pattern="ordered", "halftone", "diffusion" or "stipple". grainSize is 1.5–9px and density is 0.5–1.6. Patterns respond to actual surface lighting and depth.
Pass form="bloom", "seed" or "pebble", or supply immutable geometry with positions, optional triangles and normals. Invalid geometry reports onGeometryError and keeps a built-in form.
Use turn, pitch and zoom for explicit orientation; wrap with SculptureOrbit for native drag, keyboard, zoom and reset controls. Pausing optional motion does not disable direct orientation changes.
loadSculptureFile accepts local self-contained GLB, filled SVG, PNG or JPEG up to 8 MiB. Image limits are 4 million pixels. Images become luminance reliefs; imported materials are replaced by the selected native ink tone. Imports never upload the file.
Use paused or speed=0 for a still sculpture. Decorative rendering stops while offscreen, hidden, reduced-motion, Flow Off or Motion Off.

API

Compose the exported parts below. The prop types are read from the React source during the registry build.

Native element or underlying primitive props are inherited where declared, including accessible labels, event handlers and refs.

DitherSculptureProps

Prop	Type	Required
`form`	`GlyphForm`	No
`tone`	`GlyphTone`	No
`geometry` Immutable triangle geometry. Centered and fitted to a unit sphere; invalid geometry exposes an error.	`SculptureGeometryInput`	No
`speed`	`number`	No
`turn`	`number`	No
`pitch`	`number`	No
`zoom`	`number`	No
`pointerTracking`	`boolean`	No
`paused`	`boolean`	No
`onGeometryError`	`(error: Error) => void`	No
`pattern`	`DitherPattern`	No
`grainSize`	`number`	No
`density`	`number`	No

Accessibility

The rendered sculpture is decorative. Put any essential information in adjacent readable text and native controls.
SculptureOrbit supplies labelled keyboard controls; optional hover tracking has no essential action.
A static fallback remains when Canvas2D is unavailable. Failed local imports report an actionable message and retain the previous sculpture.

States and appearance

movingpausedcustom-geometryorbitfallbackreduced-motion

For conditional content, keep a MotionPresence boundary around keyed MotionSurface children. The shared entrance and exit states work with native primitives and respect your motion preference.

Try pointer and keyboard interaction, and switch the appearance control in the navigation to compare light and dark mode. Motion respects reduced motion preferences.