Components
Text Roll
Text that rolls in with 3D effects.
Text Roll
The TextRoll component creates text that rolls in with 3D effects. It's perfect for creating dynamic text entrances with a rolling animation.
Usage
Rolling Text
<template>
<MTextRoll children="Rolling Text" />
</template>
Props
children
string required
Text to roll.
duration
number
Animation duration in seconds.
getEnterDelay
function
Function to calculate enter delay for each character.
getExitDelay
function
Function to calculate exit delay for each character.
className
string
CSS classes to apply to the container.
transition
object
Animation transition options.
variants
object
Custom animation variants.
onAnimationComplete
function
Callback when animation completes.
Examples
Basic Text Roll
Discover Amazing Features
Our platform offers cutting-edge solutions that help you achieve your goals faster.
Lightning Fast
Optimized for performance with minimal load times
Beautiful Effects
Stunning animations that captivate your audience
Easy Integration
Simple to implement with clean, well-documented code
<template>
<div class="p-4">
<MTextRoll children="Basic Roll" />
</div>
</template>
Custom Duration
Slow Roll
<template>
<div class="p-4">
<MTextRoll children="Slow Roll" :duration="1" />
</div>
</template>
Custom Delay Function
Staggered Roll
<template>
<div class="p-4">
<MTextRoll
children="Staggered Roll"
:get-enter-delay="(i) => i * 0.2"
:get-exit-delay="(i) => i * 0.2 + 0.5"
/>
</div>
</template>
With Custom Styling
Styled Roll
<template>
<div class="p-4">
<MTextRoll children="Styled Roll" className="text-2xl font-bold text-blue-600" />
</div>
</template>
With Custom Variants
Text Rolling
Transform Your Digital Experience
Create stunning interfaces with our collection of animated components that enhance user engagement and drive results.
Roll Controls
Live Preview
Title Preview
Transform Your Digital Experience
Subtitle Preview
Create stunning interfaces with our collection of animated components that enhance user engagement and drive results.
Example Usage
Feature HighlightNew!
Performance99.9% Uptime
Get Started Today
Why Choose Our Roll Effects?
Lightning Fast
Optimized for performance with minimal load times
Beautiful Effects
Stunning animations that captivate your audience
Easy Integration
Simple to implement with clean, well-documented code
<template>
<div class="p-4">
<MTextRoll
children="Custom Roll"
:variants="{
enter: { initial: { rotateX: 0 }, animate: { rotateX: 180 } },
exit: { initial: { rotateX: 180 }, animate: { rotateX: 0 } }
}"
/>
</div>
</template>