Visual guides / Effects

Give a surface a little character.

Explore seven token-based treatments, tune their intensity, and compare animated and reduced-motion previews.

Apply an effect to a featured card or a short hero. Keep long reading surfaces calm and text readable.

Loading the interactive workbench…

Start building

Load your adapter stylesheet once. Astro needs its client runtime for enhanced interactions; React manages its own lifecycle; Elements needs client registration.

---
// pnpm add @santi020k/lumen-astro
// In your root layout:
import '@santi020k/lumen-astro/styles.css'
import UIPrimitives from '@santi020k/lumen-astro/runtime'
---
<slot />
<UIPrimitives />

// pnpm add @santi020k/lumen-react
// In your application entry:
import '@santi020k/lumen-react/styles.css'

// Import components from the public package:
import { VisualEffect } from '@santi020k/lumen-react'

// pnpm add @santi020k/lumen-elements
// In your client entry, processed by a bundler:
import '@santi020k/lumen-elements/styles.css'
import { defineLumenElements } from '@santi020k/lumen-elements'

defineLumenElements(['VisualEffect'])

Starter example

The React example includes local state. Astro and Elements show the component structure; your client code owns data updates and event handlers.

'use client'

import { useState } from 'react'
import { Button, VisualEffect } from '@santi020k/lumen-react'

export function FeaturedCard() {
  const [animated, setAnimated] = useState(false)
  return <>
    <Button aria-pressed={animated} onClick={() => setAnimated(value => !value)}>
      {animated ? 'Stop animation' : 'Enable animation'}
    </Button>
    <VisualEffect variant="aurora" intensity={0.8} animated={animated}>
      <h2>Your next idea</h2>
      <p>Keep important content readable.</p>
    </VisualEffect>
  </>
}

---
import { VisualEffect } from '@santi020k/lumen-astro'
---
<VisualEffect variant="aurora" intensity={0.8}>
  <h2>Your next idea</h2>
  <p>Keep important content readable.</p>
</VisualEffect>

<lumen-visual-effect variant="aurora" intensity="0.8">
  <h2>Your next idea</h2>
  <p>Keep important content readable.</p>
</lumen-visual-effect>

Adapter setup: Astro · React · Elements.

Before you ship

VisualEffect defaults to static. Enable continuing animation deliberately and provide a pause control.
Aurora loops; draw animates an SVG path with pathLength="1"; depth follows scrolling when native scroll timelines are supported.
Mesh, grain, and border are static treatments. Spotlight follows a pointer and skips touch and reduced motion.
The demo amplifies aurora movement locally. Package defaults are more subtle; cycle timing and replay controls belong to the application.

Component reference

Find props, events, keyboard behavior, and Astro, React, and Elements examples for each primitive.

VisualEffect

Next: Chart animation