Styling & Customization

The Profile Picture component uses CSS custom properties for theming, ships with a set of keyframe animations, and renders in the Light DOM for full compatibility with utility-class frameworks like Tailwind CSS.

CSS Custom Properties

Override these properties on the profile-picture element (or any ancestor) to customize the look and feel.

Property	Default	Description
`--pp-transition-duration`	`200ms`	Transition duration
`--pp-transition-timing`	`cubic-bezier(0.4, 0, 0.2, 1)`	Transition timing function
`--pp-spring-timing`	`cubic-bezier(0.34, 1.56, 0.64, 1)`	Spring animation timing
`--pp-hover-scale`	`1.05`	Scale on hover
`--pp-press-scale`	`0.95`	Scale on press
`--pp-focus-ring-color`	`rgba(99, 102, 241, 0.5)`	Focus ring color
`--pp-focus-ring-width`	`3px`	Focus ring width
`--pp-skeleton-base`	`#e5e7eb`	Skeleton base color
`--pp-skeleton-shine`	`#f3f4f6`	Skeleton shine color

Example

profile-picture {
  --pp-hover-scale: 1.1;
  --pp-transition-duration: 300ms;
  --pp-focus-ring-color: rgba(59, 130, 246, 0.5);
}

You can scope overrides to specific contexts:

/* Larger hover effect in hero sections */
.hero profile-picture {
  --pp-hover-scale: 1.15;
  --pp-spring-timing: cubic-bezier(0.22, 1.8, 0.64, 1);
}

/* Subtler transitions in dense lists */
.user-list profile-picture {
  --pp-hover-scale: 1.02;
  --pp-transition-duration: 150ms;
}

Animations

The component registers the following @keyframes animations. They are used internally but can be referenced or overridden in your own styles.

Animation	Description
`pp-shimmer`	Shimmer loading effect
`pp-pulse`	Gentle breathe effect
`pp-skeleton`	Skeleton pulse
`pp-badge-bounce`	Badge entrance bounce
`pp-ring-rotate`	Ring rotation (gradient rings)
`pp-presence-pulse`	Presence indicator pulse
`pp-glow`	Glow animation
`pp-fade-in`	Fade in
`pp-scale-in`	Scale in (spring-like)

Tailwind Integration

Because the component renders in the Light DOM, Tailwind utility classes work directly on internal elements. To ensure that dynamically generated class names are included in your production build, import the provided safelist:

import safelist from '@grasco/profile-picture/tailwind.safelist';

Then add the safelist to your Tailwind config:

// tailwind.config.ts
import safelist from '@grasco/profile-picture/tailwind.safelist';

export default {
  // ...
  safelist,
};

This guarantees that all component-generated utility classes survive tree-shaking during the CSS purge step.

Reduced Motion

The component respects the prefers-reduced-motion media query. When the user has requested reduced motion at the OS level:

Hover scale and press scale transitions are disabled.
Shimmer, pulse, glow, and bounce animations are replaced with simple opacity fades or removed entirely.
Presence pulse and ring rotation animations are paused.

No additional configuration is needed — this behavior is built in and automatic.