Fancy Components

https://fancycomponents.dev/docs
Admin
Fancy Components is a collection of fun and interactive React components with microinteractions...
Tokens:39,162
Snippets:445
Trust Score:7.9
Update:6 months ago
Show doc for...
Tokens:
Raw
### Install Core Dependencies

Source: https://fancycomponents.dev/docs/installation

Install the required Tailwind CSS and Motion packages.

```bash
pnpm add tailwindcss@latest motion
```

--------------------------------

### Install Gravity Component

Source: https://fancycomponents.dev/docs/components/physics/gravity

Install the Gravity component using pnpm.

```bash
1pnpm dlx shadcn add @fancy/gravity
```

--------------------------------

### Installation

Source: https://fancycomponents.dev/docs/components/blocks/stacking-cards

Install the Stacking Cards component using npm, pnpm, or yarn.

```APIDOC
## Installation

* * *
CLIManual
pnpmnpmyarnbun

```
1pnpm dlx shadcn add @fancy/stacking-cards
```
```

--------------------------------

### Installation

Source: https://fancycomponents.dev/docs/components/blocks/media-between-text

Install the Media Between Text component using your preferred package manager.

```APIDOC
## Installation

* * *

```bash
pnpm dlx shadcn add @fancy/media-between-text
```
```

--------------------------------

### Installation

Source: https://fancycomponents.dev/docs/components/background/pixel-trail

Install the Pixel Trail component using your preferred package manager.

```APIDOC
## Installation

Install the Pixel Trail component using your preferred package manager:

```bash
pnpm dlx shadcn add @fancy/pixel-trail
```
```

--------------------------------

### Installation

Source: https://fancycomponents.dev/docs/components/text/basic-number-ticker

Install the Basic Number Ticker component using npm, pnpm, or yarn.

```APIDOC
## Installation

* * *

CLIManual

pnpm dlx shadcn add @fancy/basic-number-ticker
```

--------------------------------

### Install Stacking Cards Component

Source: https://fancycomponents.dev/docs/components/blocks/stacking-cards

Use this command to install the Stacking Cards component via pnpm.

```bash
pnpm dlx shadcn add @fancy/stacking-cards
```

--------------------------------

### Install Float Component

Source: https://fancycomponents.dev/docs/components/blocks/float

Install the Float component using npm, pnpm, or yarn.

```bash
pnpm dlx shadcn add @fancy/float
```

--------------------------------

### Install Circling Elements

Source: https://fancycomponents.dev/docs/components/blocks/circling-elements

Use the CLI to add the component to your project.

```bash
pnpm dlx shadcn add @fancy/circling-elements
```

--------------------------------

### Install Variable Font Hover Component

Source: https://fancycomponents.dev/docs/components/text/variable-font-hover-by-random-letter

Install the component using pnpm. Ensure you have pnpm installed.

```bash
1pnpm dlx shadcn add @fancy/variable-font-hover-by-random-letter
```

--------------------------------

### Screensaver Component Usage

Source: https://fancycomponents.dev/docs/components/blocks/screensaver

This section details how to install and use the Screensaver component in your project. It includes installation commands and a basic usage example.

```APIDOC
## Installation

Install the Screensaver component using your preferred package manager:

```bash
pnpm dlx shadcn add @fancy/screensaver
```

## Usage

Wrap your content with the `Screensaver` component. You must provide a `containerRef` to define the boundaries for the animation. The component will animate its child with the screensaver effect.

```jsx
import { Screensaver } from "@fancy/screensaver";
import React, { useRef } from "react";

