Metallic Twirl

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

Installation

npm install @reactbytes/metallic-twirl

Usage

import { MetallicTwirl } from "@reactbytes/metallic-twirl";

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

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | speed | number | 0.2 | Controls the temporal flow of the shader and overall speed of the rotation. | | zoom | number | 15 | Sets the coordinate space scale, effectively zooming in or out of the pattern. | | symmetry | number | 18 | Determines the number of folds or rotational repetitions in the kaleidoscope effect. | | amplitude | number | 1.9 | The intensity/amplitude multiplier used when mapping the calculated color back to the palette. |

Presets

This component includes the following design presets:

• Classic Metallic (classic)
• Copper Coils (copper)
• Hyperspace Rift (hyperspace)
• Chrome Mandala (mandala)
• Liquid Prism (liquid-prism)

Credits & Inspiration

Component Source

• ChandruMIT-o - Design & Development

Technologies

• WebGL 2 - Graphics API

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