Contour field

Backgrounds

Original topographic lines on the inherited paper surface, with a bounded GPU renderer.

React · copy into your project · light and dark themes

Try it

Variant

Find your next direction

A little space. A clearer path.

Follow the small details until the way forward feels familiar.

Tone

Pace1×

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/contour-field.json

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

Include the complete example

This example also composes pigment-field, button, card, toggle-group, slider, label, typography. Install its parts together:

Terminal

npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/pigment-field.json https://luv-jeri.github.io/cojeev-ui/r/contour-field.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/toggle-group.json https://luv-jeri.github.io/cojeev-ui/r/slider.json https://luv-jeri.github.io/cojeev-ui/r/label.json https://luv-jeri.github.io/cojeev-ui/r/typography.json

Using contour field

Place inside a positioned parent with a height. Keep content outside the decorative field.
Control tone, speed (0–3), intensity (0–2) and paused. A still fallback is available when GPU rendering cannot run.
Use an opaque native surface for meaningful text placed above the changing artwork.

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.

ContourFieldProps

Prop	Type	Required
`speed` Relative pace, from 0 (still) to 3.	`number`	No
`intensity` Color and relief strength, from 0 to 2.	`number`	No
`tone` Accent selection from the inherited Cojeev theme.	`FieldTone`	No
`paused` Freeze the current artwork without removing it.	`boolean`	No

Accessibility

The field is decorative, inert and ignores pointer hit testing.
Animation suspends with reduced motion, shared quiet settings, hidden tabs and offscreen content.

States and appearance

animatedpausedfallbackcontext-lostreduced-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.