function MyComponent() {
  const containerRef = useRef<HTMLDivElement>(null);

  return (
    <div ref={containerRef} style={{ width: '500px', height: '300px', position: 'relative' }}>
      <Screensaver containerRef={containerRef}>
        {/* Your content here */}
        <div>Animated Content</div>
      </Screensaver>
    </div>
  );
}
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| children* | `React.ReactNode` | - | The content to be displayed |
| containerRef* | `React.RefObject<HTMLElement>` | - | Reference to the container for the screensaver |
| speed | `number` | `3` | Speed of the animation in pixels per second |
| startPosition | `{ x: number; y: number }` | `{ x: 0, y: 0 }` | Starting position of the element |
| startAngle | `number` | `45` | Starting angle of the element in degrees |
| className | `string` | - | Additional CSS classes for styling |
```

--------------------------------

### Install Animated Gradient With SVG

Source: https://fancycomponents.dev/docs/components/background/animated-gradient-svg

Use the CLI to add the component to your project.

```bash
pnpm dlx shadcn add @fancy/animated-gradient-with-svg
```

--------------------------------

### Install Pixel Trail Component

Source: https://fancycomponents.dev/docs/components/background/pixel-trail

Use the CLI to add the Pixel Trail component to your project.

```bash
pnpm dlx shadcn add @fancy/pixel-trail
```

--------------------------------

### Install Screensaver Component

Source: https://fancycomponents.dev/docs/components/blocks/screensaver

Use this command to install the Screensaver component using pnpm. Ensure you have pnpm installed.

```bash
pnpm dlx shadcn add @fancy/screensaver
```

--------------------------------

### Install Image Trail Component

Source: https://fancycomponents.dev/docs/components/image/image-trail

Use this command to install the Image Trail component using pnpm.

```bash
pnpm dlx shadcn add @fancy/image-trail
```

--------------------------------

### Installation

Source: https://fancycomponents.dev/docs/components/blocks/drag-elements

Install the Drag Elements component using npm, yarn, or pnpm.

```APIDOC
## Installation

* * *

CLIManual

pnpm dlx shadcn add @fancy/drag-elements
```

--------------------------------

### Install Scramble Hover

Source: https://fancycomponents.dev/docs/components/text/scramble-hover

Use the CLI to add the component to your project.

```bash
pnpm dlx shadcn add @fancy/scramble-hover
```

--------------------------------

### Install Media Between Text Component

Source: https://fancycomponents.dev/docs/components/blocks/media-between-text

Install the Media Between Text component using npm, pnpm, or yarn.

```bash
pnpm dlx shadcn add @fancy/media-between-text
```

--------------------------------

### Install Box Carousel

Source: https://fancycomponents.dev/docs/components/carousel/box-carousel

Install the Box Carousel component using pnpm.

```bash
1pnpm dlx shadcn add @fancy/box-carousel
```

--------------------------------

### Install Simple Marquee

Source: https://fancycomponents.dev/docs/components/blocks/simple-marquee

Install the Simple Marquee component using npm, pnpm, yarn, or bun.

```bash
pnpm dlx shadcn add @fancy/simple-marquee
```

--------------------------------

### Install Text Rotate Component

Source: https://fancycomponents.dev/docs/components/text/text-rotate

Install the Text Rotate component using pnpm.

```bash
1pnpm dlx shadcn add @fancy/text-rotate
```

--------------------------------

### Install Underline To Background Component

Source: https://fancycomponents.dev/docs/components/text/underline-to-background

Install the component using npm, pnpm, yarn, or bun. This command adds the necessary package to your project.

```bash
pnpm dlx shadcn add @fancy/underline-to-background
```

--------------------------------

### Usage Example

Source: https://fancycomponents.dev/docs/components/blocks/stacking-cards

Example of how to use the StackingCards and StackingCardItem components to create a stacking card effect.

```APIDOC
## Usage

* * *
Wrap `StackingCards` around the content you want to animate and `StackingCardItem` around each card you want to animate. The structure looks like this:
### Stacking cards usage example
```

1<StackingCards>
2  <StackingCardItem>
3      {/* Your card goes here */}
4  </StackingCardItem>
5</StackingCards>

```
```

--------------------------------

### Examples

Source: https://fancycomponents.dev/docs/components/blocks/media-between-text

Explore different examples of how to use the Media Between Text component, including scroll-triggered animations and vertical layouts.

```APIDOC
## Examples

* * *

### Scroll

Scroll down to trigger the animation. In this case, you can pass down a containerRef prop to the component to track when elements come into view within that specific container, rather than the entire viewport. This is useful when you want to trigger animations based on scrolling within a specific scrollable container.

### Vertical & Ref

