Dotted Vortex

A premium, modular React component from the React Bytes collection. Built with React and TypeScript.

Installation

npm install @reactbytes/dotted-vortex

Usage

import { DottedVortex } from "@reactbytes/dotted-vortex";

export default function Example() {
  return (
    <DottedVortex />
  );
}

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | imageSrc | string | https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop | The high-resolution background image to dynamically load and reveal. | | isExcited | boolean | false | Trigger the vortex/aperture focus state. | | gridSpacing | number | 24 | The distance between each dot in the grid. | | baseDotRadius | number | 1.5 | The base radius of each dot. | | cursorFollowSpeed | number | 0.08 | How quickly the effect follows the cursor. | | revealRadiusScale | number | 0.2 | The maximum distance of the reveal effect relative to screen width. | | kineticEnergyMultiplier | number | 0.4 | How intensely the cursor speed injects kinetic energy into dots. | | rippleSpeed | number | 10 | The radius expansion speed of click ripples. | | twistAngle | number | 2.51 | The maximum rotation angle when in the excited state. | | apertureSize | number | 0.12 | The size of the aperture focal point when excited. | | bgColor | color | #0a0a0a | The solid background color beneath everything. | | activeDotColor | color | #ffffff | The color of the active interactive dots. | | idleDotColor | string | rgba(255, 255, 255, 0.15) | The color of the distant, un-scaled dots. |

Presets

This component includes the following design presets:

• Default Vortex (default)
• Digital Matrix (matrix)
• Dense Fabric (dense)
• Fluid Motion (fluid)

Credits & Inspiration

Component Source

• ChandruMIT-o - Design & Development

For interactive playgrounds, customizable controls, and code copy-pasting, visit the full showcase page at React Bytes - Dotted Vortex.