Are the ai2 Motion items free?

Yes. The whole styled layer is free and MIT licensed, like the component core.

Can I change the size?

Yes. Every variation takes a size prop of sm, md, lg or xl, aligned to the base Button height scale.

Motion items

Five list rows that move: a row that lifts on hover, a slide entrance, a fade entrance, a spring pop that reacts to a tap, and a row whose trailing actions reveal on hover or focus. Timing is deterministic, and every animation is gated on reduced motion, where each row settles into its correct final state with no transform.

ItemMotion

Installation

The styled layer is free and installs like any other ai2 component.

Run the following command

npx shadcn@latest add @ai2/item-motion

Dependencies, the @ai2/tokens theme and the component file are installed together.

Install dependencies

npm install motion lucide-react

Copy the source

components/ui/item-motion.tsx

"use client"

import * as React from "react"
import { ChevronRight, Pencil, Sparkles, Star, Trash2 } from "lucide-react"
import { motion, useReducedMotion } from "motion/react"

import { cn } from "@/lib/utils"

/* Item motion family: 5 list rows carrying motion. There are two kinds: a hover reaction (Hover, Reveal) and an entry animation (Slide, Fade, Pop). All motion is turned off with useReducedMotion() - in that case the row sits in its correct final state with no transform and no delay. The timing is deterministic (no random delays). Colour comes ONLY from tokens; alpha via color-mix. Every export renders without props too. */

export type StyledSize = "sm" | "md" | "lg" | "xl"

const box: Record<StyledSize, string> = {
  sm: "gap-2.5 rounded-lg p-2 text-sm",
  md: "gap-3 rounded-lg p-3 text-sm",
  lg: "gap-3.5 rounded-xl p-4 text-base",
  xl: "gap-4 rounded-xl p-5 text-base",
}

const tile: Record<StyledSize, string> = {
  sm: "size-8 rounded-md [&_svg]:size-4 [&_i]:text-base",
  md: "size-9 rounded-md [&_svg]:size-4 [&_i]:text-base",
  lg: "size-10 rounded-lg [&_svg]:size-5 [&_i]:text-lg",
  xl: "size-12 rounded-lg [&_svg]:size-5 [&_i]:text-lg",
}

const base =
  "flex w-full items-center [&_svg]:shrink-0 [&_i]:not-italic [&_i]:leading-none"

const shell = "border border-border bg-card text-card-foreground"

const titleCls = "truncate font-medium text-foreground"
const descCls = "truncate text-muted-foreground text-[0.85em]"

const springy = { type: "spring" as const, stiffness: 420, damping: 28 }

interface Props {
  className?: string
  size?: StyledSize
  title?: React.ReactNode
  description?: React.ReactNode
}

function Body({
  title,
  description,
}: {
  title: React.ReactNode
  description?: React.ReactNode
}) {
  return (
    <div className="flex min-w-0 flex-1 flex-col">
      <span className={titleCls}>{title}</span>
      {description ? <span className={descCls}>{description}</span> : null}
    </div>
  )
}

/* Ikon karesi: brand tonlu token yuzey. */
function Tile({ size, children }: { size: StyledSize; children: React.ReactNode }) {
  return (
    <span
      aria-hidden="true"
      className={cn(
        "inline-flex shrink-0 items-center justify-center text-brand",
        tile[size],
        "bg-[color-mix(in_oklab,var(--color-brand)_12%,transparent)]"
      )}
    >
      {children}
    </span>
  )
}

/* Hover: the row rises slightly under the cursor and the chevron slides right. */
export function HoverItem({
  className,
  size = "md",
  title = "Workspace settings",
  description = "Hover the row to lift it",
}: Props) {
  const reduce = useReducedMotion()
  return (
    <motion.div
      data-slot="styled-item"
      className={cn(
        base,
        box[size],
        shell,
        "group transition-shadow duration-(--motion-fast) ease-(--motion-ease) hover:shadow-md motion-reduce:transition-none",
        className
      )}
      whileHover={reduce ? undefined : { y: -2 }}
      transition={springy}
    >
      <Tile size={size}>
        <Sparkles />
      </Tile>
      <Body title={title} description={description} />
      <ChevronRight className="size-4 text-muted-foreground transition-transform duration-(--motion-fast) ease-(--motion-ease) group-hover:translate-x-0.5 motion-reduce:transition-none motion-reduce:group-hover:translate-x-0" />
    </motion.div>
  )
}

/* Slide: the row enters sliding from the left. */
export function SlideItem({
  className,
  size = "md",
  title = "Invite teammates",
  description = "The row slides in from the left",
}: Props) {
  const reduce = useReducedMotion()
  return (
    <motion.div
      data-slot="styled-item"
      className={cn(base, box[size], shell, className)}
      initial={reduce ? { opacity: 0 } : { opacity: 0, x: -16 }}
      animate={reduce ? { opacity: 1 } : { opacity: 1, x: 0 }}
      transition={{ duration: 0.28, ease: "easeOut" }}
    >
      <Tile size={size}>
        <Star />
      </Tile>
      <Body title={title} description={description} />
      <ChevronRight className="size-4 text-muted-foreground" />
    </motion.div>
  )
}

/* Fade: the row enters in place with opacity only - the calmest entry. */
export function FadeItem({
  className,
  size = "md",
  title = "Usage report",
  description = "The row fades in on mount",
}: Props) {
  return (
    <motion.div
      data-slot="styled-item"
      className={cn(base, box[size], shell, className)}
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.32, ease: "easeOut" }}
    >
      <Tile size={size}>
        <Sparkles />
      </Tile>
      <Body title={title} description={description} />
      <ChevronRight className="size-4 text-muted-foreground" />
    </motion.div>
  )
}