You can also style the whole container, the media element, and the text elements separately. In this example, we use a column-layout to create a vertical effect. The animation can also be triggered from outside the component, by calling the `animate` and `reset` methods exposed via a ref. Click on the "Open" button to trigger the animation.
```

--------------------------------

### Install Forward Animation

Source: https://fancycomponents.dev/docs/components/text/letter-swap

Use this command to install the forward animation variant of the Letter Swap component.

```bash
pnpm dlx shadcn add @fancy/letter-swap-forward-anim
```

--------------------------------

### Install Typewriter Component

Source: https://fancycomponents.dev/docs/components/text/typewriter

Use the CLI to add the component to your project.

```bash
pnpm dlx shadcn add @fancy/typewriter
```

--------------------------------

### Install Vertical Cut Reveal Component

Source: https://fancycomponents.dev/docs/components/text/vertical-cut-reveal

Install the component using the pnpm package manager.

```bash
pnpm dlx shadcn add @fancy/vertical-cut-reveal
```

--------------------------------

### Installation

Source: https://fancycomponents.dev/docs/components/text/breathing-text

Install the Breathing Text component using npm, yarn, pnpm, or bun.

```APIDOC
## Installation

* * *

CLIManual

pnpm

npx

yarn

bun

```

1
pnpm dlx shadcn add @fancy/breathing-text

```
```

--------------------------------

### Installation

Source: https://fancycomponents.dev/docs/components/text/variable-font-cursor-proximity

Install the Variable Font Cursor Proximity component using npm, yarn, pnpm, or bun.

```APIDOC
## Installation

* * *

CLIManual
pnpmnpmyarnbun

```
1pnpm dlx shadcn add @fancy/variable-font-cursor-proximity
```
```

--------------------------------

### Install Text Cursor Proximity

Source: https://fancycomponents.dev/docs/components/text/text-cursor-proximity

Use the CLI to add the component to your project.

```bash
pnpm dlx shadcn add @fancy/text-cursor-proximity
```

--------------------------------

### Install Cursor Attractor & Gravity

Source: https://fancycomponents.dev/docs/components/physics/cursor-attractor-and-gravity

Use this command to install the necessary package for cursor attractor and gravity physics animations.

```bash
pnpm dlx shadcn add @fancy/cursor-attractor-and-gravity
```

--------------------------------

### MatterBody Positioning Example

Source: https://fancycomponents.dev/docs/components/physics/gravity

Demonstrates setting the initial position of a MatterBody using a percentage for X and pixels for Y.

```jsx
1<MatterBody x="50%" y="100px">
2  <div>I'm physics-enabled!</div>
3</MatterBody>
```

--------------------------------

### Install Parallax Floating Component

Source: https://fancycomponents.dev/docs/components/image/parallax-floating

Install the component using the pnpm package manager.

```bash
1pnpm dlx shadcn add @fancy/parallax-floating
```

--------------------------------

### Install Elastic Line Component

Source: https://fancycomponents.dev/docs/components/physics/elastic-line

Use this command to install the @fancy/elastic-line package using pnpm.

```bash
pnpm dlx shadcn add @fancy/elastic-line
```

--------------------------------

### Install Text Highlighter Component

Source: https://fancycomponents.dev/docs/components/text/text-highlighter

Install the Text Highlighter component using npm. This command adds the necessary package to your project.

```bash
1pnpm dlx shadcn add @fancy/text-highlighter
```

--------------------------------

### Install Text Along Path Component

Source: https://fancycomponents.dev/docs/components/text/text-along-path

Install the Text Along Path component using npm, pnpm, or yarn.

```bash
pnpm dlx shadcn add @fancy/text-along-path
```

--------------------------------

### Install Scroll and Swap Text Component

Source: https://fancycomponents.dev/docs/components/text/scroll-and-swap

Use the CLI to add the component to your project. Ensure you have the necessary environment configured for shadcn components.

```bash
pnpm dlx shadcn add @fancy/scroll-and-swap-text
```

--------------------------------

### Install Scramble In Component

Source: https://fancycomponents.dev/docs/components/text/scramble-in

Use the CLI to add the component to your project.

```bash
pnpm dlx shadcn add @fancy/scramble-in
```

--------------------------------

### Install 3D CSS Box Component

Source: https://fancycomponents.dev/docs/components/blocks/css-box

Use this command to install the 3D CSS Box component using pnpm.

```bash
pnpm dlx shadcn add @fancy/3d-css-box
```

--------------------------------

### Install Variable Font Hover By Letter

Source: https://fancycomponents.dev/docs/components/text/variable-font-hover-by-letter

Use the CLI to add the component to your project.

```bash
pnpm dlx shadcn add @fancy/variable-font-hover-by-letter
```

--------------------------------

### Install Gooey SVG Filter

Source: https://fancycomponents.dev/docs/components/filter/gooey-svg-filter

Installation command for the component using various package managers.

```bash
pnpm dlx shadcn add @fancy/gooey-svg-filter
```

--------------------------------

### Install Drag Elements Component

Source: https://fancycomponents.dev/docs/components/blocks/drag-elements

Install the Drag Elements component using the pnpm package manager.

```bash
pnpm dlx shadcn add @fancy/drag-elements
```

--------------------------------

### High-level Cube Example

Source: https://fancycomponents.dev/docs/components/blocks/css-box

Example of rendering a 3D cube with custom faces and enabling drag interaction. Requires importing CSSBox and CSSBoxRef.

```jsx
import { useRef } from "react"
import CSSBox, { CSSBoxRef } from "@/components/blocks/css-box"

