Animated Opening Type

// Code for animated-opening-type/basic

Installation

Usage

import { AnimatedOpeningTypeWord, AnimatedOpeningType, AnimatedOpeningTypeGrid } from "@/components/pluto-ui/animated-opening-type"

Word (Recommended)

The easiest way to display a word with all letters opening from the same direction:

<AnimatedOpeningTypeWord
  word="HELLO"
  direction="left"
  fontSize={4}
/>

The component uses shadcn CSS variables by default:

• backgroundColor: var(--primary)
• textColor: var(--primary-foreground)
• hoverTextColor: var(--primary-foreground)

You can customize with shadcn variables:

<AnimatedOpeningTypeWord
  word="HELLO"
  direction="left"
  fontSize={4}
  backgroundColor="var(--secondary)"
  textColor="var(--secondary-foreground)"
  hoverTextColor="var(--secondary-foreground)"
/>

Basic Grid

const letters = [
  { letter: "A", direction: "left" },
  { letter: "B", direction: "top" },
  { letter: "C", direction: "right" },
  { letter: "D", direction: "bottom" },
];

<AnimatedOpeningTypeGrid letters={letters} columns={4} />

Single Letter

<AnimatedOpeningType 
  letter="A" 
  direction="left" 
  fontSize={12} 
/>

Props

AnimatedOpeningType

AnimatedOpeningTypeWord

AnimatedOpeningTypeGrid

Examples

Basic Grid

The classic grid layout with letters opening from different directions:

// Code for animated-opening-type/basic

Custom Colors

Customize colors for a unique look:

// Code for animated-opening-type/custom

Word Display

Display a word with all letters opening from the same direction. Perfect for titles and headings:

// Code for animated-opening-type/word

Features

• 3D Opening Effect: Letters open from four directions (left, right, top, bottom) with 3D transforms
• Smooth Animations: Powered by motion (framer-motion) for fluid, performant animations
• Customizable Colors: Default colors per direction or fully customizable
• Responsive Grid: Automatically adapts to different screen sizes
• Type-safe: Full TypeScript support with exported types
• No CSS Files: All styling handled with Tailwind CSS
• Accessible: Respects prefers-reduced-motion for users who prefer reduced animations

How It Works

The component creates a 3D opening effect using two overlapping letter layers:

1. Base Layer (before): A semi-transparent shadow layer that scales and skews
2. Top Layer (after): The main letter that rotates in 3D space

On hover:

• The base layer transforms (scales, skews) to create depth
• The top layer rotates (rotateY for left/right, rotateX for top/bottom) to create the opening effect
• Colors transition smoothly for visual feedback

Each direction has unique transform configurations:

• Left: Opens from the left edge, rotating on Y-axis
• Right: Opens from the right edge, rotating on Y-axis
• Top: Opens from the top edge, rotating on X-axis
• Bottom: Opens from the bottom edge, rotating on X-axis

Customization

Word with Custom Colors and Size

The easiest way to customize a word using shadcn CSS variables:

<AnimatedOpeningTypeWord
  word="PLUTO"
  direction="left"
  fontSize={4}
  backgroundColor="var(--secondary)"
  textColor="var(--secondary-foreground)"
  hoverTextColor="var(--secondary-foreground)"
  gap={0.5}
/>

Custom Colors for Grid

Override default colors for all letters in a grid using shadcn CSS variables:

<AnimatedOpeningTypeGrid
  letters={letters}
  backgroundColor="var(--secondary)"
  textColor="var(--secondary-foreground)"
  hoverTextColor="var(--secondary-foreground)"
/>

Custom Animation Speed

Adjust the transition duration:

<AnimatedOpeningType
  letter="A"
  direction="left"
  transitionDuration={0.5} // Slower animation
/>

Custom Font Size

Control the size of letters:

<AnimatedOpeningTypeGrid
  letters={letters}
  fontSize={10} // Smaller letters
/>

Custom Grid Layout

Change the number of columns:

<AnimatedOpeningTypeGrid
  letters={letters}
  columns={4} // 4 columns instead of 6
/>

Responsive Behavior

The grid automatically adjusts columns based on screen size:

• Default: 6 columns
• ≤1190px: 5 columns
• ≤945px: 4 columns
• ≤760px: 3 columns
• ≤560px: 2 columns
• ≤340px: 1 column

Browser Support

This component uses CSS 3D transforms and motion animations, which are well-supported in modern browsers:

• Chrome 12+
• Firefox 10+
• Safari 4+
• Edge 12+

The component gracefully degrades if 3D transforms are not supported, showing the static letters without animation.

Notes

• Requires motion (framer-motion) as a dependency
• The component uses transform-style: preserve-3d and perspective for 3D effects
• Uses shadcn CSS variables by default for seamless theme integration
• Default colors use var(--primary) and var(--primary-foreground)
• Letters can be any character, including numbers and symbols
• The grid uses CSS Grid with Tailwind responsive classes
• All colors respect light/dark mode automatically through shadcn variables

Credits

This component was inspired by the Animated Opening Type tutorial from Codrops, reimplemented with React, Tailwind CSS, and motion (framer-motion).