/* Pop: yay (spring) ile buyuyerek girer, tiklamada hafifce basilir. */
export function PopItem({
  className,
  size = "md",
  title = "New achievement",
  description = "Springs in and reacts to a tap",
}: Props) {
  const reduce = useReducedMotion()
  return (
    <motion.div
      data-slot="styled-item"
      className={cn(base, box[size], shell, className)}
      initial={reduce ? { opacity: 0 } : { opacity: 0, scale: 0.94 }}
      animate={reduce ? { opacity: 1 } : { opacity: 1, scale: 1 }}
      whileTap={reduce ? undefined : { scale: 0.98 }}
      transition={springy}
    >
      <Tile size={size}>
        <Star />
      </Tile>
      <Body title={title} description={description} />
      <ChevronRight className="size-4 text-muted-foreground" />
    </motion.div>
  )
}

/* Reveal: the trailing actions open on hover and focus. The hover state is held at the ROOT of the row and the actions always stay in the DOM (only their appearance changes) - so they are keyboard reachable too and the state does not live in an unmounting subtree. */
export function RevealItem({
  className,
  size = "md",
  title = "Landing page copy",
  description = "Hover or focus to reveal actions",
}: Props) {
  const reduce = useReducedMotion()
  const [active, setActive] = React.useState(false)
  const shown = reduce || active

  const actionBtn =
    "relative inline-flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground outline-none transition-colors duration-(--motion-fast) ease-(--motion-ease) hover:bg-accent hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-3.5 [&_i]:text-sm"

  return (
    <div
      data-slot="styled-item"
      className={cn(base, box[size], shell, className)}
      onPointerEnter={() => setActive(true)}
      onPointerLeave={() => setActive(false)}
      onFocus={() => setActive(true)}
      onBlur={(e) => {
        if (!e.currentTarget.contains(e.relatedTarget as Node | null)) setActive(false)
      }}
    >
      <Tile size={size}>
        <Pencil />
      </Tile>
      <Body title={title} description={description} />
      <motion.span
        className="flex shrink-0 items-center gap-1"
        animate={shown ? { opacity: 1, x: 0 } : { opacity: 0, x: 8 }}
        transition={reduce ? { duration: 0 } : { duration: 0.18, ease: "easeOut" }}
      >
        <button type="button" aria-label="Edit" className={actionBtn}>
          <Pencil />
        </button>
        <button type="button" aria-label="Delete" className={actionBtn}>
          <Trash2 />
        </button>
      </motion.span>
    </div>
  )
}

Manual installs skip the @ai2/tokens theme, so add the token CSS from the theming guide or the tone colors will be missing.

Variations

5 takes on the same idea. Each is its own export, and every one accepts a size prop (sm, md, lg, xl) aligned to the base Button scale.

Hover

The row lifts and the chevron nudges right on hover.

Workspace settingsHover the row to lift it

Slide

The row slides in from the left on mount.

Invite teammatesThe row slides in from the left

Fade

The quietest entrance: opacity only, no transform.

Usage reportThe row fades in on mount

Pop

A spring entrance that also presses in on tap.

New achievementSprings in and reacts to a tap

Reveal

Trailing actions reveal on hover and on keyboard focus.

Landing page copyHover or focus to reveal actions

ai2 Motion items: 5 styled variations on the token system

The ai2 Motion items are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around list rows with hover feedback and entrance animation. They are free and MIT licensed, and every color comes from a semantic token, so they theme with the rest of ai2 in light and dark.

Motion runs on framer-motion: framer-motion drives the hover lift, the entrances and the action reveal. The styled layer is opt-in, so the dependency only lands if you use it; the base components stay lean. Under reduced motion, the transforms are skipped and each row renders in its final state.

What is in the ai2 Motion items?

5 exports in one file: Hover, Slide, Fade, Pop and Reveal. Each renders a native button and takes a size prop (sm, md, lg, xl) aligned to the base Button. They are separate from the base Button on purpose: the base keeps its clean variant, tone and size axes, while the styled layer carries the effects.

You own the file. Copy the one category file and you have all 5 variations, with no runtime dependency on ai2 itself.

Why use it

On-system by construction: Every color resolves to an ai2 semantic token, so the buttons follow your theme in light and dark with no extra work.
Effect without the sprawl: The decorations live in a dedicated styled file, so the base Button keeps its clean, predictable API.
Accessible and honest: Each renders a real button element, keeps a visible focus ring, and respects prefers-reduced-motion.

Features

Token-driven color: No hardcoded hex or oklch; the look recolors with your theme tokens.
framer-motion: framer-motion drives the hover lift, the entrances and the action reveal.
Reduced-motion aware: Under prefers-reduced-motion, the transforms are skipped and each row renders in its final state.
Size aligned to the base: Every variation takes sm, md, lg and xl matching the base Button height scale, so styled and base buttons line up in a row.

Production tips

Use it for emphasis, not everywhere: Styled buttons draw the eye. Reserve them for the one action you want people to take on a screen, and use the base Button for the rest.
Keep labels as verbs: The decoration adds weight, so a clear action label keeps the button scannable.
Pick one variation per surface: The variations share a family; using two different ones in the same view competes for attention.

Works with the rest of ai2

The Motion items sit alongside the base Button and the rest of the @ai2 registry. They share the same token file, so a styled action next to a base button or a badge stays visually consistent in both modes.