Brand

AnimatedPortrait

Presents a portrait with optional motion and floating profile facts.

View preview API reference Figma behavior note

FrameworksAstro · React · Elements

Registry commandlumen add AnimatedPortrait

InteractionNative markup

Design sourceBehavior-only contract

See it and copy it

Framework example

Choose Astro, React, or Elements to compare native usage against the shared visual output. Each example assumes the framework-level setup is already complete.

Location

San Francisco, CA

Experience

5+ Years

Framework usage

Switch targets to compare the adapter code. The preview stays visually stable because all three packages share the same tokens and ui-* class contract.

---
import { AnimatedPortrait } from '@santi020k/lumen-astro'

import portraitDummy from '../assets/portrait-dummy.jpg'
---

<AnimatedPortrait
  src={portraitDummy}
  alt="Portrait"
  showFloatingBadges
  badgeProps={{
    experience: { label: 'Experience', value: '5+ Years' },
    location: { label: 'Location', text: 'San Francisco, CA' }
  }}
/>

import { AnimatedPortrait } from '@santi020k/lumen-react'

export const Example = () => (
  <>
    <AnimatedPortrait
      src={portraitDummy}
      alt="Portrait"
      showFloatingBadges
      badgeProps={{
        experience: { label: 'Experience', value: '5+ Years' },
        location: { label: 'Location', text: 'San Francisco, CA' }
      }}
    />
  </>
)

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements()
</script>

<lumen-animated-portrait
  src={portraitDummy}
  alt="Portrait"
  showFloatingBadges
  badgeProps={{
    experience: { label: 'Experience', value: '5+ Years' },
    location: { label: 'Location', text: 'San Francisco, CA' }
  }}></lumen-animated-portrait>

Edit AnimatedPortrait in browser

Choose your target

Add this component

Choose the package for your runtime. All adapters share the Lumen stylesheet. Use the matching registry command when you want a local wrapper for that framework.

pnpm add @santi020k/lumen-astro

pnpm add @santi020k/lumen-astro

lumen add AnimatedPortrait

lumen add AnimatedPortrait

pnpm add @santi020k/lumen-react

pnpm add @santi020k/lumen-react

lumen add AnimatedPortrait --target react

lumen add AnimatedPortrait --target react

pnpm add @santi020k/lumen-elements

pnpm add @santi020k/lumen-elements

lumen add AnimatedPortrait --target elements

lumen add AnimatedPortrait --target elements

API reference

Lumen-specific props and runtime attributes for the Astro primitive. React props follow the same names; Elements use equivalent kebab-case attributes where custom elements expose them.

Attribute	Values	Default	Description
src	ImageMetadata \| string	required	Sets the portrait image source.
alt	string	required	Provides the portrait image accessible text.
showFloatingBadges	boolean	false	Shows the optional experience and location facts around the portrait.
badgeProps	{ experience?, location? }	-	Customizes the labels and values used by the floating facts.
widths, sizes	number[]; string	responsive defaults	Controls responsive image candidate generation and selection.
class, className	string	""	Merges custom classes with the generated ui-* root classes.
...native attributes	HTML attributes	-	Forwards standard attributes to the root element unless the component consumes them.