Gradient Components

A flexible React library for dynamic, animated, and glow-enabled gradient UI primitives.

Built with Framer Motion and vanilla CSS.

---

Components

<GradientLine />

The core primitive. A single gradient line with support for:

• Vertical & horizontal orientation
• 6 animation modes — entrance, scroll, flow, breathe, draw, none
• Taper — fade the line to a point at start, end, or both ends
• Segments — render as dashed segments
• Glow — neon pulse with box-shadow
• Scroll-driven scaling — pass a Framer Motion scrollProgress value or let it auto-measure

<GradientLine
  gradient="linear-gradient(to bottom, #667eea, #764ba2, #f093fb, #667eea)"
  thickness="4px"
  length="200px"
  flowSpeed={2}
  taper="both"
/>

<GradientDivider />

A full-width section separator with an optional centered label.

<GradientDivider
  gradient="linear-gradient(to right, #f093fb, #f5576c)"
  label="Section Break"
  glow={true}
/>

<GradientBorder />

Wraps any element with an animated gradient border.

<GradientBorder
  gradient="linear-gradient(135deg, #4facfe, #00f2fe, #43e97b, #fa709a, #4facfe)"
  thickness="2px"
  radius="12px"
  animate={true}
  glow={true}
>
  <div>Your content here</div>
</GradientBorder>

<GradientUnderline />

An inline text element with a gradient underline. Supports always and hover trigger modes.

<p>
  This text has a{' '}
  <GradientUnderline
    gradient="linear-gradient(to right, #4facfe, #00f2fe)"
    trigger="hover"
  >
    gradient underline
  </GradientUnderline>
</p>

---

Hooks

useImageColors(src, options)

Extracts dominant colors from any image and returns a CSS linear-gradient string. Includes internal caching.

const { gradient, isLoaded } = useImageColors('/photo.jpg', {
  direction: 'to bottom',
  samples: 5
});

<GradientLine gradient={gradient} glow={true} />

---

Quick Start

git clone https://github.com/alexpuliatti/gradient-components.git
cd gradient-components
npm install
npm run dev

Open http://localhost:5173 to see the interactive demo page with live examples of every component and variant.

---

Usage in Your Project

Copy the src/components/ui/ directory and src/hooks/useImageColors.js into your project. Import from the barrel:

import { GradientLine, GradientDivider, GradientBorder, GradientUnderline } from './components/ui';
import { useImageColors } from './hooks/useImageColors';

Ensure framer-motion is installed as a dependency:

npm install framer-motion

Include the CSS classes from src/index.css (the /* Gradient Line */, /* Gradient Divider */, /* Gradient Border */, and /* Gradient Underline */ sections) in your stylesheet.

---

API Reference

Full props documentation is available in src/docs/GradientLine.md.

GradientLine Props

Prop	Type	Default	Description
gradient	string	—	CSS background gradient
orientation	string	'vertical'	'vertical' or 'horizontal'
thickness	string	'4px'	Minor-axis dimension
length	string	'100%'	Major-axis dimension
origin	string	'top'	CSS transform-origin
animation	string	'none'	'none' · 'entrance' · 'scroll' · 'flow' · 'breathe' · 'draw'
scrollProgress	MotionValue	null	External scroll progress value
glow	boolean	false	Neon pulse glow effect
taper	string	null	'start' · 'end' · 'both'
segments	number	0	Number of dashed segments
flowSpeed	number	0	Seconds per flow cycle
delay	number	0	Animation delay in seconds

---

Tech Stack

• React 19
• Framer Motion — scroll-driven animations, entrance transitions, spring physics
• Vanilla CSS — no Tailwind, no CSS-in-JS
• Vite — dev server and build

---

License

MIT