export default function CubeExample() {
  const cubeRef = useRef<CSSBoxRef>(null)

  return (
    <>
      <CSSBox
        ref={cubeRef}
        width={220}
        height={220}
        depth={220}
        perspective={800}
        draggable
        faces={{
          front:  <img src="/images/front.png"  alt="Front"  />,
          back:   <img src="/images/back.png"   alt="Back"   />,
          left:   <img src="/images/left.png"   alt="Left"   />,
          right:  <img src="/images/right.png"  alt="Right"  />,
          top:    <img src="/images/top.png"    alt="Top"    />,
          bottom: <img src="/images/bottom.png" alt="Bottom" />,
        }}
      />

      <Button onClick={() => cubeRef.current?.showTop()}>
        Show Top
      </Button>
    </>
  )
}
```

--------------------------------

### Install Variable Font And Cursor

Source: https://fancycomponents.dev/docs/components/text/variable-font-and-cursor

Command to add the component to your project using pnpm.

```bash
pnpm dlx shadcn add @fancy/variable-font-and-cursor
```

--------------------------------

### Install Basic Number Ticker

Source: https://fancycomponents.dev/docs/components/text/basic-number-ticker

Install the Basic Number Ticker component using npm, pnpm, yarn, or bun.

```bash
1pnpm dlx shadcn add @fancy/basic-number-ticker
```

--------------------------------

### Install Ping Pong Animation

Source: https://fancycomponents.dev/docs/components/text/letter-swap

Use this command to install the ping-pong animation variant, which reverses the animation when hovering away.

```bash
pnpm dlx shadcn add @fancy/letter-swap-pingpong-anim
```

--------------------------------

### Install Comes-In-Goes-Out Underline Animation

Source: https://fancycomponents.dev/docs/components/text/underline-animation

Use this command to add the side-to-side (comes in, goes out) underline animation component.

```bash
pnpm dlx shadcn add @fancy/underline-comes-in-goes-out
```

--------------------------------

### Install Forward Animation

Source: https://fancycomponents.dev/docs/components/text/random-letter-swap

Use this command to add the forward animation variant of the component to your project.

```bash
pnpm dlx shadcn add @fancy/random-letter-swap-forward-anim
```

--------------------------------

### Install Pixelate SVG Filter

Source: https://fancycomponents.dev/docs/components/filter/pixelate-svg-filter

Use the CLI to add the component to your project.

```bash
pnpm dlx shadcn add @fancy/pixelate-svg-filter
```

--------------------------------

### Install Marquee Along SVG Path

Source: https://fancycomponents.dev/docs/components/blocks/marquee-along-svg-path

Install the Marquee Along SVG Path component using npm or pnpm.

```bash
pnpm dlx shadcn add @fancy/marquee-along-svg-path
```

--------------------------------

### Install Goes-Out-Comes-In Underline Animation

Source: https://fancycomponents.dev/docs/components/text/underline-animation

Use this command to add the side-to-side (goes out, comes in) underline animation component.

```bash
pnpm dlx shadcn add @fancy/underline-goes-out-comes-in
```

--------------------------------

### Examples

Source: https://fancycomponents.dev/docs/components/background/pixel-trail

Explore various examples of the Pixel Trail component, including effects without fading, customizing pixels, and combining with SVG filters.

```APIDOC
## Examples

