4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T266f,"use client"; import React, { useState } from "react"; import { motion, LayoutGroup, AnimatePresence, type Transition } from "motion/react"; import { List, LayoutGrid, Layers, Star, Check } from "lucide-react"; import { cn } from "@/lib/utils"; export interface CollectionItem { id: string; title: string; subtitle: string; badge: string; image: string; icon: React.ElementType; } export type ViewMode = "list" | "card" | "pack"; // ─── Constants (hoisted – zero per-render cost) ────────────────────────────── const S: Transition = { type: "spring", stiffness: 400, damping: 32, mass: 0.8 }; const S_TAB: Transition = { type: "spring", stiffness: 500, damping: 35, mass: 0.6 }; const S_CHECK: Transition = { type: "spring", stiffness: 500, damping: 30 }; const FADE: Transition = { duration: 0.12, ease: [0.25, 0.1, 0.25, 1] }; const GPU: React.CSSProperties = { willChange: "transform", transform: "translateZ(0)", backfaceVisibility: "hidden" }; const RESET = { rotate: 0, x: 0, y: 0 }; const PACK_X = 22; const TABS: { mode: ViewMode; icon: React.ElementType }[] = [ { mode: "list", icon: List }, { mode: "card", icon: LayoutGrid }, { mode: "pack", icon: Layers }, ]; // ─── View-mode class maps (avoids repeated ternaries in render) ────────────── const GRID_CLS: Record = { list: "flex flex-col gap-2", card: "grid grid-cols-2 gap-3", pack: "h-64 flex items-center justify-center mt-4", }; const CARD_CLS: Record = { list: "flex-row gap-4 w-full rounded-lg", card: "flex-col gap-3 w-full items-start rounded-xl", pack: "absolute w-56 h-56 items-center justify-center rounded-xl", }; const IMG_CLS: Record = { list: "w-16 h-16 rounded-lg border border-border", card: "w-full aspect-square rounded-lg border border-border shadow-sm", pack: "w-full h-full rounded-lg border border-border shadow-lg", }; const WRAP_CLS: Record = { list: "p-2", card: "p-3", pack: "py-4", }; // ─── Sub-components ────────────────────────────────────────────────────────── const ViewTab = React.memo(function ViewTab({ active, onClick, icon: Icon }: { active: boolean; onClick: () => void; icon: React.ElementType; }) { return ( ); }); const ItemInfo = React.memo(function ItemInfo({ item, view }: { item: CollectionItem; view: ViewMode }) { const Icon = item.icon; const [checked, setChecked] = useState(false); const isCard = view === "card"; return (

{item.title}

{item.badge}

{item.subtitle}

setChecked((p) => !p)} className={cn( "shrink-0 flex items-center justify-center border transition-all duration-200 outline-none rounded-sm", isCard ? "size-6" : "size-7 mr-2", checked ? "bg-card border-primary text-primary" : "bg-card border-border text-foreground/80 hover:border-primary/40" )} > {checked && ( )} ); }); // ─── Main component ────────────────────────────────────────────────────────── export interface AnimatedLayoutProps { items: CollectionItem[]; defaultView?: ViewMode; heading?: string; className?: string; } export function AnimatedLayout({ items, defaultView = "list", heading = "My Tasks", className }: AnimatedLayoutProps) { const [view, setView] = useState(defaultView); const len = items.length; return (

{heading}

{items.map((item, i) => ( {view !== "pack" && } ))}

); } export default AnimatedLayout;4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"motion"}]]}]}],["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://grootstudio.vercel.app/r/animated-layout.json","proxyUrl":"https://shadcnregistry.com/r/grootstudio/animated-layout","itemId":"@grootstudio/animated-layout"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"registry/radix-nova/animated-layout/animated-layout.tsx","content":"$52","type":"registry:component","target":"@components/grootstudio/animated-layout.tsx"}]}]]}],"$L53"]}]

Animated Layout

Installation

Files

@components

Styles