Skip to content
Pinky UI

backgrounds

Interactive Gradient

A gentle local gradient field driven by shared pointer infrastructure.

  • backgrounds
  • gradient
  • pointer
  • hero

Live preview

A local field

The content keeps the loudest voice.

Quick usage

usage
import { InteractiveGradient } from "@pinky-ui/experiences";

<InteractiveGradient radius={520} intensity={0.2}>{content}</InteractiveGradient>

Presets

Default

The restrained Pinky production default.

Default behaviour

Quiet

A flatter or lower-intensity treatment for dense pages.

intensity={0.12}

Install

Add @pinky-ui/experiences as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/experiences

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
radiusnumber460Diameter of the quiet responsive color field.
classNamestring—Styles the outer composition without changing its behaviour.
disabledbooleanfalseUses the static, readable composition.

Accessibility

  • Content remains in logical DOM order and motion never carries the only meaning.
  • Interactive descendants retain native link or button semantics and visible focus.

Performance

  • No React state is updated per pointer frame.
  • The existing shared pointer source is reused.

Reduced motion

Spatial or continuous movement is removed while content, selection and controls remain available.

When to use

  • Bounded Hero or feature backgrounds

When not to use

  • Text whose contrast changes under the field

Skill

Purpose

InteractiveGradient adds a soft local gradient response using the shared cursor spotlight infrastructure. Use it behind a Hero or feature surface when pointer position should gently change emphasis.

Choose a broad radius and low intensity; text contrast must remain stable at every pointer position. Avoid full-page high-energy tracking, touch-dependent meaning or combining it with Cursor Spotlight as a separate layer.

The wrapper leaves content semantic and pointer interaction optional. Touch and reduced-motion fallbacks stay static, with no React state per pointer frame. Prefer container mode for bounded sections and viewport mode only when the whole page truly benefits.

Open this skill on its own page