NexoreUI
2.0
InstallationComponentsIconsTemplatesNewNexore MakePricing
Create Project
GitHub
NexoreUI
2.0
Navigation
InstallationComponentsIconsTemplatesNexore MakeCreate Project
InstallationComponents OverviewIcons
Categories (65)
ButtonInputCheckboxSelectSwitchSliderRatingFile Upload
CardAccordionTabsTableStepperScroll AreaNavigationDockData DisplayChartsCommerce
Modal (Dialog)AlertBadgeAvatarTooltipProgressSkeletonLoadersToasterSocial
Aurora Border CardAurora Search PillAI Prompt InputCommandInteractive Code BlockPro AI
Media ShowcaseOverlays & DrawersPro ButtonsPro DashboardsPro E-CommercePro FeedbackPro FormsPro InputsPro LayoutsPro ListsPro MarketingPro NavigationPro TablesSpecial FormsUltra Components
OverviewPro CardsPro ObjectsSoundPulseSilkUnveilNode Flow Graph
NexoreUI v2.0Studio
DocsSpecial Animations

Special Animations

Framer Motion primitives: entrance choreographies, float physics, and clip-path wipes.

On This Page
Quick ActionsProject StudioNewNexore Make (AI)Source on GitHub
Motion Utilities

Special Animations

Composable Framer Motion wrappers for entrance choreographies, staggered cascades, floating micro-physics, and dynamic typewriter animations.

npx nexoreui add special-animations

Staggered Container & Items

Cascading entrance animation that staggers child items with smooth ease-out physics.

Authentication verified
Profile state hydrated
Workspace connected
component.tsx
1

API Reference (Props)

PropTypeDefaultDescription
staggerChildrennumber0.1Delay interval between child reveals.
delayChildrennumber0.1Initial start delay before container triggers.

Float Animation

Subtle continuous floating physics for decorative accents or cards.

Floating Element ✦
component.tsx
1

Typing Animation

Typewriter effect cycling through multiple strings with cursor blink.

|
component.tsx
1

Reveal Clip Transition

Curtain wipe effect using CSS clip-path interpolation.

clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)
component.tsx
1

Slide & Scale Combinators

Directional entrance primitives with configurable duration and delay.

SlideUp
ScaleIn
component.tsx
1

Accessibility (a11y)

  • Prefers-Reduced-Motion: All directional transitions collapse to instantaneous opacity reveals when users request reduced motion.
  • Performance: Animations use GPU-accelerated transform properties only.