### Without fading

If you set the `fadeDuration` prop to `0`, and increase the `delay` prop, you can create a trail effect that doesn't fade.

```jsx
<PixelTrail pixelSize={15} fadeDuration={0} delay={50} pixelColor="#00ff00" />
```

### Customizing the pixels

You can customize the individual pixels by passing a `pixelClassName` prop.

```jsx
<PixelTrail pixelSize={25} pixelColor="#0000ff" pixelClassName="my-custom-pixel-class" />
```

### Combining with SVG Filters

The following example combines the GooeyFilter component with the PixelTrail component to create a fluid interface. Unfortunately, the component doesn't support Safari, so you'll need to create a fallback for that.

```jsx
// Assuming GooeyFilter is available and imported
<GooeyFilter>
  <PixelTrail pixelSize={30} pixelColor="#ff00ff" />
</GooeyFilter>
```
```

--------------------------------

### Install Letter 3D Swap

Source: https://fancycomponents.dev/docs/components/text/letter-3d-swap

Command to add the component to your project using pnpm.

```bash
pnpm dlx shadcn add @fancy/letter-3d-swap
```

--------------------------------

### Install Variable Font Cursor Proximity

Source: https://fancycomponents.dev/docs/components/text/variable-font-cursor-proximity

Use the CLI to add the component to your project.

```bash
pnpm dlx shadcn add @fancy/variable-font-cursor-proximity
```

--------------------------------

### Install Breathing Text Component

Source: https://fancycomponents.dev/docs/components/text/breathing-text

Use the CLI to add the component to your project. Supports multiple package managers.

```bash
pnpm dlx shadcn add @fancy/breathing-text
```

--------------------------------

### Gravity Usage Example

Source: https://fancycomponents.dev/docs/components/physics/cursor-attractor-and-gravity

Example demonstrating how to use the Gravity and MatterBody components to create a physics-based scene. The Gravity component defines the attractor point and strength, while MatterBody transforms HTML elements into physics bodies.

```jsx
<Gravity attractorPoint={{ x: "50%", y: "50%" }} attractorStrength={0.0006} cursorStrength={-0.005} cursorFieldRadius={200}>
  <MatterBody x="50%" y="50%">
    <div>Hello world!</div>
  </MatterBody>
  <MatterBody x="10%" y="10%">
    <div>fancy!</div>
  </MatterBody>
</Gravity>
```

--------------------------------

### Install Center Underline Animation

Source: https://fancycomponents.dev/docs/components/text/underline-animation

Use this command to add the center-origin underline animation component to your project.

```bash
pnpm dlx shadcn add @fancy/underline-center
```

--------------------------------

### MarqueeAlongSvgPath Component Usage

Source: https://fancycomponents.dev/docs/components/blocks/marquee-along-svg-path

Example of how to use the MarqueeAlongSvgPath component with the responsive prop enabled.

```APIDOC
## MarqueeAlongSvgPath Component with Responsivity

### Description
This example demonstrates enabling responsive mode for the MarqueeAlongSvgPath component. When `responsive` is set to `true`, the component automatically scales and centers the marquee to fit its container while maintaining the aspect ratio.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```jsx
<MarqueeAlongSvgPath
  path={path}
  viewBox="0 0 996 330" 
  className="w-full h-full"
  responsive
>
  {/* Your content */}
</MarqueeAlongSvgPath>
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A

#### Response Example
N/A
```

--------------------------------

### Install Ping Pong Animation

Source: https://fancycomponents.dev/docs/components/text/random-letter-swap

Use this command to add the ping-pong animation variant of the component to your project.

```bash
pnpm dlx shadcn add @fancy/random-letter-swap-pingpong-anim
```

--------------------------------

### Vertical Cut Reveal: Manual Animation Control

Source: https://fancycomponents.dev/docs/components/text/vertical-cut-reveal

Example of manually starting the animation using a ref and the `useInView` hook.

```javascript
Scroll down champ ↓
howdy! 👋howdy! 👋
```

