Gooey Morph

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

Installation

npm install @reactbytes/gooey-morph

Usage

import { GooeyMorph } from "@reactbytes/gooey-morph";

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

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | words | string | CREATE, DESIGN, DEVELOP | The list of words to rotate through (separated by commas). | | duration | number | 3 | Time spent on each word in seconds. | | morphSpeed | number | 1 | Speed of the morph transition in seconds. | | yOffset | number | 20 | Vertical displacement during the morph. | | color | color | #34d399 | The base color of the text letters. | | uppercase | boolean | true | Whether to force the text to uppercase. |

Presets

This component includes the following design presets:

• Default Style (default)
• Coding Flow (coding)
• Slow Vibes (slow-vibes)

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 - Gooey Morph.