Cupertino Text

A beautiful Cupertino-style slide-down fade-in text animation effect for React applications, featuring Apple's signature staggered animations that create engaging visual experiences.

Features

• 🍎 Authentic Cupertino design - Matches Apple's interface animation style
• 🎯 Smooth exponential easing - Uses cubic-bezier curves for natural motion
• 📱 Apple-style staggered animations - Each word/line animates with beautiful delay
• 🔄 Intersection Observer - Triggers when element enters viewport
• ⚡ Highly customizable - Control timing, distance, stagger, and more
• 📝 Word or line-based - Animate by individual words or entire lines
• 🎨 CSS-in-JS - No external stylesheets needed
• 📱 Responsive - Works great on all devices
• 🔧 TypeScript support - Full type definitions included

Installation

Install the package via npm:

1npm install cupertino-text

or

1npm i cupertino-text

Usage

Import the CupertinoText component into your React application:

1import React from 'react';
2import CupertinoText from 'cupertino-text';

Basic Usage

By default, text will slide down and fade in word by word with Cupertino-style timing:

1<CupertinoText>
2  Transform your text with beautiful Cupertino animations
3</CupertinoText>

Line-by-Line Animation

Use the lines prop to animate entire lines instead of individual words:

1<CupertinoText lines>
2  First line slides in with Cupertino elegance
3  Second line follows with perfect timing
4  Third line completes the sequence beautifully
5</CupertinoText>

Custom Timing and Effects

Customize the animation with various props:

1<CupertinoText 
2  delay={200}
3  duration={1000}
4  stagger={120}
5  distance={80}
6>
7  Customize every aspect of the Cupertino animation
8</CupertinoText>

With Custom Styling

Apply your own styles using className or style props:

1<CupertinoText 
2  className="my-custom-text"
3  style={{ 
4    fontSize: '2rem', 
5    fontWeight: 'bold',
6    color: '#007AFF'  // Cupertino blue
7  }}
8>
9  Styled Cupertino animated text
10</CupertinoText>

Props

Prop	Type	Default	Description
children	ReactNode	-	The text or content to animate
delay	number	0	Initial delay before animation starts (ms)
duration	number	800	Duration of each element's animation (ms)
stagger	number	80	Delay between each word/line animation (ms)
distance	number	60	Distance elements slide from (px)
className	string	''	Additional CSS classes
style	CSSProperties	{}	Inline styles for the container
lines	boolean	false	Animate by lines instead of words
triggerOnce	boolean	true	Whether to trigger animation only once

Animation Details

The component uses authentic Cupertino design principles:

• Cubic-bezier easing: cubic-bezier(0.25, 0.46, 0.45, 0.94) for Apple's signature smooth motion
• Intersection Observer: Automatically triggers when element becomes visible
• Transform-based animation: Uses translateY for better performance
• Staggered timing: Each word/line has progressively longer delay, just like in Apple's interfaces

Examples

Hero Section

1<CupertinoText 
2  duration={1200}
3  stagger={100}
4  style={{ fontSize: '3rem', fontWeight: '700' }}
5>
6  Welcome to the Future
7</CupertinoText>

Feature List

1<CupertinoText 
2  lines
3  delay={300}
4  stagger={150}
5>
6  ✨ Beautiful Cupertino animations
7  🚀 Easy to implement  
8  🎨 Fully customizable
9</CupertinoText>

Marketing Copy

1<CupertinoText 
2  duration={600}
3  stagger={60}
4  distance={40}
5>
6  Experience the magic of smooth Cupertino text animations that captivate your users
7</CupertinoText>

Apple-style Product Showcase

1<CupertinoText 
2  lines
3  duration={900}
4  stagger={200}
5  style={{ 
6    fontSize: '2.5rem', 
7    fontWeight: '600',
8    color: '#1d1d1f'
9  }}
10>
11  iPhone 15 Pro
12  Titanium. So strong. So light.
13  So Pro.
14</CupertinoText>

Performance

• Uses transform and opacity for GPU-accelerated animations
• Intersection Observer prevents animations on hidden elements
• Minimal bundle size with no external dependencies
• Optimized for 60fps animations, matching Apple's standards

Browser Support

• Chrome/Edge 51+
• Firefox 55+
• Safari 12.1+
• iOS Safari 12.2+

Dependencies

Peer Dependencies:

• React: >=16.8.0
• react-dom: >=16.8.0

Make sure your project has compatible versions of React installed.

License

This project is licensed under the MIT License.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

If you encounter any issues or have questions, feel free to open an issue on the GitHub repository.

---

Bring Apple's signature animation style to your React applications with cupertino-text! 🍎✨