` |
## Notes
- Sizing: width and height props have been removed. The size is controlled by the wrapper `
`. The component enforces the aspect ratio 1203/753.
- Masking: The screen area is only masked when media (src or videoSrc) is provided. Without media, only the frame is rendered.
- HTML Attributes: The Safari component accepts all standard HTMLDivElement props.
- iOS Compatibility: Video is rendered as a DOM overlay instead of foreignObject to avoid Safari/iOS masking issues.
---
### Apps Www Content Docs Components Scroll Based Velocity (`apps/www/content/docs/components/scroll-based-velocity.mdx`)
---
title: Scroll Based Velocity
date: 2024-05-22
description: Scrolling text whose speed changes based on scroll speed
author: whyismynamerudy
published: true
---
## Installation
CLI
Manual
```bash
npx shadcn@latest add @magicui/scroll-based-velocity
```
Install the following dependencies:
```bash
npm install motion
```
Copy and paste the following code into your project.
Update the import paths to match your project setup.
## Usage
```tsx showLineNumbers
import {
ScrollVelocityContainer,
ScrollVelocityRow,
} from "@/components/ui/scroll-based-velocity"
```
```tsx showLineNumbers
Velocity Scroll
Velocity Scroll
```
## Props
### ScrollVelocityContainer
| Prop | Type | Default | Description |
| ----------- | ----------- | ------- | --------------------------------------------- |
| `className` | `string` | `-` | The class name to be applied to the component |
| `children` | `ReactNode` | `-` | Content to be animated |
### ScrollVelocityRow
| Prop | Type | Default | Description |
| ------------------ | ----------- | ------- | -------------------------------------------------- |
| `className` | `string` | `-` | The class name to be applied to the row container |
| `children` | `ReactNode` | `-` | Content to be duplicated and scrolled |
| `baseVelocity` | `number` | `5` | Base scroll velocity percentage of content width |
| `direction` | `1 \| -1` | `1` | Scroll direction (1 = left-to-right, -1 = reverse) |
| `scrollReactivity` | `boolean` | `true` | Toggles scroll interactivity |
## Performance
- Pauses updates when offscreen and when the tab is hidden.
- Respects user preference for reduced motion.
---
### Apps Www Content Docs Components Scroll Progress (`apps/www/content/docs/components/scroll-progress.mdx`)
---
title: Scroll Progress
date: 2024-12-19
description: Animated Scroll Progress for your pages
author: dipesh_the_dev
published: true
---
## Installation
CLI
Manual
```bash
npx shadcn@latest add @magicui/scroll-progress
```
Copy and paste the following code into your project.
## Usage
```tsx showLineNumbers
import { ScrollProgress } from "@/components/ui/scroll-progress"
```
```tsx showLineNumbers
```
## Props
| Prop | Type | Default | Description |
| ----------- | -------- | ------- | --------------------------------------------- |
| `className` | `string` | `-` | The class name to be applied to the component |
The `ScrollProgress` component also accepts all properties of the `HTMLDivElement` type.
## Credits
- Credit to [dipesh_the_dev](https://twitter.com/dipesh_the_dev)
---
### Apps Www Content Docs Components Shimmer Button (`apps/www/content/docs/components/shimmer-button.mdx`)
---
title: Shimmer Button
date: 2023-08-10
description: A button with a shimmering light which travels around the perimeter.
author: dillionverma
published: true
video: https://cdn.magicui.design/shimmer-button.mp4
---
## Installation
CLI
Manual
```bash
npx shadcn@latest add @magicui/shimmer-button
```
Copy and paste the following code into your project.
Update the import paths to match your project setup.
Add the required CSS animations
Add the following animations to your global CSS file.
```css title="app/globals.css" showLineNumbers {2-4, 6-26}
@theme inline {
--animate-shimmer-slide: shimmer-slide var(--speed) ease-in-out infinite
alternate;
--animate-spin-around: spin-around calc(var(--speed) * 2) infinite linear;
@keyframes shimmer-slide {
to {
transform: translate(calc(100cqw - 100%), 0);
}
}
@keyframes spin-around {
0% {
transform: translateZ(0) rotate(0);
}
15%,
35% {
transform: translateZ(0) rotate(90deg);
}
65%,
85% {
transform: translateZ(0) rotate(270deg);
}
100% {
transform: translateZ(0) rotate(360deg);
}
}
}
```
## Usage
```tsx showLineNumbers
import { ShimmerButton } from "@/components/ui/shimmer-button"
```
```tsx showLineNumbers
Shimmer Button
```
## Props
| Prop | Type | Default | Description |
| ----------------- | ----------------- | ------------------ | ----------------------------------- |
| `shimmerColor` | `string` | `#ffffff` | The color of the shimmer |
| `shimmerSize` | `string` | `0.05em` | The size of the shimmer |
| `borderRadius` | `string` | `100px` | The border radius of the button |
| `shimmerDuration` | `string` | `3s` | The duration of the spark animation |
| `background` | `string` | `rgba(0, 0, 0, 1)` | The background of the button |
| `className` | `string` | `undefined` | The class name of the button |
| `children` | `React.ReactNode` | `undefined` | The children of the button |
## Credits
Credit to [@jh3yy](https://twitter.com/jh3yy/status/1656423856276488192) for the inspiration behind this component.
---
### Apps Www Content Docs Components Shine Border (`apps/www/content/docs/components/shine-border.mdx`)
---
title: Shine Border
date: 2024-05-25
description: Shine border is an animated background border effect.
author: unnamed-lab
published: true
---
## Installation
CLI
Manual
```bash
npx shadcn@latest add @magicui/shine-border
```
Copy and paste the following code into your project.
Update the import paths to match your project setup.
Add the required CSS animations
Add the following animations to your global CSS file.
```css title="app/globals.css" showLineNumbers {2, 4-14}
@theme inline {
--animate-shine: shine var(--duration) infinite linear;
@keyframes shine {
0% {
background-position: 0% 0%;
}
50% {
background-position: 100% 100%;
}
to {
background-position: 0% 0%;
}
}
}
```
## Examples
### Monotone
## Usage
```tsx showLineNumbers
import { ShineBorder } from "@/components/ui/shine-border"
```
```tsx showLineNumbers
```
## Props
| Prop | Type | Default | Description |
| ------------- | --------------------- | ----------- | ------------------------------------------------------------------- |
| `className` | `string` | `-` | The class name to be applied to the component. |
| `duration` | `number` | `14` | Defines the animation duration to be applied on the shining border. |
| `shineColor` | `string \| string[]` | `"#000000"` | Color of the border, can be a single color or an array of colors. |
| `borderWidth` | `number` | `1` | Width of the border in pixels. |
| `style` | `React.CSSProperties` | `-` | Additional styles to be applied to the component. |
---
### Apps Www Content Docs Components Shiny Button (`apps/www/content/docs/components/shiny-button.mdx`)
---
title: Shiny Button
date: 2024-05-24
description: A shiny button component with dynamic styles in the dark mode or light mode.
author: luis-codex
published: true
---
## Installation
CLI
Manual
```bash
npx shadcn@latest add @magicui/shiny-button
```
Copy and paste the following code into your project.
Update the import paths to match your project setup.
## Usage
```tsx showLineNumbers
import { ShinyButton } from "@/components/ui/shiny-button"
```
```tsx showLineNumbers
Shiny Button
```
## Props
| Prop | Type | Default | Description |
| ----------- | ----------------- | ------- | --------------------------------------------- |
| `className` | `string` | `-` | The class name to be applied to the component |
| `children` | `React.ReactNode` | `-` | The content to be displayed inside the button |
## Credits
- Credit to [@luis-code](https://luis-code.vercel.app/)
---
### Apps Www Content Docs Components Smooth Cursor (`apps/www/content/docs/components/smooth-cursor.mdx`)
---
title: Smooth Cursor
date: 2024-04-17
description: A customizable, physics-based smooth cursor animation component for React applications.
author: magicui
published: true
---
## Features
- π― Smooth physics-based cursor animations
- π Rotation effects based on movement direction
- β‘ Performance optimized with RAF
- π¨ Fully customizable cursor design
- π¦ Lightweight and easy to implement
## Installation
CLI
Manual
```bash
npx shadcn@latest add @magicui/smooth-cursor
```
Copy and paste the following code into your project.
Add the component to your page or layout.
```tsx showLineNumbers
import { SmoothCursor } from "@/components/ui/smooth-cursor"
export default function Page() {
return (
<>
{/* Your page content */}
)
}
```
## Usage
```tsx showLineNumbers
import { SmoothCursor } from "@/components/ui/smooth-cursor"
```
```tsx showLineNumbers
```
## Hiding Default Browser Cursor
To prevent the default browser cursor from overlapping with the custom cursor, add the following CSS globally:
```css showLineNumbers
* {
cursor: none !important;
}
```
### Optional: Keep text cursor for inputs
```css showLineNumbers
input,
textarea,
select {
cursor: text !important;
}
```
π‘ If you're using Tailwind CSS, you can add cursor-none to your layout wrapper:
```tsx showLineNumbers
{/* your app */}
```
## Props
| Prop | Type | Default | Description |
| -------------- | ----------------- | ---------------------- | ------------------------------------------------------ |
| `cursor` | `React.ReactNode` | `
` | Custom cursor component to replace the default cursor |
| `springConfig` | `SpringConfig` | See below | Configuration object for the spring animation behavior |
### SpringConfig Type
```typescript showLineNumbers
interface SpringConfig {
damping: number // Controls how quickly the animation settles
stiffness: number // Controls the spring stiffness
mass: number // Controls the virtual mass of the animated object
restDelta: number // Controls the threshold at which animation is considered complete
}
```
### Default Spring Configuration
```typescript showLineNumbers
const defaultSpringConfig = {
damping: 45,
stiffness: 400,
mass: 1,
restDelta: 0.001,
}
```
## Browser Support
Compatible with all modern browsers that support:
- `requestAnimationFrame`
- CSS transforms
- Pointer events
- Hover-capable fine pointers (mouse or trackpad)
Touch-first devices are ignored automatically to prevent the custom cursor from appearing after taps.
## Accessibility
When using this component, consider that:
- Users navigating via keyboard will not see the custom cursor
- You may want to provide alternative visual cues for interactive elements
- Some users may have motion sensitivity, so consider providing a way to disable the animation
## Credits
- Credit to [@Code_Parth](https://twitter.com/Code_Parth) for the original concept and implementation
---
### Apps Www Content Docs Components Sparkles Text (`apps/www/content/docs/components/sparkles-text.mdx`)
---
title: Sparkles Text
date: 2024-05-30
description: A dynamic text that generates continuous sparkles with smooth transitions, perfect for highlighting text with animated stars.
author: Draxx0
published: true
---
## Installation
CLI
Manual
```bash
npx shadcn@latest add @magicui/sparkles-text
```
Copy and paste the following code into your project.
Update the import paths to match your project setup.
## Usage
```tsx showLineNumbers
import { SparklesText } from "@/components/ui/sparkles-text"
```
```tsx showLineNumbers
Sparkles Text
```
## Props
| Prop | Type | Default | Description |
| --------------- | -------- | --------------------------------------- | -------------------------------------------------- |
| `children` | `string` | `-` | The content to display |
| `className` | `string` | `-` | The class name to be applied to the sparkles text. |
| `sparklesCount` | `number` | `10` | sparkles count that appears on the text |
| `colors` | `object` | `{first: '#A07CFE', second: '#FE8FB5'}` | the sparkles colors |
## Credits
- Credit to [@simonlejeune](https://www.simlej.dev/)
---
### Apps Www Content Docs Components Spinning Text (`apps/www/content/docs/components/spinning-text.mdx`)
---
title: Spinning Text
date: 2025-02-09
description: The Spinning Text component animates text in a circular motion with customizable speed, direction, color, and transitions for dynamic and engaging effects.
author: aayushbharti
published: true
---
## Installation
CLI
Manual
```bash
npx shadcn@latest add @magicui/spinning-text
```
Copy and paste the following code into your project.
Update the import paths to match your project setup.
## Examples
### Reverse
### Usage
```tsx showLineNumbers
import { SpinningText } from "@/components/ui/spinning-text"
```
```tsx showLineNumbers
learn more β’ earn more β’ grow more β’
```
## Props
| Prop | Type | Default | Description |
| ------------ | -------------------------------------------- | ------- | ------------------------------------------------------- |
| `children` | `ReactElement` | | The text content to be animated in a circular motion. |
| `style` | `CSSProperties` | `{}` | Custom styles for the text container. |
| `duration` | `number` | `10` | The duration of the full circular rotation animation. |
| `className` | `string` | | A custom class name for the text container. |
| `reverse` | `boolean` | `false` | Determines if the animation should rotate in reverse. |
| `radius` | `number` | `5` | The radius of the circular path for the text animation. |
| `transition` | `Transition` | | Custom transition effects for the animation. |
| `variants` | `{ container?: Variants; item?: Variants; }` | | Variants for container and item animations. |
## Credits
- Credit to [@AayushBharti](https://github.com/AayushBharti)
---
### Apps Www Content Docs Components Striped Pattern (`apps/www/content/docs/components/striped-pattern.mdx`)
---
title: Striped Pattern
date: 2025-09-01
description: A background striped pattern made with SVGs, fully customizable using Tailwind CSS.
author: matheusfigueiredo
published: true
---
## Installation
CLI
Manual
```bash
npx shadcn@latest add @magicui/striped-pattern
```
Copy and paste the following code into your project.
Update the import paths to match your project setup.
## Examples
### Striped Pattern with a dashed stroke
### Striped Pattern To Right
### Usage
```tsx
import { StripedPattern } from "@/components/ui/striped-pattern"
```
```tsx
```
## Props
### StripedPattern
| Prop | Type | Default | Description |
| ----------- | --------------------- | -------- | ----------------------- |
| `width` | `number` | `40` | Width of the pattern |
| `height` | `number` | `40` | Height of the pattern |
| `x` | `number` | `-1` | X offset of the pattern |
| `y` | `number` | `-1` | Y offset of the pattern |
| `direction` | `"left"` \| `"right"` | `"left"` | Line direction |
## Credits
- Credit to [@chishiyac](https://github.com/chishiyac)
---
### Apps Www Content Docs Components Terminal (`apps/www/content/docs/components/terminal.mdx`)
---
title: Terminal
date: 2025-01-16
description: An implementation of the MacOS terminal. Useful for showcasing a command line interface.
author: dillionverma
published: true
---
## Examples
### Custom Delays
## Installation
CLI
Manual
```bash
npx shadcn@latest add @magicui/terminal
```
Copy and paste the following code into your project.
## Usage
```tsx showLineNumbers
import {
AnimatedSpan,
Terminal,
TypingAnimation,
} from "@/components/ui/terminal"
```
```tsx showLineNumbers
pnpm dlx shadcn@latest init
β Preflight checks.
β Validating Tailwind CSS.
Success! Project initialization completed.
```
The terminal sequences its children automatically. Each `TypingAnimation` or `AnimatedSpan` starts when the previous finishes. Manual `delay` props are optional and typically unnecessary.
## Props
### Terminal
| Prop | Type | Default | Description |
| ------------- | ----------- | ------- | -------------------------------------------------------------- |
| `children` | `ReactNode` | `-` | Terminal content: a list of `TypingAnimation`/`AnimatedSpan`. |
| `className` | `string` | `-` | Custom CSS class for styling. |
| `sequence` | `boolean` | `true` | Enable auto sequencing so each line starts after the previous. |
| `startOnView` | `boolean` | `true` | Start sequencing when the terminal enters the viewport. |
### AnimatedSpan
| Prop | Type | Default | Description |
| ------------- | ----------- | ------- | --------------------------------------------------------------------------- |
| `children` | `ReactNode` | `-` | Content to be faded in. |
| `className` | `string` | `-` | Custom CSS class for styling. |
| `delay` | `number` | `0` | Delay in ms before animation starts (used when `sequence` is `false`). |
| `startOnView` | `boolean` | `false` | If `true`, waits for viewport visibility before animating when unsequenced. |
### TypingAnimation
| Prop | Type | Default | Description |
| ------------- | ---------------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------ |
| `children` | `string` | `-` | Text to be typed. |
| `className` | `string` | `-` | Custom CSS class for styling. |
| `duration` | `number` | `60` | Milliseconds per character. |
| `delay` | `number` | `0` | Delay in ms before typing starts (used when `sequence` is `false`). |
| `as` | `"article" \| "div" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "li" \| "p" \| "section" \| "span"` | `"span"` | The component type to render. |
| `startOnView` | `boolean` | `true` | If `true`, waits for viewport visibility before typing when unsequenced. |
---
### Apps Www Content Docs Components Text 3d Flip (`apps/www/content/docs/components/text-3d-flip.mdx`)
---
title: Text 3D Flip
date: 2026-04-05
description: A text effect that flips each letter in 3D with a staggered animation on hover.
author: aayushbharti
published: true
---
## Installation
CLI
Manual
```bash
npx shadcn@latest add @magicui/text-3d-flip
```
Copy and paste the following code into your project.
Update the import paths to match your project setup.
## Usage
```tsx showLineNumbers
import Text3DFlip from "@/components/ui/text-3d-flip"
```
```tsx showLineNumbers
Stay hungry, stay foolish
```
## Examples
### Stagger from center
## Props
| Prop | Type | Default | Description |
| ------------------- | ----------------------------------------------------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------- |
| `children`\* | `ReactNode` | `-` | The content to be displayed and animated |
| `as` | `ElementType` | `"p"` | HTML element to render the component as |
| `className` | `string` | `-` | Class name for the main container element |
| `textClassName` | `string` | `-` | Class name for each letter (visible before flip) |
| `flipTextClassName` | `string` | `-` | Class name for each letter (revealed after flip) |
| `staggerDuration` | `number` | `0.05` | Duration of stagger delay between each letter in seconds |
| `staggerFrom` | `"first" \| "last" \| "center" \| number \| "random"` | `"first"` | Direction to stagger animations from. Use a number to stagger from a specific character index |
| `transition` | `ValueAnimationTransition \| AnimationOptions` | `{ type: "spring", damping: 30, stiffness: 300 }` | Animation transition configuration from Motion |
| `rotateDirection` | `"top" \| "right" \| "bottom" \| "left"` | `"right"` | Direction of 3D rotation on hover |
## Credits
- Credit to [@AayushBharti](https://github.com/AayushBharti)
---
### Apps Www Content Docs Components Text Animate (`apps/www/content/docs/components/text-animate.mdx`)
---
title: Text Animate
date: 2025-01-01
description: A text animation component that animates text using a variety of different animations.
author: dillionverma
published: true
---
## Installation
CLI
Manual
```bash
npx shadcn@latest add @magicui/text-animate
```
Copy and paste the following code into your project.
Update the import paths to match your project setup.
## Examples
### Blur In by Text
### Slide Up by Word
### Scale Up by Text
### Fade In by Line
### Slide Left by Character
### With Delay
### With Duration
### With Custom Motion Variants
## Usage
```tsx showLineNumbers
import { TextAnimate } from "@/components/ui/text-animate"
```
```tsx showLineNumbers
Blur in by word
```
## Props
| Prop | Type | Default | Description |
| ------------------ | ---------------------------------------------------------------------------------------------------------- | ---------- | --------------------------------------------------------- |
| `children` | `string` | `-` | The text content to animate |
| `className` | `string` | `-` | The class name to be applied to the component |
| `segmentClassName` | `string` | `-` | The class name to be applied to each segment |
| `delay` | `number` | `0` | Delay before animation starts |
| `duration` | `number` | `0.3` | Duration of the animation |
| `variants` | `Variants` | `-` | Custom motion variants for the animation |
| `as` | `"article" \| "div" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "li" \| "p" \| "section" \| "span"` | `"p"` | The element type to render |
| `by` | `"text" \| "word" \| "character" \| "line"` | `"word"` | How to split the text ("text", "word", "character") |
| `startOnView` | `boolean` | `true` | Whether to start animation when component enters viewport |
| `once` | `boolean` | `false` | Whether to animate only once |
| `animation` | `AnimationVariant` | `"fadeIn"` | The animation preset to use |
| `accessible` | `boolean` | `true` | Whether to render an accessible screen-reader label |
---
### Apps Www Content Docs Components Text Reveal (`apps/www/content/docs/components/text-reveal.mdx`)
---
title: Text Reveal
date: 2024-04-08
description: Fade in text as you scroll down the page.
author: dillionverma
published: true
video: https://cdn.magicui.design/text-reveal.mp4
---
## Installation
CLI
Manual
```bash
npx shadcn@latest add @magicui/text-reveal
```
Copy and paste the following code into your project.
Update the import paths to match your project setup.
## Usage
```tsx showLineNumbers
import { TextReveal } from "@/components/ui/text-reveal"
```
```tsx showLineNumbers
Magic UI will change the way you design.
```
---
### Apps Www Content Docs Components Tweet Card (`apps/www/content/docs/components/tweet-card.mdx`)
---
title: Tweet Card
date: 2023-10-15
description: A card that displays a tweet with the author's name, handle, and profile picture.
author: dillionverma
published: true
video: https://cdn.magicui.design/tweet-card.mp4
---
## Installation
CLI
Manual
```bash
npx shadcn@latest add @magicui/tweet-card
```
Install the dependencies.
```bash
npm install react-tweet
```
### Installation React Server Component (Next.js 13+):
Copy and paste the following code into your project.
### Installation Client Side
Copy and paste the following code into your project.
Update the import paths to match your project setup.
## Usage
To render on server side using RSC (Next.js 13):
```tsx showLineNumbers
import { TweetCard } from "@/components/ui/tweet-card"
export default async function App() {
return
}
```
To render on client side:
```tsx showLineNumbers
"use client"
import { ClientTweetCard } from "@/components/ui/client-tweet-card"
export default function App() {
return
}
```
## Examples
### Tweet Card With Image Carousel
### Tweet Card With Meta URL Preview
## Props
### ClientTweetCard
| Prop | Type | Default | Description |
| ---- | -------- | ------- | ------------------------------- |
| `id` | `string` | `-` | The id of the tweet to display. |
### TweetCard
| Prop | Type | Default | Description |
| ---- | -------- | ------- | ------------------------------- |
| `id` | `string` | `-` | The id of the tweet to display. |
## Credits
This component is built on top of [React Tweet](https://react-tweet.vercel.app/).
---
### Apps Www Content Docs Components Typing Animation (`apps/www/content/docs/components/typing-animation.mdx`)
---
title: Typing Animation
date: 2024-05-22
description: Characters appearing in typed animation
author: imanubhardwaj
published: true
---
## Installation
CLI
Manual
```bash
npx shadcn@latest add @magicui/typing-animation
```
Copy and paste the following code into your project.
Update the import paths to match your project setup.
## Examples
### Basic Usage
### Multiple Words with Loop
### Custom Speed
### Start on View
### Without Cursor
### Single Play (No Loop)
### Cursor Blinking
### Cursor Styles
## Usage
```tsx showLineNumbers
import { TypingAnimation } from "@/components/ui/typing-animation"
```
```tsx showLineNumbers
Hello World! π
```
## Props
| Prop | Type | Default | Description |
| ------------- | ---------------------------------------------------------------------------------------------------------- | -------- | ----------------------------------------------- |
| `children` | `string` | `-` | Single string to animate |
| `words` | `string[]` | `-` | Array of strings to type and delete in sequence |
| `className` | `string` | `-` | The class name to be applied to the component |
| `duration` | `number` | `100` | Duration for each character |
| `typeSpeed` | `number` | `100` | Speed of typing animation (ms per character) |
| `deleteSpeed` | `number` | `50` | Speed of deleting animation (ms per character) |
| `delay` | `number` | `0` | Delay before animation starts (in ms) |
| `pauseDelay` | `number` | `1000` | Pause duration between words (in ms) |
| `loop` | `boolean` | `false` | Whether to loop the animation |
| `as` | `"article" \| "div" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "li" \| "p" \| "section" \| "span"` | `"span"` | Component to render as |
| `startOnView` | `boolean` | `true` | Start animation when component is in view |
| `showCursor` | `boolean` | `true` | Whether to show the typing cursor |
| `blinkCursor` | `boolean` | `true` | Whether the cursor should blink |
| `cursorStyle` | `"line" \| "block" \| "underscore"` | `"line"` | Style of the cursor (like VSCode) |
---
### Apps Www Content Docs Components Video Text (`apps/www/content/docs/components/video-text.mdx`)
---
title: Video Text
date: 2025-04-16
description: A text component with a video background.
author: magicui
published: true
---
## Installation
CLI
Manual
```bash
npx shadcn@latest add @magicui/video-text
```
Copy and paste the following code into your project.
## Usage
```tsx showLineNumbers
import { VideoText } from "@/components/ui/video-text"
```
```tsx showLineNumbers
OCEAN
```
## Props
| Prop | Type | Default | Description |
| ------------------ | -------------------------------- | -------------- | -------------------------------------------------------- |
| `src` | `string` | Required | The video source URL |
| `as` | `ElementType` | `"div"` | The element type to render for the text |
| `children` | `ReactNode` | Required | The content to display (will have the video "inside" it) |
| `className` | `string` | `""` | Additional className for the container |
| `autoPlay` | `boolean` | `true` | Whether to autoplay the video |
| `muted` | `boolean` | `true` | Whether to mute the video |
| `loop` | `boolean` | `true` | Whether to loop the video |
| `preload` | `"auto" \| "metadata" \| "none"` | `"auto"` | Whether to preload the video |
| `fontSize` | `string \| number` | `"120"` | Font size for the text mask |
| `fontWeight` | `string \| number` | `"bold"` | Font weight for the text mask |
| `textAnchor` | `string` | `"middle"` | Text anchor for the text mask |
| `dominantBaseline` | `string` | `"middle"` | Dominant baseline for the text mask |
| `fontFamily` | `string` | `"sans-serif"` | Font family for the text mask |
---
### Apps Www Content Docs Components Warp Background (`apps/www/content/docs/components/warp-background.mdx`)
---
title: Warp Background
date: 2024-12-24
description: A card with a time warping background effect.
author: magicui
published: true
---
## Installation
CLI
Manual
```bash
npx shadcn@latest add @magicui/warp-background
```
Copy and paste the following code into your project.
Update the import paths to match your project setup.
## Usage
```tsx showLineNumbers
import { WarpBackground } from "@/components/ui/warp-background"
```
```tsx showLineNumbers
Warp Background
This is a component that creates a warp background effect.
```
## Props
| Prop | Type | Default | Description |
| -------------- | ----------------- | ----------------- | ----------------------------------------------- |
| `children` | `React.ReactNode` | `-` | The content to be put inside the warp animation |
| `perspective` | `number` | `100` | The perspective of the warp animation |
| `beamsPerSide` | `number` | `3` | The number of beams per side |
| `beamSize` | `number` | `5` | The size of the beams |
| `beamDelayMax` | `number` | `3` | The maximum delay of the beams |
| `beamDelayMin` | `number` | `0` | The minimum delay of the beams |
| `beamDuration` | `number` | `3` | The duration of the beams |
| `gridColor` | `string` | `"var(--border)"` | The color of the grid lines |
---
### Apps Www Content Docs Components Word Rotate (`apps/www/content/docs/components/word-rotate.mdx`)
---
title: Word Rotate
date: 2024-05-21
description: A vertical rotation of words
author: dillionverma
published: true
---
## Installation
CLI
Manual
```bash
npx shadcn@latest add @magicui/word-rotate
```
Install the following dependencies:
```bash
npm install motion
```
Copy and paste the following code into your project.
Update the import paths to match your project setup.
## Usage
```tsx showLineNumbers
import { WordRotate } from "@/components/ui/word-rotate"
```
```tsx showLineNumbers
```
## Props
| Prop | Type | Default | Description |
| ------------- | ----------------- | ------- | --------------------------------------------- |
| `className` | `string` | `-` | The class name to be applied to the component |
| `duration` | `number` | `2500` | Duration of the animation |
| `words` | `string[]` | `""` | An array of words to rotate through |
| `motionProps` | `HTMLMotionProps` | `{}` | An object containing motion animation props |
---
### Apps Www Content Docs Templates Agent (`apps/www/content/docs/templates/agent.mdx`)
---
title: AI Agent Template
date: 2025-03-25
description: The ultimate landing page template for your AI agent startup.
author: dillionverma
published: true
---
### What is this?
This is a landing page template for an AI agent startup. The template is built with Next.js, TailwindCSS, and Motion, optimized for showcasing AI agent services.
### Who is this for?
You are launching a new AI agent startup and need a professional, eye-catching landing page to showcase your product's features.
### Why should I use this?
- β
Save 500+ hours of work
- β
No need to learn advanced animations
- β
Easy to configure and change
- β
1-click download and setup
- β
5 minutes to update the text and images
- β
Deploy live to Vercel
### Features
- 1x Landing Page with 9 sections
- Header Section
- Hero Section
- Logos Section
- Features Bento Grid Section
- Testimonials Section
- Pricing Section
- FAQ Section
- CTA Section
- Footer Section
- Dark mode support
- 100% Mobile responsive
- Full SEO coverage
- Dynamic OpenGraph images for every page
- Tons of animations / micro-interactions
- Clean and maintainable code
- Global constants and variables for color, text, and more
### Dependencies
- Next.js 15.2.2
- React 19
- TypeScript 5
- TailwindCSS 4
- Motion 12.5
- next-themes 0.4.6
- radix-ui
- shadcn/ui
---
### Apps Www Content Docs Templates Blog (`apps/www/content/docs/templates/blog.mdx`)
---
title: Blog Template
date: 2025-09-16
description: A minimal blog template built using Next.js.
author: dillionverma
published: true
---
A minimal changelog template to showcase your product updates, releases, and improvements in a beautiful timeline format. Built with Next.js, TailwindCSS, and Fumadocs for easy content management.
### Dependencies
- Next.js 15
- React 19
- TypeScript 5
- TailwindCSS 4
- Fumadocs UI
- next-themes
- radix-ui
- shadcn/ui
### Tech Stack
---
### Apps Www Content Docs Templates Changelog (`apps/www/content/docs/templates/changelog.mdx`)
---
title: Changelog Template
date: 2025-07-16
description: A minimal changelog template built using Next.js.
author: dillionverma
published: true
---
A minimal changelog template to showcase your product updates, releases, and improvements in a beautiful timeline format. Built with Next.js, TailwindCSS, and Fumadocs for easy content management.
### Dependencies
- Next.js 15
- React 19
- TypeScript 5
- TailwindCSS 4
- Fumadocs UI
- next-themes
- radix-ui
- shadcn/ui
### Tech Stack
---
### Apps Www Content Docs Templates Codeforge (`apps/www/content/docs/templates/codeforge.mdx`)
---
title: Codeforge Template
date: 2025-12-23
description: A professional landing page template designed for developer tools and workflow automation platforms. Showcase your product's capabilities with interactive demos, workflow visualizations, and compelling features.
author: dillionverma
published: true
---
### What is this?
This is a landing page template for an AI agent startup. The template is built with Next.js, TailwindCSS, and Motion, optimized for showcasing AI agent services.
### Who is this for?
You are launching a new AI agent startup and need a professional, eye-catching landing page to showcase your product's features.
### Why should I use this?
- β
Save 500+ hours of work
- β
Landing Page with 9 sections
- β
Dark mode support
- β
100% Mobile responsive
- β
SEO optimized
- β
Interactive animations
- β
Workflow visualization components
- β
Clean and maintainable code
- β
Global config for easy updates
- β
Easy customization
- β
1-click download and setup
- β
Deploy live to Vercel
### Features
- Landing Page with 9 sections
- Header Section
- Hero Section
- Logos Section
- Features Bento Grid Section
- Testimonials Section
- Pricing Section
- FAQ Section
- CTA Section
- Footer Section
- Dark mode support
- 100% Mobile responsive
- Full SEO coverage
- Dynamic OpenGraph images for every page
- Tons of animations / micro-interactions
- Clean and maintainable code
- Global constants and variables for color, text, and more
### Dependencies
- Next.js 15
- React 18.3
- TypeScript 5
- TailwindCSS 3.4
- Framer Motion 11.3
- next-themes 0.3.0
- radix-ui
- shadcn/ui
---
### Apps Www Content Docs Templates Devtool (`apps/www/content/docs/templates/devtool.mdx`)
---
title: Dev Tool
date: 2024-11-18
description: The ultimate landing page template for your developer tool.
author: dillionverma
published: true
---
### What is this?
This is a landing page template for a developer tool. The template is built with Next.js, TailwindCSS, and Framer Motion, optimized for showcasing developer tools and services.
### Who is this for?
You are launching a new developer tool or service and need a professional, eye-catching landing page to showcase your product's features and attract developers.
### Why should I use this?
- β
Save 500+ hours of work
- β
No need to learn advanced animations
- β
Easy to configure and change
- β
1-click download and setup
- β
5 minutes to update the text and images
- β
Deploy live to Vercel
### Features
- 1x Landing Page with 13 sections
- Header Section
- Hero Section
- Logos Section
- Examples Section
- Use Cases Section
- Features Section
- Statistics Section
- Testimonials Section
- Pricing Section
- Community Section
- Blog Section
- CTA Section
- Footer Section
- 1x Blog using MDX
- Dark mode support
- 100% Mobile responsive
- Full SEO coverage
- Dynamic OpenGraph images for every page
- Tons of animations / micro-interactions
- Clean and maintainable code
- Global constants and variables for color, text, and more
### Dependencies
- Next.js 15
- React 18.3
- TypeScript 5
- TailwindCSS 3.4
- Framer Motion 11.3
- next-themes 0.3.0
- radix-ui
- shadcn/ui
---
### Apps Www Content Docs Templates Mobile (`apps/www/content/docs/templates/mobile.mdx`)
---
title: Mobile
date: 2024-10-18
description: The ultimate landing page template for your mobile app.
author: dillionverma
published: true
---
### What is this?
This is a landing page template for a mobile app. The template is built with Next.js, TailwindCSS, and Framer Motion, optimized for showcasing mobile applications.
### Who is this for?
You are launching a new mobile app and need a professional, eye-catching landing page to showcase your app's features and drive downloads.
### Why should I use this?
- β
Save 500+ hours of work
- β
No need to learn advanced animations
- β
Easy to configure and change
- β
1-click download and setup.
- β
5 minutes to update the text and images.
- β
Deploy live to vercel
### Features
- 1x Landing Page with 12 sections
- Header Section
- Hero Section
- Feature Scroll Section
- Bento Grid Section
- Feature Highlight Section
- Benefits Section
- Features Section
- Testimonials Section
- Pricing Section
- FAQ Section
- CTA Section
- Footer Section
- Dark mode support
- 100% Mobile responsive
- Full SEO coverage
- Dynamic OpenGraph images for every page
- Tons of animations / micro-interactions
- Clean and maintainable code
- Global constants and variables for color, text, and more
### Dependencies
- Next.js 14
- React 18.3
- TypeScript 5
- TailwindCSS 3.4
- Framer Motion 11.3
- next-themes 0.3
- radix-ui
- shadcn/ui
---
### Apps Www Content Docs Templates Portfolio (`apps/www/content/docs/templates/portfolio.mdx`)
---
title: Portfolio Template
date: 2024-06-18
description: A minimal portfolio template to showcase your work and experience.
author: dillionverma
published: true
---
A portfolio template used to showcase your skills, work experience, and projects as a developer.
### Features
- Hero Section
- About Section
- Work Section
- Education Section
- Projects Section
- Hackathon Section
- Contact Section
- Blog
### Tech Stack
---
### Apps Www Content Docs Templates Saas (`apps/www/content/docs/templates/saas.mdx`)
---
title: SaaS Template
date: 2024-09-05
description: The ultimate landing page template for your SaaS product.
author: dillionverma
published: true
---
### What is this?
This is a landing page template for a SaaS product. The template is built with Next.js, TailwindCSS, and Framer Motion.
### Who is this for?
You are looking to launch a new SaaS product but don't want to spend time on learning frontend or figuring out how to design.
### Why should I use this?
- β
Save 500+ hours of work
- β
No need to learn advanced animations
- β
Easy to configure and change
- β
1-click download and setup.
- β
5 minutes to update the text and images.
- β
Deploy live to vercel
### Features
- 1x Landing Page with 14 sections
- Header Section
- Hero Section
- Logos Section
- Problem Section
- Solution Section
- How It Works Section
- Testimonial Highlight Section
- Features Section
- Testimonials Section
- Pricing Section
- FAQ Section
- Blog Section
- CTA Section
- Footer Section
- 1x Blog using MDX
- Dark mode support
- 100% Mobile responsive
- Full SEO coverage
- Dynamic OpenGraph images for every page
- Tons of animations / micro-interactions
- Clean and maintainable code
- Global constants and variables for color, text, and more
### Dependencies
- Next.js 14
- React 18.3
- TypeScript 5
- TailwindCSS 3.4
- Framer Motion 11.3
- next-themes 0.3
- radix-ui
- shadcn/ui
---
### Apps Www Content Docs Templates Startup (`apps/www/content/docs/templates/startup.mdx`)
---
title: Startup Template
date: 2024-04-12
description: The best landing page template for launching new ideas. Perfect for bootstrappers and pre-PMF VC backed startups.
author: dillionverma
published: true
---
### What is this?
A complete landing page template to launch a new project or idea (frontend only). Uses the latest frontend technologies and best practices to unblock you and delight your customers.
### Who is this for?
You are an indiehacker, bootstrapper, YC startup, solopreneur, VC-backed startup, developer, or student. You are thinking about launching a new idea or already have a prototype. Maybe it's an AI SaaS, a crazy drone robot company, or just a simple digital product. But... you dread the idea of learning react or anything frontend π©
**This template is exactly what you're looking for.**
### Why should I use this?
- β
Save 100+ hours of work
- β
No need to learn advanced animations
- β
Easy to configure and change
- β
1-click download and setup.
- β
5 minutes to update the text and images.
- β
Deploy live to vercel
### Features
- Header Section
- Hero Section
- Social Proof Section
- Pricing Section
- Call To Action Section
- Footer Section
- Mobile Reponsive Navbar
### Tech Stack
---
--- METRICS ---
- Files Extracted: 93
- Estimated Token Budget: ~55654 tokens
- Canonical Reference: https://codewiki.google/github.com/magicuidesign/magicui
