Rendyn
Connect MCP free

The Rendyn collection · 12 selected components

Animated React components with a purpose

Choose motion for the job it does: introduce a heading, acknowledge an action, connect changing views, or explain an integration. Explore React and TypeScript components with real previews, source details and practical starting points for your interface.

Find your component Explore the examples

React · TypeScript · Live previews · Component source

Live from the catalogueOrbiting Circles
Try Orbiting Circles: an animated visual for an integration or partner section.
01

Text reveals and animated headings

Use a reveal to establish hierarchy or introduce a short message. Keep the final words readable, and avoid replaying an entrance every time someone scrolls back to the heading.

02

Hover cards and action feedback

Motion can show that a surface is interactive or acknowledge a meaningful result. Pointer effects still need a useful touch experience, keyboard focus and a clear action label.

Celebrate a confirmed milestone

Confetti

Trigger a short confetti effect after an actual success such as finishing onboarding. Avoid repeated bursts, and offer a quiet outcome for people who request less motion.

Preview, API & source for Confetti
03

Tabs, modals and scroll transitions

Use a transition to help people understand what changed. Keep view state, focus management and navigation working even when movement is disabled.

04

Marquees and integration visuals

Looping visuals can make a partner strip or connection diagram memorable. Reserve their space, keep labels readable, and provide a still alternative for continuous movement.

A logo or testimonial strip with pause on hover

Marquee

Choose horizontal or vertical direction, speed and spacing. This variant pauses on hover; add a keyboard-operable pause when the product needs one.

Preview, API & source for Marquee

From components to a product

Three ways to put them to work

Start with the user’s task, then choose the smallest set of components that makes it clear.

A landing page with a calm introduction

Reveal a short headline once, introduce the feature cards, and keep the visitor’s path to the product clear.

  1. Text Animate

    Reveal the heading by word, using the same semantic heading element as the static version.

  2. Tilt Card

    Add restrained hover depth to a featured card while preserving the touch and reduced-motion fallbacks.

  3. Animated Beam

    Explain a connection between labelled services in a separate integration illustration.

Keep the heading and call to action visible without animation. Load decorative effects after the page’s essential content and inspect actual rendering on a small device.

A settings flow that preserves context

Help users move between related settings and a review step without changing the whole page’s visual structure.

  1. Morphing Tabs

    Use a moving selection surface to connect related panels.

  2. Morphing Modal

    Present the review views in one controlled panel and close it through your application state.

  3. Confetti

    If the milestone warrants it, show one short celebration after the save is confirmed.

Animation does not save data or make a dialog accessible by itself. Test focus entry, Escape, focus return, keyboard navigation and the error path against your actual implementation.

A partner section that remains readable

Choose a visual based on the relationship you want to explain, and keep the same information available without continuous motion.

  1. Marquee

    Use a scrolling strip for a flat list of partners or short testimonials.

  2. Orbiting Circles

    Use an orbit when you want to show several services around one central product.

  3. Animated Beam

    Use a beam diagram when connections between particular nodes matter.

These are alternative layouts, not a requirement to combine three loops. Give automatic movement a suitable pause or static alternative, and keep names available to assistive technology.

A small implementation example

Give an animated heading a still alternative

After adding Text Animate and its listed dependencies, use the installed Motion hook to choose a plain heading when reduced motion is requested.

Keep the same typography and spacing on both branches. This pattern handles the heading; inspect CSS keyframes, canvas effects and looping decorations separately because a Motion setting does not control every animation technology.

"use client";

import { useReducedMotion } from "motion/react";
import { TextAnimate } from "@/components/magicui/text-animate";

export function FeatureHeading() {
  const reduceMotion = useReducedMotion();
  const title = "A clearer view of your work";

  if (reduceMotion !== false) {
    return <h2>{title}</h2>;
  }

  return (
    <TextAnimate as="h2" animation="fadeIn" by="word" once>
      {title}
    </TextAnimate>
  );
}

Make it fit your application

Before you ship

Check the source and its dependencies

The collection includes different implementations: Motion, CSS animations, and an effect such as canvas confetti. Open the component page to inspect its source bundle and dependencies rather than assuming every example shares one runtime or API.

Design the reduced-motion result

Choose what remains when transforms, parallax or loops are removed. Motion provides reduced-motion tools, but CSS and canvas need their own handling. A still layout should preserve the same content and usable controls.

Control automatic and repeated movement

For moving content that starts automatically, lasts over five seconds and appears alongside other content, WCAG calls for a pause, stop or hide mechanism unless the movement is essential. A hover pause alone does not cover keyboard or touch use.

Common questions

Which animated React component should I start with?

Choose the interaction first. Use a text reveal for a brief introduction, hover feedback for a featured action, a view transition for changing content, or a connection visual for an integration. Start with one effect and inspect the page before adding another.

Are all these Framer Motion or Motion components?

No. Several components use Motion, while others use CSS or canvas-based effects. Each component page lists its dependencies. Follow that source bundle’s installation and import paths instead of assuming one animation package covers the entire collection.

Do all components automatically support reduced motion?

Support varies by implementation. For example, Tilt Card checks reduced motion and hover capability in its source. Inspect each component, provide a static alternative where needed, and test the installed version with the device preference enabled.

How are the marquee variants different?

The Marquee linked here is the horizontal or vertical variant with pause on hover. The catalogue also has an infinite media marquee and a composable react-fast-marquee variant with separate content, item and fade parts. Their existing component pages retain their own URLs and interaction details.

Prefer choosing components with your coding agent? Connect Rendyn through MCP to search and retrieve implementation context.

Keep exploring

AI agent UI components

Build a conversation with prompts, streaming responses, approval decisions and tool results.

Explore the collection

Choose your next component

Try it in the catalogue

Inspect the live preview, usage, dependencies and upstream attribution before adapting it to your app.

Browse interaction components See source access and pricing