--------------------------------

### Stacking Cards Usage Example

Source: https://fancycomponents.dev/docs/components/blocks/stacking-cards

Wrap your content with StackingCards and each card with StackingCardItem. Ensure StackingCardItem has a defined height for proper functionality.

```jsx
<StackingCards>
  <StackingCardItem>
      {/* Your card goes here */}
  </StackingCardItem>
</StackingCards>
```

--------------------------------

### Control Animation Externally

Source: https://fancycomponents.dev/docs/components/text/basic-number-ticker

Start the number animation from outside the component by using the `startAnimation` function exposed via the ref. This example restarts the animation when the component enters the viewport.

```javascript
import { useRef } from "react";
import { useInView } from "react-intersection-observer";
import { BasicNumberTicker } from "@fancy/basic-number-ticker";

export function Revenue() {
  const ref = useRef(null);
  const { ref: inViewRef, inView } = useInView({
    triggerOnce: true,
  });

  return (
    <div ref={inViewRef} className="flex flex-col gap-2">
      <BasicNumberTicker
        ref={ref}
        from={0}
        target={88}
        className="text-5xl font-bold"
        onStart={() => {
          console.log("animation started");
        }}
        onComplete={() => {
          console.log("animation completed");
        }}
      />
      <p>Revenue</p>
    </div>
  );
}
```

--------------------------------

### MatterBody Physics Options Example

Source: https://fancycomponents.dev/docs/components/physics/gravity

Customize the behavior of a MatterBody using physics properties like friction, restitution, density, and static state.

```jsx
1<MatterBody 
2  matterBodyOptions={{
3    friction: 0.5,     // How slippery it is
4    restitution: 0.7,  // How bouncy it is
5    density: 0.001,    // How heavy it is
6    isStatic: false,   // If true, the element won't move but can be collided with
7    force: {{ x: 0, y: 0 }} // Initial force applied to the body
8    // ... 
9  }}
10>
11  <div>I'm bouncy!</div>
12</MatterBody>
```

--------------------------------

### Vertical Cut Reveal: Split by Custom String Example

Source: https://fancycomponents.dev/docs/components/text/vertical-cut-reveal

Shows how to split text using a custom string delimiter.

```javascript
super cool & awesome example textsuper cool & awesome example text
```

--------------------------------

### Initialize shadcn

Source: https://fancycomponents.dev/docs/installation

Initialize the shadcn configuration if it does not exist in the project.

```bash
pnpm dlx shadcn@latest init
```

--------------------------------

### Drag Momentum Disabled Example

Source: https://fancycomponents.dev/docs/components/blocks/drag-elements

Example demonstrating drag elements with `dragMomentum` set to `false` to disable physics-based movement after the drag ends.

```jsx
<DragElements dragMomentum={false}>
  <div>super fun ✿</div>
  <div>funky time! ✴</div>
  <div>awesome ✺</div>
</DragElements>
```

--------------------------------

### Box Carousel High-Level Example

Source: https://fancycomponents.dev/docs/components/carousel/box-carousel

A basic React example demonstrating how to use the BoxCarousel component with required props like items, width, and height.

```jsx
1function MyCarousel() {
2  return (
3    <BoxCarousel
4      items={items}
5      width={400}
6      height={300}
7      direction="right"
8      enableDrag={true}
9    />
10  )
11}
```

--------------------------------

### Scroll Animation Example

Source: https://fancycomponents.dev/docs/components/blocks/media-between-text

This example demonstrates the 'inView' trigger type for the Media Between Text component. It animates the media when the component scrolls into view. A containerRef can be provided to trigger animations within a specific scrollable container.

```jsx
import { MediaBetweenText } from "@fancy/media-between-text";

function App() {
  return (
    <MediaBetweenText
      firstText="Scroll down ↓"
      secondText=""
      mediaUrl="https://res.cloudinary.com/demo/image/upload/v1689003200/samples/landscapes/nature-mountains.jpg"
      mediaType="image"
      containerRef={containerRef}
    />
  );
}
```

--------------------------------

### Basic Gravity Usage Example

Source: https://fancycomponents.dev/docs/components/physics/gravity

Wrap your scene with Gravity and elements with MatterBody to enable physics. Set initial positions using percentage or pixel values.

