Data Feeding In

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @gammaui/data-feeding-in
Copy

The DataFeedingIn component visualizes data flowing into a system. Animated SVG paths fan out from a source, carrying pulsing purple gradient beams along each line, before converging into a frosted-glass table panel where rows animate in one by one.

Features

• Animated SVG flow paths — Seven branching paths with dashed strokes and a fade mask.
• Pulsing gradient beams — Per-path linearGradient animated with Framer Motion for a continuous sweep effect.
• Staggered table reveal — Rows fade and slide in sequentially with configurable delays.
• Zero dependencies beyond Framer Motion — Pure React + SVG + Tailwind CSS.

Usage

import DataFeedingIn from "@/components/gammaui/data-feeding-in"
 
export default function Page() {
  return (
    <div className="flex h-screen items-center justify-center bg-black">
      <DataFeedingIn />
    </div>
  )
}

Tips

• Works best on a dark background — the paths and table use white/low-opacity strokes.
• The component is self-contained with no props; customize colors by editing the #716FFF stop colors in the gradient defs or the Tailwind classes on the table panel.
• Wrap it in a container with overflow-hidden if you need to clip the entry animation.