Radial Intro

Component 271

About

A circular intro animation component that arranges elements in a radial layout, smoothly transitioning them into orbit with looping motion.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Radial Intro to your project and fits it to your theme.

Code

How Radial Intro is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Component } from "@/components/ui/radial-intro";

const ITEMS = [
  {
    id: 1,
    name: "Framer University",
    src: "https://cdn.21st.dev/assets/mirror/dc/dccf07dde4470272d64ae3000768bedca2ac478a0c31c02a011f7ceb2d3ca392.jpg",
  },
  {
    id: 2,
    name: "arhamkhnz",
    src: "https://cdn.21st.dev/assets/localized/dcbd1f440d0c95b1438a854dca3e23c7171ca4703e6d58ee91e98c159b1874c6.png",
  },
  {
    id: 3,
    name: "Skyleen",
    src: "https://cdn.21st.dev/assets/mirror/4d/4dfcb3c259477ef1e2a067f1b2b27cd384e65c62e4b0fce9eed02608cb4a0027.jpg",
  },
  {
    id: 4,
    name: "Shadcn",
    src: "https://cdn.21st.dev/assets/mirror/e9/e941f86e0ca2b1c9eefd47618a92040443f85598470bad47399cee7f259c0756.jpg",
  },
  {
    id: 5,
    name: "Adam Wathan",
    src: "https://cdn.21st.dev/assets/mirror/7b/7bc0cc1e66037830ac2bc11ecd407164debb9c96d61ab57fd33e8c5ac0342f46.jpg",
  },
  {
    id: 6,
    name: "Guillermo Rauch",
    src: "https://cdn.21st.dev/assets/mirror/bd/bda00209d3375399bf57be3d3ac7aa59d1b293e08baf486a141fcd3a612184bf.jpg",
  },
  {
    id: 7,
    name: "Jhey",
    src: "https://cdn.21st.dev/assets/mirror/e6/e6e12f0e31f875e51a24c5ba62eac783c0361815bc2eba5eef6f9c8ca1bf0466.jpg",
  },
  {
    id: 8,
    name: "David Haz",
    src: "https://cdn.21st.dev/assets/localized/d9ee1abec7266e75c633090f4fed774a47d04ea683796c401c22286126c7918e.png",
  },
  {
    id: 9,
    name: "Matt Perry",
    src: "https://cdn.21st.dev/assets/mirror/8e/8ec5623088d98503782e468e71f702a315a6a90468d17b01ad9a32e9569d140f.jpg",
  },
];

export default function DemoOne() {
  return <Component orbitItems={ITEMS} />;
}