```jsx
1<Gravity>
2  <MatterBody x="50%" y="50%">
3    <div>Hello world!</div>
4  </MatterBody>
5  <MatterBody x="10%" y="10%">
6    <div>fancy!</div>
7  </MatterBody>
8</Gravity>
```

--------------------------------

### Add Component via CLI

Source: https://fancycomponents.dev/docs/installation

Use the CLI to add a specific component from the @fancy registry.

```bash
pnpm dlx shadcn add @fancy/component-name
```

--------------------------------

### Vertical Layout and Ref Trigger Example

Source: https://fancycomponents.dev/docs/components/blocks/media-between-text

This example showcases a vertical layout for the Media Between Text component and uses the 'ref' trigger type. The animation is controlled manually by calling 'animate' and 'reset' methods exposed via a ref. It also demonstrates styling customization for the container, media, and text elements.

```jsx
import { MediaBetweenText } from "@fancy/media-between-text";
import { useRef } from "react";

function App() {
  const ref = useRef(null);

  return (
    <>
      <button onClick={() => ref.current?.animate()}>
        Open
      </button>
      <MediaBetweenText
        ref={ref}
        firstText="Artificial"
        secondText="Intelligence"
        mediaUrl="https://res.cloudinary.com/demo/video/upload/v1689003200/samples/elephants.mp4"
        mediaType="video"
        className="flex-col"
      />
    </>
  );
}
```

--------------------------------

### Scramble In Component Usage

Source: https://fancycomponents.dev/docs/components/text/scramble-in

This section details how to install and use the Scramble In component, including its props for customization.

```APIDOC
## Scramble In Component

A text component that reveals the text with a scrambled part in front.

### Installation

Use the following command to install the component:

```bash
pnpm dlx shadcn add @fancy/scramble-in
```

### Usage

The `ScrambleIn` component can be controlled via its props or methods exposed through a ref.

**Props:**

- **text** (`string`, required): The text to be displayed and scrambled.
- **scrambleSpeed** (`number`, default: `50`): Speed of the scrambling animation in milliseconds.
- **scrambledLetterCount** (`number`, default: `8`): Number of letters to scramble.
- **autoStart** (`boolean`, default: `true`): Whether to start the animation automatically.
- **className** (`string`, optional): Additional CSS classes for styling the component.
- **characters** (`string`, default: `"ABCDEFGHIJKLMNO PQRSTUVWXYZ abcdefghijklmno pqrstuvwxyz !@#$%^&*()_+`): Characters to use for scrambling.
- **scrambledClassName** (`string`, optional): Additional CSS classes for styling the scrambled text.
- **onComplete** (`() => void`, optional): Callback function for when the animation completes.
- **onStart** (`() => void`, optional): Callback function for when the animation starts.

**Controlling Animation:**

- `autoStart` prop: Starts the animation automatically on mount.
- `start` method (via ref): Manually start the animation.
- `reset` method (via ref): Manually reset the animation.

### Example Usage

```jsx
import { ScrambleIn } from "@fancy/scramble-in";
import React, { useRef } from "react";

function MyComponent() {
  const scrambleRef = useRef(null);

  const handleStartAnimation = () => {
    if (scrambleRef.current) {
      scrambleRef.current.start();
    }
  };

  const handleResetAnimation = () => {
    if (scrambleRef.current) {
      scrambleRef.current.reset();
    }
  };

  return (
    <div>
      <ScrambleIn
        ref={scrambleRef}
        text="Hello, World!"
        scrambleSpeed={70}
        onComplete={() => console.log("Animation Complete!")}
      />
      <button onClick={handleStartAnimation}>Start Animation</button>
      <button onClick={handleResetAnimation}>Reset Animation</button>
    </div>
  );
}

export default MyComponent;
```

### Credits

Ported to Framer by Framer University.
```

--------------------------------

### Vertical Cut Reveal: Split by Words Example

Source: https://fancycomponents.dev/docs/components/text/vertical-cut-reveal

Demonstrates the text reveal effect when splitting by words.

```javascript
→ We're on a mission to make the 🌐 web super fun again! ☺→ We're on a mission to make the 🌐 web  super fun again! ☺
```
Tokens:
Raw