Theming & customization

The components are source in your repo: theme them with props, utility classes, or directly edit the source.

Because VV copies real source into your project, there's no theming API to learn. You customize the same way you'd customize any component you wrote yourself, at three levels from quickest to deepest.

Theming props

Several components expose color and behavior props so you can re-skin them without touching the source. VideoCard, for example, takes an accent and a background color:

source
TSX
<VideoCard
  src="/clip.mp4"
  accentColor="#9b5de5"
  cardBgColor="rgba(0,0,0,0.55)"
/>

Each component's page lists its full prop API under Props, always the first place to look for a knob before editing source.

Utility classes & inline style

Many components accept a className (and often style) merged onto their root element. Use them to adjust spacing, sizing, or layout from the outside:

source
TSX
<ScrollHighlighter
  text="Tuned from the outside"
  className="max-w-3xl mx-auto"
/>

Editing the source

For anything deeper, like geometry, easing, or shader constants, open the file and change it. It's your code.

Tip: editing a component means an npx vectorvesper update will overwrite your changes. Make sure to back up your changes or commit them in Git before updating.

Next step

See Accessibility for how the components handle reduced motion and keyboard control, or browse the components.