Glyph sculpture

A real 3D surface drawn with glyphs, optional contour marks and your own local geometry.

React · copy into your project · light and dark themes

Try it

Variant

A thought, in characters.

Characters gather around a real surface. Turn it and watch the outline find new marks.

                                                                
                                                                
                                                                
                                                                
                                                                
                                  _____                         
                   ______       __@%%#+|                        
                  |@@@%%%___  __@@@%#*+|                        
                  |%%%%%%%##__#%@@%##*=|                        
                  |*#%%%%%###**#%%##*+=|                        
                   |*###%%##****##***+;|                        
                   |+**#####*++**=+#*=:|                        
                    |#%%%###*+=++=#%*+++__                      
                    |@@@@@%%#+==*%*+*****+___                   
                   /@@@@@%%*+=+#+%#%%##*+++==\                  
                 __@@@%%%##***##=#%#***++===;;|                 
                |@@@%%###***+++*+##*=;;;;;;:::|                 
                |%%###**+==;;=*#****;::::::___                  
                |**++==;::::=*##***+;:_____                     
                 _________:;+*##**+=;|                          
                          \=*****++=:|                          
                           \+***++=;|                           
                            \++++=;:|                           
                             __==;:/                            
                               ____

Zoom100%

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

Form

Ink color

Characters

Character size

10px

Contour marks

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/glyph-sculpture.json

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

Include the complete example

This example also composes dither-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 glyph sculpture

Choose glyphSet="density", "digits" or "letters". edgeMatching adds contour-direction marks to density glyphs; cellSize is bounded to 7–20px.
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.

SculptureCommonProps

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

GlyphSculptureProps

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
`cellSize` Character-cell height in CSS pixels, bounded to 7–20.	`number`	No
`glyphSet`	`GlyphSet`	No
`edgeMatching` Trace the silhouette with directional marks in the density set.	`boolean`	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

movingpausedturnedpointer-tiltcustom-geometryimport-errorfallbackreduced-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.