A text component that swap the letters in a text with a box 3D effect.
motion-sv
SET YOUR MIND TO IT
Installation
pnpm dlx shadcn-svelte@latest add http://sveltekit-prerender/f/letter-3d-swap.json
Install dependencies
Install the required packages for this component:
pnpm add motion-sv
Copy the Source Code
Copy and paste the following code into your project:
letter-3d-swap.svelte
charbox.svelte
index.ts
Folder Structure
Folder Structure
Visit Original Docs
For more deeper understaing visit fancy components documentation.
Examples
Position Example
Let's fo from start
Start from Center
Start from End
Random Stagger
Rotation Example
Left
Right
Top is cool
Goes to Bottom
Props
| Name | Type | Default | Description |
|---|---|---|---|
children | Snippet | undefined | Snippet content flattened into grapheme-safe characters for the 3D flip. |
as | keyof SvelteHTMLElements | "p" | HTML element used for the interactive text wrapper. |
mainClass | string | undefined | Classes applied to the root flex wrapper before `class` is merged in. |
frontFaceClass | string | undefined | Classes applied to the visible face of each 3D character box. |
secondFaceClass | string | undefined | Classes applied to the rotating second face of each character box. |
staggerDuration | number | 0.05 | Delay in seconds between adjacent character flips. |
staggerFrom | "first" | "last" | "center" | "random" | number | "first" | Starting point used to compute the per-character stagger delay. |
transition | AnimationOptions | { type: "spring", damping: 30, stiffness: 300 } | Motion options used when rotating the characters. |
rotateDirection | "top" | "right" | "bottom" | "left" | "right" | Direction each character box rotates toward on hover. |
class | string | undefined | Additional classes merged onto the root wrapper. |