Superstructure Mesh

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

Installation

npm install @reactbytes/superstructure

Usage

import { Superstructure } from "@reactbytes/superstructure";

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

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | startColor | color | #ff00ff | The starting hex color of the mesh gradient interpolation. | | endColor | color | #8080ff | The ending hex color of the mesh gradient interpolation. | | bgColor | color | #010c05 | Clear background hex color of the WebGL canvas. | | radius | number | 900 | The radius of the icosahedron cage geometry enclosing the camera. | | detail | number | 20 | Subdivision detail factor of the icosahedron lattice. Higher numbers increase line resolution. | | opacity | number | 0.25 | Line opacity of the wireframe structure mesh. | | speed | number | 1 | Animation speed multiplier of the vertex displacement oscillation. | | enableControls | boolean | true | Enables camera drag/mouse orbiting interaction. | | autoRotate | boolean | false | Slowly rotates the camera around the structure center automatically. |

Presets

This component includes the following design presets:

• Emerald Lattice (Default) (default)
• Cyber Portal (cyber)
• True Void (void)

Credits & Inspiration

Component Source

• ChandruMIT-o - Design & Development

Libraries

• Three.js - WebGL 3D Rendering Framework

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