Aceternity UI - AI Component Catalog

[
  {
    "title": "Background Overlay Card",
    "slug": "/blocks/cards/background-overlay-card",
    "slugAsParams": "background-overlay-card",
    "description": "A card with a static background image that swaps to an animated GIF on hover. Includes a dark overlay that appears during the hover state.",
    "category": "cards",
    "categoryLabel": "Cards",
    "difficulty": "beginner",
    "keywords": [
      "hover GIF card",
      "background swap card",
      "animated background hover",
      "CSS hover card effect",
      "image overlay card",
      "next.js hover card",
      "GIF reveal card",
      "dynamic background card",
      "creative card hover",
      "media card animation"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/cards/background-overlay-card"
  },
  {
    "title": "Background Dots Masked Vertical",
    "slug": "/blocks/backgrounds/background-with-dots-masked-vertical",
    "slugAsParams": "background-with-dots-masked-vertical",
    "description": "A dotted pattern with a linear vertical mask that fades from top to bottom. Ideal for hero sections where content continues below the fold.",
    "category": "backgrounds",
    "categoryLabel": "Backgrounds",
    "difficulty": "beginner",
    "keywords": [
      "vertical mask background",
      "linear gradient mask",
      "fade to bottom background",
      "CSS vertical mask",
      "top to bottom fade",
      "hero section background",
      "next.js linear mask",
      "react fade background",
      "scroll fade pattern",
      "tailwind linear gradient"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/backgrounds/background-with-dots-masked-vertical"
  },
  {
    "title": "Background Dots Masked",
    "slug": "/blocks/backgrounds/background-with-dots-masked",
    "slugAsParams": "background-with-dots-masked",
    "description": "A dotted pattern with a radial CSS mask that fades the pattern from center to edges. Creates a spotlight effect that draws attention to centered content.",
    "category": "backgrounds",
    "categoryLabel": "Backgrounds",
    "difficulty": "beginner",
    "keywords": [
      "masked dot pattern",
      "radial mask background",
      "spotlight background effect",
      "CSS mask-image",
      "fading dot pattern",
      "centered background mask",
      "next.js masked background",
      "react radial gradient",
      "hero spotlight pattern",
      "tailwind mask image"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/backgrounds/background-with-dots-masked"
  },
  {
    "title": "Background Dots",
    "slug": "/blocks/backgrounds/background-with-dots",
    "slugAsParams": "background-with-dots",
    "description": "A CSS-only dotted pattern background using radial gradients. Lightweight alternative to SVG or canvas-based patterns with automatic dark mode support.",
    "category": "backgrounds",
    "categoryLabel": "Backgrounds",
    "difficulty": "beginner",
    "keywords": [
      "dotted background pattern",
      "CSS dot grid",
      "radial gradient background",
      "minimal background pattern",
      "next.js background dots",
      "react dot pattern",
      "lightweight hero background",
      "dark mode background",
      "repeating dot pattern",
      "tailwind background pattern"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/backgrounds/background-with-dots"
  },
  {
    "title": "Background With Full Video",
    "slug": "/blocks/backgrounds/background-with-full-video",
    "slugAsParams": "background-with-full-video",
    "description": "A full-screen video background that fades in on load with a radial mask in dark mode. Pairs with animated colorful text that cycles through colors on an interval.",
    "category": "backgrounds",
    "categoryLabel": "Backgrounds",
    "difficulty": "beginner",
    "keywords": [
      "video background",
      "full screen video",
      "hero background video",
      "react video background",
      "next.js video hero",
      "landing page video background",
      "autoplay video background",
      "dark mode video",
      "masked video background",
      "framer motion video"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/backgrounds/background-with-full-video"
  },
  {
    "title": "Background Lines",
    "slug": "/blocks/backgrounds/background-with-lines",
    "slugAsParams": "background-with-lines",
    "description": "An animated background with shooting star trails and pulsing concentric circles. Uses SVG animations for the stars and Framer Motion for the breathing circle effect.",
    "category": "backgrounds",
    "categoryLabel": "Backgrounds",
    "difficulty": "intermediate",
    "keywords": [
      "shooting stars background",
      "animated lines background",
      "space background react",
      "pulsing circles animation",
      "next.js animated background",
      "SVG shooting stars",
      "framer motion circles",
      "hero section animation",
      "cosmic background effect",
      "gradient star trails"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/backgrounds/background-with-lines"
  },
  {
    "title": "Background Noise Grid",
    "slug": "/blocks/backgrounds/background-with-noise-grid",
    "slugAsParams": "background-with-noise-grid",
    "description": "Vertical strips with gradient fills and a noise texture overlay create a subtle layered background. Dynamically calculates strip count based on viewport width.",
    "category": "backgrounds",
    "categoryLabel": "Backgrounds",
    "difficulty": "intermediate",
    "keywords": [
      "noise texture background",
      "grid background react",
      "vertical strips background",
      "dynamic background pattern",
      "next.js noise overlay",
      "responsive grid background",
      "gradient strips hero",
      "masked noise texture",
      "tailwind noise background",
      "landing page texture"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/backgrounds/background-with-noise-grid"
  },
  {
    "title": "Background With Shooting Stars",
    "slug": "/blocks/backgrounds/background-with-shooting-stars",
    "slugAsParams": "background-with-shooting-stars",
    "description": "An animated background with shooting star trails and pulsing concentric circles. Uses SVG animations for the stars and Framer Motion for the breathing circle effect.",
    "category": "backgrounds",
    "categoryLabel": "Backgrounds",
    "difficulty": "intermediate",
    "keywords": [
      "shooting stars background",
      "animated lines background",
      "space background react",
      "pulsing circles animation",
      "next.js animated background",
      "SVG shooting stars",
      "framer motion circles",
      "hero section animation",
      "cosmic background effect",
      "gradient star trails"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/backgrounds/background-with-shooting-stars"
  },
  {
    "title": "Background With Skewed Lines",
    "slug": "/blocks/backgrounds/background-with-skewed-lines",
    "slugAsParams": "background-with-skewed-lines",
    "description": "Diagonal line pattern using an SVG pattern element with a linear mask that fades the center. Lightweight and resolution-independent.",
    "category": "backgrounds",
    "categoryLabel": "Backgrounds",
    "difficulty": "beginner",
    "keywords": [
      "diagonal lines background",
      "SVG pattern background",
      "skewed lines hero",
      "hatched background pattern",
      "next.js SVG pattern",
      "react diagonal lines",
      "minimal line pattern",
      "cross-hatch background",
      "masked SVG background",
      "tailwind SVG pattern"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/backgrounds/background-with-skewed-lines"
  },
  {
    "title": "Background With Skewed Rectangles",
    "slug": "/blocks/backgrounds/background-with-skewed-rectangles",
    "slugAsParams": "background-with-skewed-rectangles",
    "description": "A 3D perspective grid pattern with rectangles rotated on the X-axis. Two layers create a symmetrical effect with masks fading in opposite directions.",
    "category": "backgrounds",
    "categoryLabel": "Backgrounds",
    "difficulty": "intermediate",
    "keywords": [
      "3D perspective grid",
      "skewed background pattern",
      "CSS perspective transform",
      "rotateX background",
      "symmetric grid background",
      "next.js 3D background",
      "react perspective grid",
      "architectural background",
      "grid pattern hero",
      "tailwind 3D transform"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/backgrounds/background-with-skewed-rectangles"
  },
  {
    "title": "Bento Grid With Skeletons",
    "slug": "/blocks/bento-grids/bento-grid-with-skeletons",
    "slugAsParams": "bento-grid-with-skeletons",
    "description": "A six-card bento grid where each card contains an animated skeleton illustration. Features chat messages, video call grids, mentorship marquees, and floating avatars.",
    "category": "bento-grids",
    "categoryLabel": "Bento Grids",
    "difficulty": "intermediate",
    "keywords": [
      "bento grid skeleton",
      "animated feature cards",
      "react bento layout",
      "framer motion grid",
      "feature section animation",
      "skeleton loading cards",
      "next.js bento grid",
      "chat message animation",
      "marquee card grid",
      "interactive feature grid"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/bento-grids/bento-grid-with-skeletons"
  },
  {
    "title": "Features Bento Grid With Skeletons",
    "slug": "/blocks/feature-sections/bento-grid",
    "slugAsParams": "bento-grid",
    "description": "A four-panel bento grid layout with animated skeleton illustrations including a video embed, image gallery, and 3D globe visualization using Cobe.",
    "category": "feature-sections",
    "categoryLabel": "Feature Sections",
    "difficulty": "advanced",
    "keywords": [
      "bento grid features",
      "skeleton illustrations",
      "cobe globe react",
      "animated feature section",
      "youtube embed card",
      "image gallery animation",
      "framer motion features",
      "asymmetric feature grid",
      "interactive features display",
      "3D globe component"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/feature-sections/bento-grid"
  },
  {
    "title": "Blog Content Centered",
    "slug": "/blocks/blog-content-sections/blog-content-centered",
    "slugAsParams": "blog-content-centered",
    "description": "A centered single-column blog post layout with a large hero image, author byline, and Markdown content rendered through react-markdown.",
    "category": "blog-content-sections",
    "categoryLabel": "Blog Content Sections",
    "difficulty": "beginner",
    "keywords": [
      "blog post layout",
      "centered content layout",
      "markdown blog react",
      "react-markdown component",
      "blog article template",
      "next.js blog post",
      "prose typography",
      "author byline",
      "single column blog",
      "content marketing layout"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/blog-content-sections/blog-content-centered"
  },
  {
    "title": "Blog Content With TOC",
    "slug": "/blocks/blog-content-sections/blog-content-with-toc",
    "slugAsParams": "blog-content-with-toc",
    "description": "A two-column blog layout with a sticky table of contents sidebar. The TOC includes hover animations and collapses into a floating button on mobile.",
    "category": "blog-content-sections",
    "categoryLabel": "Blog Content Sections",
    "difficulty": "intermediate",
    "keywords": [
      "table of contents blog",
      "sticky sidebar TOC",
      "blog navigation menu",
      "scroll spy blog",
      "two column blog layout",
      "next.js blog sidebar",
      "framer motion TOC",
      "responsive blog layout",
      "documentation layout",
      "article navigation"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/blog-content-sections/blog-content-with-toc"
  },
  {
    "title": "Blog With Search",
    "slug": "/blocks/blog-sections/blog-with-search",
    "slugAsParams": "blog-with-search",
    "description": "A blog listing page with fuzzy search filtering. Features a large featured post card and a filterable list of additional posts below.",
    "category": "blog-sections",
    "categoryLabel": "Blog Sections",
    "difficulty": "intermediate",
    "keywords": [
      "blog search filter",
      "fuzzy search blog",
      "featured post layout",
      "searchable blog list",
      "next.js blog search",
      "react blog filter",
      "resource bank layout",
      "filterable articles",
      "blog listing search",
      "content search component"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/blog-sections/blog-with-search"
  },
  {
    "title": "Centered Around Testimonials",
    "slug": "/blocks/hero-sections/centered-around-testimonials",
    "slugAsParams": "centered-around-testimonials",
    "description": "A unique hero section that places a customer testimonial front and center alongside your headline. Combines social proof with your value proposition for maximum trust and conversion. Perfect for established products, B2B SaaS, and service-based businesses.",
    "category": "hero-sections",
    "categoryLabel": "Hero Sections",
    "difficulty": "beginner",
    "keywords": [
      "hero section with testimonial",
      "social proof hero",
      "testimonial hero component",
      "react hero with reviews",
      "next.js testimonial hero",
      "trust-building hero section",
      "B2B hero with social proof",
      "SaaS hero testimonial",
      "centered testimonial hero",
      "customer review hero section",
      "landing page social proof hero",
      "conversion-focused hero"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/hero-sections/centered-around-testimonials"
  },
  {
    "title": "Centered Footer With Logo",
    "slug": "/blocks/footers/centered-with-logo",
    "slugAsParams": "centered-with-logo",
    "description": "A minimal footer with centered logo, horizontal navigation links, and social media icons. A horizontal grid line divides navigation from the copyright section.",
    "category": "footers",
    "categoryLabel": "Footers",
    "difficulty": "beginner",
    "keywords": [
      "centered footer",
      "minimal footer",
      "logo footer",
      "horizontal nav footer",
      "social icons footer",
      "next.js footer",
      "simple footer layout",
      "footer with grid line",
      "compact footer",
      "one-row footer links"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/footers/centered-with-logo"
  },
  {
    "title": "Chat Conversation",
    "slug": "/blocks/illustrations/chat-conversation",
    "slugAsParams": "chat-conversation",
    "description": "An animated chat interface with message bubbles and avatars. Messages appear sequentially with staggered animations when the component comes into view.",
    "category": "illustrations",
    "categoryLabel": "Illustrations",
    "difficulty": "beginner",
    "keywords": [
      "chat animation",
      "message bubbles",
      "conversation UI",
      "animated messages",
      "chat interface",
      "messaging illustration",
      "avatar animation",
      "motion chat",
      "real-time messaging",
      "chat component"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/illustrations/chat-conversation"
  },
  {
    "title": "Collaborative Cursors",
    "slug": "/blocks/illustrations/collaborative-cursors",
    "slugAsParams": "collaborative-cursors",
    "description": "Animated multiplayer cursors with name tags drawing selection boxes over a code file. Simulates real-time collaboration with staggered cursor movements.",
    "category": "illustrations",
    "categoryLabel": "Illustrations",
    "difficulty": "intermediate",
    "keywords": [
      "multiplayer cursors",
      "collaboration animation",
      "cursor pointers",
      "selection box",
      "real-time editing",
      "team collaboration",
      "code editor",
      "live cursors",
      "collaborative editing",
      "presence indicators"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/illustrations/collaborative-cursors"
  },
  {
    "title": "Collapsible Sidebar",
    "slug": "/blocks/sidebars/collapsible-sidebar",
    "slugAsParams": "collapsible-sidebar",
    "description": "A sidebar with a toggle button to expand and collapse. Maintains state between interactions and includes a smooth width transition.",
    "category": "sidebars",
    "categoryLabel": "Sidebars",
    "difficulty": "intermediate",
    "keywords": [
      "collapsible sidebar react",
      "toggle sidebar",
      "expand collapse nav",
      "dashboard navigation",
      "persistent sidebar state",
      "next.js sidebar",
      "framer motion sidebar",
      "sidebar with button",
      "icon only sidebar",
      "width animation sidebar"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/sidebars/collapsible-sidebar"
  },
  {
    "title": "Contact Form Grid With Details",
    "slug": "/blocks/contact-sections/contact-form-grid-with-details",
    "slugAsParams": "contact-form-grid-with-details",
    "description": "A two-column contact section with a 3D tilted world map on the left and a full contact form on the right. Includes animated location pins and a subtle grid background.",
    "category": "contact-sections",
    "categoryLabel": "Contact Sections",
    "difficulty": "intermediate",
    "keywords": [
      "contact form grid",
      "world map contact",
      "3D perspective map",
      "two column contact",
      "animated pin marker",
      "next.js contact form",
      "react contact section",
      "location map contact",
      "business contact page",
      "enterprise contact form"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/contact-sections/contact-form-grid-with-details"
  },
  {
    "title": "Contact Section With Shader",
    "slug": "/blocks/contact-sections/contact-section-with-shader",
    "slugAsParams": "contact-section-with-shader",
    "description": "A two-column contact section with an animated WebGL shader background and rotating testimonial cards. The shader features flowing gradients with customizable colors.",
    "category": "contact-sections",
    "categoryLabel": "Contact Sections",
    "difficulty": "intermediate",
    "keywords": [
      "contact form shader",
      "animated contact section",
      "webgl contact form",
      "gradient background contact",
      "testimonials contact",
      "rotating testimonials",
      "mesh gradient contact",
      "two column contact",
      "modern contact form",
      "shader background react"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/contact-sections/contact-section-with-shader"
  },
  {
    "title": "Content Card",
    "slug": "/blocks/cards/content-card",
    "slugAsParams": "content-card",
    "description": "A blog-style card with author avatar, name, read time, and content overlaid on a background image. The overlay darkens on hover.",
    "category": "cards",
    "categoryLabel": "Cards",
    "difficulty": "beginner",
    "keywords": [
      "author card react",
      "blog post card",
      "avatar card component",
      "content overlay card",
      "hover darken card",
      "next.js blog card",
      "article card design",
      "read time card",
      "writer profile card",
      "media card layout"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/cards/content-card"
  },
  {
    "title": "CTA With Background Noise",
    "slug": "/blocks/cta-sections/cta-with-background-noise",
    "slugAsParams": "cta-with-background-noise",
    "description": "A dark two-column CTA section with noise texture overlay, gradient border lines, and product images. Ideal for high-contrast conversion sections.",
    "category": "cta-sections",
    "categoryLabel": "CTA Sections",
    "difficulty": "beginner",
    "keywords": [
      "dark CTA section",
      "noise texture CTA",
      "gradient border CTA",
      "product images CTA",
      "waitlist section",
      "next.js dark CTA",
      "react noise background",
      "two column CTA",
      "high contrast CTA",
      "startup CTA section"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/cta-sections/cta-with-background-noise"
  },
  {
    "title": "CTA With Dashed Grid Lines",
    "slug": "/blocks/cta-sections/cta-with-dashed-grid-lines",
    "slugAsParams": "cta-with-dashed-grid-lines",
    "description": "A three-column CTA layout with dashed border lines extending beyond the container edges. Includes a testimonial quote in the right column.",
    "category": "cta-sections",
    "categoryLabel": "CTA Sections",
    "difficulty": "intermediate",
    "keywords": [
      "dashed border CTA",
      "grid lines CTA",
      "testimonial CTA section",
      "CSS mask lines",
      "three column CTA",
      "next.js CTA layout",
      "react dashed border",
      "creative CTA design",
      "minimal CTA section",
      "enterprise CTA"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/cta-sections/cta-with-dashed-grid-lines"
  },
  {
    "title": "Dot Distortion Shader",
    "slug": "/blocks/shaders/dot-distortion-shader",
    "slugAsParams": "dot-distortion-shader",
    "description": "An interactive canvas shader with a grid of dots that distort when the mouse passes over. Dots have breathing animations and random glow pulses.",
    "category": "shaders",
    "categoryLabel": "Shaders",
    "difficulty": "advanced",
    "keywords": [
      "dot grid shader",
      "mouse distortion canvas",
      "interactive background",
      "breathing dots animation",
      "glow effect shader",
      "next.js canvas shader",
      "particle distortion",
      "mouse follow effect",
      "animated dot grid",
      "reactive background"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/shaders/dot-distortion-shader"
  },
  {
    "title": "Expandable Card On Click",
    "slug": "/blocks/cards/expandable-card-on-click",
    "slugAsParams": "expandable-card-on-click",
    "description": "A grid of cards that expand into a modal overlay when clicked. Uses Framer Motion's layoutId for smooth shared element transitions.",
    "category": "cards",
    "categoryLabel": "Cards",
    "difficulty": "intermediate",
    "keywords": [
      "expandable card react",
      "shared element transition",
      "modal card animation",
      "framer motion layoutId",
      "click to expand card",
      "product card modal",
      "next.js card expansion",
      "animated modal card",
      "gallery card overlay",
      "detail view animation"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/cards/expandable-card-on-click"
  },
  {
    "title": "FAQs With Grid",
    "slug": "/blocks/faqs/faqs-with-grid",
    "slugAsParams": "faqs-with-grid",
    "description": "A three-column masonry-style FAQ layout where questions and answers display as static cards. No accordion interaction, all content visible at once.",
    "category": "faqs",
    "categoryLabel": "FAQs",
    "difficulty": "beginner",
    "keywords": [
      "FAQ grid layout",
      "masonry FAQ",
      "static FAQ cards",
      "three column FAQ",
      "no accordion FAQ",
      "next.js FAQ grid",
      "knowledge base grid",
      "help documentation",
      "all questions visible",
      "FAQ card layout"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/faqs/faqs-with-grid"
  },
  {
    "title": "Feature Block Animated Card",
    "slug": "/blocks/cards/feature-block-animated-card",
    "slugAsParams": "feature-block-animated-card",
    "description": "A card showcasing AI/ML tool logos with staggered bounce animations. Includes a glowing beam with sparkle particles that animates vertically.",
    "category": "cards",
    "categoryLabel": "Cards",
    "difficulty": "intermediate",
    "keywords": [
      "AI tools card",
      "animated logo card",
      "sparkle animation react",
      "staggered animation card",
      "feature card animation",
      "framer motion sequence",
      "glowing beam effect",
      "tech stack card",
      "next.js animated card",
      "integration showcase card"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/cards/feature-block-animated-card"
  },
  {
    "title": "Feature Section Bento Skeletons",
    "slug": "/blocks/feature-sections/feature-section-bento-skeletons",
    "slugAsParams": "feature-section-bento-skeletons",
    "description": "A bento grid feature section with 4 animated skeleton cards showcasing messaging, file sharing, team collaboration, and testimonials.",
    "category": "feature-sections",
    "categoryLabel": "Feature Sections",
    "difficulty": "intermediate",
    "keywords": [
      "bento grid",
      "features section",
      "skeleton loader",
      "animated features",
      "feature cards",
      "messaging skeleton",
      "file transfer animation",
      "team collaboration",
      "testimonials",
      "motion animations",
      "react features section"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/feature-sections/feature-section-bento-skeletons"
  },
  {
    "title": "Features Grid With Large Skeletons",
    "slug": "/blocks/feature-sections/features-grid-with-large-skeletons",
    "slugAsParams": "features-grid-with-large-skeletons",
    "description": "A three-column feature grid with tall cards displaying animated skeleton illustrations. Each card shows a workflow or status visualization with 3D perspective effects.",
    "category": "feature-sections",
    "categoryLabel": "Feature Sections",
    "difficulty": "advanced",
    "keywords": [
      "large skeleton cards",
      "3D perspective cards",
      "workflow visualization",
      "status indicators",
      "animated feature cards",
      "next.js features grid",
      "skeleton loading animation",
      "agent workflow cards",
      "approval flow visualization",
      "dotted glow background"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/feature-sections/features-grid-with-large-skeletons"
  },
  {
    "title": "Features Section With Skeletons",
    "slug": "/blocks/feature-sections/features-section-with-skeletons",
    "slugAsParams": "features-section-with-skeletons",
    "description": "A features section with animated skeleton loaders that bring each card to life. Each card shows a different feature with a unique skeleton animation.",
    "category": "feature-sections",
    "categoryLabel": "Feature Sections",
    "difficulty": "intermediate",
    "keywords": [
      "features section",
      "skeleton loader",
      "animated features",
      "feature cards",
      "bento grid",
      "messaging skeleton",
      "file transfer animation",
      "team collaboration",
      "motion animations",
      "react features section"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/feature-sections/features-section-with-skeletons"
  },
  {
    "title": "Features With Isometric Blocks",
    "slug": "/blocks/feature-sections/features-with-isometric-blocks",
    "slugAsParams": "features-with-isometric-blocks",
    "description": "Feature cards with animated isometric box illustrations. Each card showcases a different animation direction on hover - left, right, or top face movement.",
    "category": "feature-sections",
    "categoryLabel": "Feature Sections",
    "difficulty": "beginner",
    "keywords": [
      "isometric",
      "features",
      "cards",
      "3d",
      "illustration",
      "hover effect",
      "animation",
      "geometric",
      "motion animation",
      "svg",
      "blocks"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/feature-sections/features-with-isometric-blocks"
  },
  {
    "title": "Features With Sticky Scroll",
    "slug": "/blocks/feature-sections/features-with-sticky-scroll",
    "slugAsParams": "features-with-sticky-scroll",
    "description": "A scroll-driven feature section where content sticks to the viewport. The background color transitions between features as users scroll.",
    "category": "feature-sections",
    "categoryLabel": "Feature Sections",
    "difficulty": "advanced",
    "keywords": [
      "sticky scroll features",
      "scroll animation react",
      "framer motion scroll",
      "background color transition",
      "scroll-driven feature section",
      "next.js sticky content",
      "scroll progress animation",
      "feature reveal on scroll",
      "split layout scroll",
      "scroll-based storytelling"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/feature-sections/features-with-sticky-scroll"
  },
  {
    "title": "Flipping Images With Bar",
    "slug": "/blocks/illustrations/flipping-images-with-bar",
    "slugAsParams": "flipping-images-with-bar",
    "description": "An animated image carousel that reveals colors with a scanning bar effect. Images start grayscale and transition to full color as a glowing bar sweeps across with trailing sparkles.",
    "category": "illustrations",
    "categoryLabel": "Illustrations",
    "difficulty": "intermediate",
    "keywords": [
      "image carousel",
      "scanning bar animation",
      "grayscale to color",
      "sparkle effect",
      "framer motion images",
      "blur transition",
      "color reveal animation",
      "next.js image carousel",
      "react image animation",
      "glowing bar effect"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/illustrations/flipping-images-with-bar"
  },
  {
    "title": "Folder With Files",
    "slug": "/blocks/illustrations/folder-with-files",
    "slugAsParams": "folder-with-files",
    "description": "An interactive folder illustration with files that fan out on hover. Includes animated pulse beams and a server component for file transfer visualization.",
    "category": "illustrations",
    "categoryLabel": "Illustrations",
    "difficulty": "intermediate",
    "keywords": [
      "folder animation",
      "file transfer",
      "hover effect",
      "3D folder",
      "file illustration",
      "server animation",
      "pulse beams",
      "interactive folder",
      "file sharing",
      "upload animation"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/illustrations/folder-with-files"
  },
  {
    "title": "Frequently Asked Questions Accordion",
    "slug": "/blocks/faqs/frequently-asked-questions-with-accordion",
    "slugAsParams": "frequently-asked-questions-with-accordion",
    "description": "A two-column FAQ layout with an animated accordion on the right. Plus/minus icons rotate and scale with CSS transitions when items expand or collapse.",
    "category": "faqs",
    "categoryLabel": "FAQs",
    "difficulty": "intermediate",
    "keywords": [
      "FAQ accordion react",
      "animated accordion",
      "expand collapse FAQ",
      "two column FAQ",
      "framer motion accordion",
      "next.js FAQ section",
      "plus minus toggle",
      "support page FAQ",
      "help center accordion",
      "collapsible FAQ list"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/faqs/frequently-asked-questions-with-accordion"
  },
  {
    "title": "Full Background Image With Text",
    "slug": "/blocks/hero-sections/full-background-image-with-text",
    "slugAsParams": "full-background-image-with-text",
    "description": "An immersive hero section with a full-bleed background image and overlaid text content. Creates a cinematic, high-impact first impression. Ideal for creative agencies, portfolio websites, event pages, and brands that want to lead with striking photography.",
    "category": "hero-sections",
    "categoryLabel": "Hero Sections",
    "difficulty": "beginner",
    "keywords": [
      "full background image hero",
      "hero with background image",
      "immersive hero section",
      "react full bleed hero",
      "next.js background image hero",
      "cinematic hero component",
      "overlay text hero section",
      "photography hero",
      "tailwind background image hero",
      "creative agency hero section",
      "portfolio hero background image",
      "event landing page hero"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/hero-sections/full-background-image-with-text"
  },
  {
    "title": "Hero Section With Beams and Grid",
    "slug": "/blocks/hero-sections/hero-section-with-beams-and-grid",
    "slugAsParams": "hero-section-with-beams-and-grid",
    "description": "A mesmerizing hero section featuring animated light beams and a subtle grid pattern background. Creates an ethereal, high-tech atmosphere perfect for AI products, developer tools, and technology companies that want to convey innovation and sophistication.",
    "category": "hero-sections",
    "categoryLabel": "Hero Sections",
    "difficulty": "intermediate",
    "keywords": [
      "hero section with beams",
      "grid background hero",
      "animated beams hero section",
      "react hero with light beams",
      "next.js animated hero",
      "tech hero section",
      "AI product hero",
      "developer tool hero section",
      "tailwind grid hero",
      "light beams animation",
      "high-tech hero component",
      "futuristic hero section"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/hero-sections/hero-section-with-beams-and-grid"
  },
  {
    "title": "Hero Section With Flickering Lights",
    "slug": "/blocks/hero-sections/hero-section-with-flickering-lights",
    "slugAsParams": "hero-section-with-flickering-lights",
    "description": "A cinematic hero section with animated flickering light bulbs on a steel grid. The bulbs power up one by one with realistic flicker effects, occasionally fusing and coming back to life. Perfect for industrial, tech, or creative brands wanting a dramatic, high-impact introduction.",
    "category": "hero-sections",
    "categoryLabel": "Hero Sections",
    "difficulty": "intermediate",
    "keywords": [
      "hero section with flickering lights",
      "animated light bulbs hero",
      "industrial hero section",
      "react flickering lights",
      "next.js animated hero",
      "steel grid hero section",
      "dramatic hero component",
      "cinematic hero section",
      "tailwind hero animation",
      "light bulb animation",
      "fusing lights effect",
      "spark animation hero"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/hero-sections/hero-section-with-flickering-lights"
  },
  {
    "title": "Hero Section With Images Grid and Navbar",
    "slug": "/blocks/hero-sections/hero-section-with-images-grid-and-navbar",
    "slugAsParams": "hero-section-with-images-grid-and-navbar",
    "description": "A complete hero section featuring an integrated navigation bar and a dynamic images grid with marquee animation. Combines a full navigation experience with a visually rich image gallery. Ideal for creative portfolios, e-commerce storefronts, and media-rich landing pages.",
    "category": "hero-sections",
    "categoryLabel": "Hero Sections",
    "difficulty": "intermediate",
    "keywords": [
      "hero section with navbar",
      "hero with image grid",
      "react hero with navigation",
      "next.js hero images grid",
      "marquee images hero",
      "hero section with gallery",
      "navbar hero component",
      "tailwind hero with navigation",
      "image grid hero section",
      "portfolio hero section",
      "e-commerce hero with images",
      "creative hero section"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/hero-sections/hero-section-with-images-grid-and-navbar"
  },
  {
    "title": "Hero Section With Infinite Scroll Cards",
    "slug": "/blocks/hero-sections/hero-section-with-infinite-scroll-cards",
    "slugAsParams": "hero-section-with-infinite-scroll-cards",
    "description": "A dynamic hero section featuring infinitely scrolling card elements that create continuous visual movement. The auto-scrolling cards showcase content, features, or testimonials in a flowing stream. Perfect for social platforms, marketplaces, content-heavy products, and any site that wants to convey abundance and activity.",
    "category": "hero-sections",
    "categoryLabel": "Hero Sections",
    "difficulty": "intermediate",
    "keywords": [
      "infinite scroll hero",
      "scrolling cards hero section",
      "auto scroll hero component",
      "react infinite scroll hero",
      "next.js scrolling cards",
      "card carousel hero",
      "marketplace hero section",
      "social platform hero",
      "content stream hero",
      "tailwind infinite scroll",
      "auto scrolling cards",
      "dynamic hero with cards"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/hero-sections/hero-section-with-infinite-scroll-cards"
  },
  {
    "title": "Hero Section With Mesh Gradient",
    "slug": "/blocks/hero-sections/hero-section-with-mesh-gradient",
    "slugAsParams": "hero-section-with-mesh-gradient",
    "description": "A modern hero section featuring a vibrant mesh gradient background with smooth color transitions. Includes centered content with headline, description, and call-to-action buttons.",
    "category": "hero-sections",
    "categoryLabel": "Hero Sections",
    "difficulty": "beginner",
    "keywords": [
      "mesh gradient hero",
      "gradient background hero",
      "colorful hero section",
      "modern hero design",
      "CSS gradient hero",
      "next.js hero section",
      "vibrant landing page",
      "gradient mesh background",
      "creative hero section",
      "animated gradient hero"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/hero-sections/hero-section-with-mesh-gradient"
  },
  {
    "title": "Hero Section With Multi Color Background",
    "slug": "/blocks/hero-sections/hero-section-with-multi-color-background",
    "slugAsParams": "hero-section-with-multi-color-background",
    "description": "A vibrant hero section featuring a multi-color animated background that shifts between color palettes. The dynamic color transitions create a lively, attention-grabbing atmosphere. Perfect for creative products, design tools, marketing agencies, and brands that want to convey energy and creativity.",
    "category": "hero-sections",
    "categoryLabel": "Hero Sections",
    "difficulty": "intermediate",
    "keywords": [
      "multi color hero section",
      "colorful background hero",
      "animated color hero",
      "react colorful hero",
      "next.js multi color hero",
      "dynamic background hero section",
      "color shifting hero",
      "vibrant hero component",
      "creative hero section",
      "rainbow hero background",
      "tailwind animated colors hero",
      "marketing hero section"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/hero-sections/hero-section-with-multi-color-background"
  },
  {
    "title": "Hero Section With Noise Background",
    "slug": "/blocks/hero-sections/hero-section-with-noise-background",
    "slugAsParams": "hero-section-with-noise-background",
    "description": "A textured hero section with a subtle noise overlay that adds depth and a tactile quality to your landing page. The grain texture creates a premium, editorial feel. Perfect for design agencies, creative studios, premium brands, and any website that values aesthetic refinement.",
    "category": "hero-sections",
    "categoryLabel": "Hero Sections",
    "difficulty": "intermediate",
    "keywords": [
      "noise background hero",
      "grain texture hero section",
      "textured hero component",
      "react noise background hero",
      "next.js grain hero",
      "premium hero section",
      "editorial hero design",
      "design agency hero",
      "creative studio hero section",
      "tailwind noise background",
      "subtle texture hero",
      "luxury brand hero section"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/hero-sections/hero-section-with-noise-background"
  },
  {
    "title": "Hero Section With Tabs",
    "slug": "/blocks/hero-sections/hero-section-with-tabs",
    "slugAsParams": "hero-section-with-tabs",
    "description": "A modern hero section featuring an interactive tabbed browser window preview. Tabs auto-rotate through different content sections with smooth animations, showcasing multiple features or pages in a single component. Perfect for SaaS, portfolios, and product showcases.",
    "category": "hero-sections",
    "categoryLabel": "Hero Sections",
    "difficulty": "intermediate",
    "keywords": [
      "hero section with tabs",
      "tabbed hero section",
      "interactive hero component",
      "react tabs hero",
      "next.js tabbed preview",
      "browser window hero",
      "auto-rotating tabs",
      "saas hero section",
      "portfolio hero",
      "tailwind tabs animation",
      "product showcase hero",
      "feature preview tabs"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/hero-sections/hero-section-with-tabs"
  },
  {
    "title": "Hero With Background And Navbar",
    "slug": "/blocks/hero-sections/hero-with-background-and-navbar",
    "slugAsParams": "hero-with-background-and-navbar",
    "description": "A sleek hero section with an animated background effect and an integrated navigation bar. The combined layout creates a seamless visual experience from the very first viewport. Ideal for SaaS platforms, tech startups, and product websites that need both navigation and visual impact in one cohesive block.",
    "category": "hero-sections",
    "categoryLabel": "Hero Sections",
    "difficulty": "intermediate",
    "keywords": [
      "hero with navbar",
      "hero section with navigation",
      "react hero navbar component",
      "next.js hero with nav",
      "animated background hero navbar",
      "seamless hero navigation",
      "SaaS hero with navbar",
      "tech startup hero section",
      "integrated navbar hero",
      "tailwind hero with navigation",
      "full hero section with menu",
      "one-piece hero and navigation"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/hero-sections/hero-with-background-and-navbar"
  },
  {
    "title": "Hero With Centered Image",
    "slug": "/blocks/hero-sections/hero-with-centered-image",
    "slugAsParams": "hero-with-centered-image",
    "description": "A stunning hero section with a large centered product image, bold headline, and dual call-to-action buttons. Perfect for SaaS landing pages, product launches, and startup websites that need a visual-first approach to capture attention above the fold.",
    "category": "hero-sections",
    "categoryLabel": "Hero Sections",
    "difficulty": "beginner",
    "keywords": [
      "hero section with image",
      "centered image hero",
      "react hero component",
      "next.js hero section",
      "product hero section",
      "SaaS landing page hero",
      "hero with CTA buttons",
      "tailwind hero section",
      "framer motion hero",
      "landing page above the fold",
      "hero component with product screenshot",
      "startup hero section"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/hero-sections/hero-with-centered-image"
  },
  {
    "title": "Hero With Image and Scales",
    "slug": "/blocks/hero-sections/hero-with-image-and-scales",
    "slugAsParams": "hero-with-image-and-scales",
    "description": "A modern hero section with a product image that reveals animated scales on mouse hover. The interactive reveal effect creates curiosity and engagement. Built with Tailwind blue-500 color palette. Perfect for tech products, SaaS dashboards, and developer tools that want to showcase depth behind the interface.",
    "category": "hero-sections",
    "categoryLabel": "Hero Sections",
    "difficulty": "intermediate",
    "keywords": [
      "hero with hover effect",
      "interactive hero section",
      "image reveal hero",
      "react interactive hero",
      "next.js hover hero section",
      "mouse interaction hero",
      "product image hero with scales",
      "tech hero section",
      "SaaS hero with animation",
      "developer tool hero",
      "tailwind blue hero section",
      "hero with mouse effect"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/hero-sections/hero-with-image-and-scales"
  },
  {
    "title": "Footer With Grid",
    "slug": "/blocks/footers/huge-footer-with-grid",
    "slugAsParams": "huge-footer-with-grid",
    "description": "A comprehensive footer with logo section, four-column link grid, newsletter signup, and social icons. Built for sites with extensive navigation needs.",
    "category": "footers",
    "categoryLabel": "Footers",
    "difficulty": "intermediate",
    "keywords": [
      "large footer grid",
      "comprehensive footer",
      "newsletter signup footer",
      "multi-section footer",
      "extensive nav footer",
      "next.js footer",
      "footer with description",
      "category link columns",
      "social icons footer",
      "SaaS mega footer"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/footers/huge-footer-with-grid"
  },
  {
    "title": "Isometric Box",
    "slug": "/blocks/illustrations/isometric-box",
    "slugAsParams": "isometric-box",
    "description": "A minimal isometric box illustration with smooth hover animations. Features rounded corners on the top face and subtle dashed vertical lines for depth.",
    "category": "illustrations",
    "categoryLabel": "Illustrations",
    "difficulty": "beginner",
    "keywords": [
      "isometric",
      "box",
      "3d",
      "illustration",
      "hover effect",
      "minimal",
      "geometric",
      "motion animation",
      "svg",
      "cube"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/illustrations/isometric-box"
  },
  {
    "title": "Lines Gradient Shader",
    "slug": "/blocks/shaders/lines-gradient-shader",
    "slugAsParams": "lines-gradient-shader",
    "description": "A canvas-based animated shader background with flowing gradient bands. Renders smooth wave-like lines with customizable colors, speed, and density.",
    "category": "shaders",
    "categoryLabel": "Shaders",
    "difficulty": "advanced",
    "keywords": [
      "canvas shader react",
      "gradient lines animation",
      "wave shader background",
      "animated hero background",
      "flowing lines shader",
      "next.js shader",
      "requestAnimationFrame canvas",
      "gradient band animation",
      "smooth wave background",
      "WebGL-style shader"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/shaders/lines-gradient-shader"
  },
  {
    "title": "Login Form With Gradient",
    "slug": "/blocks/login-and-signup-sections/login-form-with-gradient",
    "slugAsParams": "login-form-with-gradient",
    "description": "A two-column login page with form fields on the left and an animated gradient illustration on the right. Includes social login buttons and custom input styling.",
    "category": "login-and-signup-sections",
    "categoryLabel": "Login and Signup Sections",
    "difficulty": "intermediate",
    "keywords": [
      "login form react",
      "gradient login page",
      "two column login",
      "social login buttons",
      "google apple facebook login",
      "next.js auth form",
      "animated login illustration",
      "radix label input",
      "authentication page",
      "sign in form component"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/login-and-signup-sections/login-form-with-gradient"
  },
  {
    "title": "Login Signup Minimal",
    "slug": "/blocks/login-and-signup-sections/login-signup-minimal",
    "slugAsParams": "login-signup-minimal",
    "description": "A clean and minimal login form with email and password fields, Google and Apple social login buttons, and a dashed divider. Features subtle input styling with ring borders and full dark mode support.",
    "category": "login-and-signup-sections",
    "categoryLabel": "Login and Signup Sections",
    "difficulty": "beginner",
    "keywords": [
      "minimal login form",
      "google apple login",
      "social authentication",
      "clean login page",
      "simple signin form",
      "next.js auth form",
      "tailwind login",
      "dark mode login",
      "dashed divider",
      "ring border inputs"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/login-and-signup-sections/login-signup-minimal"
  },
  {
    "title": "Login With Socials And Email",
    "slug": "/blocks/login-and-signup-sections/login-with-socials-and-email",
    "slugAsParams": "login-with-socials-and-email",
    "description": "A centered login form with GitHub and Google buttons at top, and an animated email input that reveals on click. Features corner-expanding hover effects on the submit button.",
    "category": "login-and-signup-sections",
    "categoryLabel": "Login and Signup Sections",
    "difficulty": "intermediate",
    "keywords": [
      "centered login form",
      "social login github google",
      "animated input reveal",
      "progressive disclosure login",
      "corner hover animation",
      "next.js login form",
      "ambient color background",
      "framer motion login",
      "minimal auth page",
      "expandable email input"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/login-and-signup-sections/login-with-socials-and-email"
  },
  {
    "title": "Logo Cloud Marquee",
    "slug": "/blocks/logo-clouds/logo-cloud-marquee",
    "slugAsParams": "logo-cloud-marquee",
    "description": "A dual-row marquee logo cloud with opposite scroll directions. Uses react-fast-marquee with pause-on-hover and edge fade masks.",
    "category": "logo-clouds",
    "categoryLabel": "Logo Clouds",
    "difficulty": "beginner",
    "keywords": [
      "logo marquee react",
      "infinite logo scroll",
      "dual row marquee",
      "react-fast-marquee",
      "pause on hover logos",
      "edge fade logo cloud",
      "continuous logo animation",
      "next.js logo marquee",
      "horizontal scroll logos",
      "trusted brands marquee"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/logo-clouds/logo-cloud-marquee"
  },
  {
    "title": "Logo Cloud With Blur Animation",
    "slug": "/blocks/logo-clouds/logo-cloud-with-blur-animation",
    "slugAsParams": "logo-cloud-with-blur-animation",
    "description": "A logo grid with scroll-triggered entrance animations. Logos fade in from above with blur that clears as they enter the viewport.",
    "category": "logo-clouds",
    "categoryLabel": "Logo Clouds",
    "difficulty": "beginner",
    "keywords": [
      "scroll triggered logos",
      "blur entrance animation",
      "whileInView animation",
      "staggered logo reveal",
      "framer motion logos",
      "next.js logo section",
      "viewport animation",
      "responsive logo grid",
      "trusted operators section",
      "fade in logo cloud"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/logo-clouds/logo-cloud-with-blur-animation"
  },
  {
    "title": "Logos With Blur Flip",
    "slug": "/blocks/logo-clouds/logos-with-blur-flip",
    "slugAsParams": "logos-with-blur-flip",
    "description": "An auto-rotating logo cloud where logos flip in with blur and fade animations. Logos cycle through sets on a 3-second interval.",
    "category": "logo-clouds",
    "categoryLabel": "Logo Clouds",
    "difficulty": "intermediate",
    "keywords": [
      "animated logo cloud",
      "blur flip animation",
      "auto rotating logos",
      "framer motion logo",
      "logo carousel react",
      "next.js logo cloud",
      "staggered logo animation",
      "trusted by section",
      "partner logos display",
      "logo set cycling"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/logo-clouds/logos-with-blur-flip"
  },
  {
    "title": "Masonry Bento Grid With Images",
    "slug": "/blocks/bento-grids/masonry-bento-grid-with-images",
    "slugAsParams": "masonry-bento-grid-with-images",
    "description": "A four-column masonry layout of linked image cards with hover overlays. Each card reveals the link URL on hover with a dark overlay transition.",
    "category": "bento-grids",
    "categoryLabel": "Bento Grids",
    "difficulty": "beginner",
    "keywords": [
      "masonry grid images",
      "linked image cards",
      "hover overlay grid",
      "portfolio masonry layout",
      "brand showcase grid",
      "next.js masonry grid",
      "image gallery hover",
      "CSS grid masonry",
      "client logo wall",
      "link card grid"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/bento-grids/masonry-bento-grid-with-images"
  },
  {
    "title": "Minimal Hero Section With Parallax Images",
    "slug": "/blocks/hero-sections/minimal-hero-section-with-parallax-images",
    "slugAsParams": "minimal-hero-section-with-parallax-images",
    "description": "A clean, minimal hero section where stacked images create a parallax depth effect on scroll. The layered image composition adds visual sophistication without overwhelming the content. Ideal for portfolios, creative agencies, and product websites that value elegant simplicity.",
    "category": "hero-sections",
    "categoryLabel": "Hero Sections",
    "difficulty": "intermediate",
    "keywords": [
      "parallax hero section",
      "minimal hero component",
      "stacked images hero",
      "react parallax hero",
      "next.js parallax images",
      "scroll animation hero",
      "layered images hero section",
      "clean hero section",
      "elegant hero component",
      "tailwind parallax hero",
      "image depth effect hero",
      "portfolio hero with parallax"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/hero-sections/minimal-hero-section-with-parallax-images"
  },
  {
    "title": "Modern Hero With Gradients",
    "slug": "/blocks/hero-sections/modern-hero-with-gradients",
    "slugAsParams": "modern-hero-with-gradients",
    "description": "A visually striking hero section featuring layered gradient backgrounds, bold typography, and animated elements. Designed for modern SaaS websites, AI products, and tech startups that want to make a bold first impression with vibrant colors and depth.",
    "category": "hero-sections",
    "categoryLabel": "Hero Sections",
    "difficulty": "intermediate",
    "keywords": [
      "gradient hero section",
      "modern hero component",
      "react gradient hero",
      "colorful hero section",
      "SaaS hero section gradient",
      "next.js hero with gradients",
      "tailwind gradient hero",
      "vibrant hero section",
      "tech startup hero",
      "AI product landing page hero",
      "hero with gradient background",
      "animated gradient hero"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/hero-sections/modern-hero-with-gradients"
  },
  {
    "title": "Navbar Classic",
    "slug": "/blocks/navbars/navbar-classic",
    "slugAsParams": "navbar-classic",
    "description": "A traditional header layout with logo, horizontal nav links, search input, and CTA button. Clean and familiar navigation pattern.",
    "category": "navbars",
    "categoryLabel": "Navbars",
    "difficulty": "beginner",
    "keywords": [
      "classic navbar react",
      "traditional header",
      "navbar with search",
      "horizontal nav links",
      "simple header layout",
      "next.js navigation",
      "framer motion nav",
      "responsive header",
      "navbar with cta",
      "standard nav pattern"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/navbars/navbar-classic"
  },
  {
    "title": "Navbar Mega",
    "slug": "/blocks/navbars/navbar-mega",
    "slugAsParams": "navbar-mega",
    "description": "A mega menu navbar with large dropdown panels containing categorized links. Products and Resources sections display in a two-column grid.",
    "category": "navbars",
    "categoryLabel": "Navbars",
    "difficulty": "advanced",
    "keywords": [
      "mega menu navbar",
      "large dropdown nav",
      "categorized menu",
      "two column dropdown",
      "enterprise navigation",
      "next.js mega menu",
      "framer motion mega",
      "hover dropdown panel",
      "product categories nav",
      "resource links menu"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/navbars/navbar-mega"
  },
  {
    "title": "Navbar Pill",
    "slug": "/blocks/navbars/navbar-pill",
    "slugAsParams": "navbar-pill",
    "description": "A navigation bar with pill-style tabs that highlight the active link. The centered nav sits inside a rounded container with backdrop blur.",
    "category": "navbars",
    "categoryLabel": "Navbars",
    "difficulty": "beginner",
    "keywords": [
      "pill tabs navbar",
      "active state nav",
      "tab navigation",
      "backdrop blur nav",
      "segmented control nav",
      "next.js pill nav",
      "framer motion tabs",
      "centered nav links",
      "rounded nav container",
      "active link highlight"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/navbars/navbar-pill"
  },
  {
    "title": "Navbar Underline",
    "slug": "/blocks/navbars/navbar-underline",
    "slugAsParams": "navbar-underline",
    "description": "A navigation bar with underline indicators for active and hover states. A thin line appears below the selected link.",
    "category": "navbars",
    "categoryLabel": "Navbars",
    "difficulty": "beginner",
    "keywords": [
      "underline navbar",
      "active indicator nav",
      "border bottom nav",
      "minimal navigation",
      "tab underline style",
      "next.js header",
      "framer motion nav",
      "line indicator nav",
      "simple active state",
      "clean navbar design"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/navbars/navbar-underline"
  },
  {
    "title": "Navbar With Children",
    "slug": "/blocks/navbars/navbar-with-children",
    "slugAsParams": "navbar-with-children",
    "description": "A navbar with dropdown menus that reveal on hover. Dropdowns can contain links, product cards with images, or nested navigation.",
    "category": "navbars",
    "categoryLabel": "Navbars",
    "difficulty": "advanced",
    "keywords": [
      "navbar dropdown react",
      "hover dropdown menu",
      "mega menu navbar",
      "product cards dropdown",
      "nested nav items",
      "next.js dropdown nav",
      "framer motion dropdown",
      "responsive mega menu",
      "animated dropdown",
      "nav with submenus"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/navbars/navbar-with-children"
  },
  {
    "title": "Playful Hero Section",
    "slug": "/blocks/hero-sections/playful-hero-section",
    "slugAsParams": "playful-hero-section",
    "description": "A fun, energetic hero section with hand-drawn highlight annotations and bouncy animations. Uses react-rough-notation for sketch-style word underlining and circling. Perfect for creative agencies, educational platforms, personal brands, and startups that want to feel approachable and human.",
    "category": "hero-sections",
    "categoryLabel": "Hero Sections",
    "difficulty": "intermediate",
    "keywords": [
      "playful hero section",
      "hand-drawn hero component",
      "rough notation hero",
      "fun hero section react",
      "sketch style hero",
      "animated underline hero",
      "creative hero section",
      "friendly hero component",
      "react playful hero",
      "next.js fun hero section",
      "rough notation react",
      "approachable hero design"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/hero-sections/playful-hero-section"
  },
  {
    "title": "Pricing Minimal",
    "slug": "/blocks/pricing-sections/pricing-minimal",
    "slugAsParams": "pricing-minimal",
    "description": "A clean minimal pricing component with three tiers, dashed grid line accents on the featured card, and additional features section with divider.",
    "category": "pricing-sections",
    "categoryLabel": "Pricing Sections",
    "difficulty": "beginner",
    "keywords": [
      "minimal pricing",
      "three tier pricing",
      "grid lines pricing",
      "featured pricing card",
      "pricing with divider",
      "next.js pricing",
      "tailwind pricing",
      "saas pricing",
      "clean pricing layout",
      "modern pricing"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/pricing-sections/pricing-minimal"
  },
  {
    "title": "Pricing Page With Featured And Enterprise",
    "slug": "/blocks/pricing-sections/pricing-page-with-featured-and-enterprise",
    "slugAsParams": "pricing-page-with-featured-and-enterprise",
    "description": "A complete pricing page with three tiers plus a separate enterprise card. Features discounted pricing display and comprehensive feature lists.",
    "category": "pricing-sections",
    "categoryLabel": "Pricing Sections",
    "difficulty": "intermediate",
    "keywords": [
      "enterprise pricing card",
      "discount pricing display",
      "full pricing page",
      "strikethrough pricing",
      "contact sales card",
      "next.js pricing page",
      "featured pricing tier",
      "credit based pricing",
      "SaaS pricing layout",
      "four plan pricing"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/pricing-sections/pricing-page-with-featured-and-enterprise"
  },
  {
    "title": "Pricing With Switch And Add On",
    "slug": "/blocks/pricing-sections/pricing-with-switch-and-add-on",
    "slugAsParams": "pricing-with-switch-and-add-on",
    "description": "A pricing section with monthly/yearly toggle and add-on options. Features animated price changes and a three-tier layout with a featured plan.",
    "category": "pricing-sections",
    "categoryLabel": "Pricing Sections",
    "difficulty": "advanced",
    "keywords": [
      "pricing toggle react",
      "monthly yearly switch",
      "add-on pricing",
      "featured pricing tier",
      "animated price change",
      "next.js pricing page",
      "framer motion pricing",
      "billing toggle",
      "SaaS pricing section",
      "three tier pricing"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/pricing-sections/pricing-with-switch-and-add-on"
  },
  {
    "title": "Pricing With Switch",
    "slug": "/blocks/pricing-sections/pricing-with-switch",
    "slugAsParams": "pricing-with-switch",
    "description": "A four-tier pricing grid with an animated monthly/yearly toggle. Price values animate in with blur effects when switching billing periods.",
    "category": "pricing-sections",
    "categoryLabel": "Pricing Sections",
    "difficulty": "intermediate",
    "keywords": [
      "pricing toggle react",
      "four tier pricing",
      "billing period switch",
      "blur animation pricing",
      "gradient featured card",
      "next.js pricing grid",
      "framer motion pricing",
      "animated price display",
      "SaaS pricing comparison",
      "yearly monthly toggle"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/pricing-sections/pricing-with-switch"
  },
  {
    "title": "Registration Form With Images",
    "slug": "/blocks/login-and-signup-sections/registration-form-with-images",
    "slugAsParams": "registration-form-with-images",
    "description": "A split-screen registration page with form fields on the left and social proof testimonials on the right. Features overlapping user avatars and decorative grid lines.",
    "category": "login-and-signup-sections",
    "categoryLabel": "Login and Signup Sections",
    "difficulty": "intermediate",
    "keywords": [
      "registration form react",
      "signup with social proof",
      "split screen auth",
      "testimonial signup page",
      "user avatars registration",
      "next.js signup form",
      "full height login",
      "grid lines decoration",
      "social signup button",
      "create account form"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/login-and-signup-sections/registration-form-with-images"
  },
  {
    "title": "Rotating Tabs With Text",
    "slug": "/blocks/illustrations/rotating-tabs-with-text",
    "slugAsParams": "rotating-tabs-with-text",
    "description": "Stacked notification cards that rotate automatically every 3 seconds. Cards stack with depth effect and smooth spring animations using motion/react.",
    "category": "illustrations",
    "categoryLabel": "Illustrations",
    "difficulty": "intermediate",
    "keywords": [
      "rotating cards",
      "notification",
      "stacked cards",
      "auto rotate",
      "carousel",
      "tabs animation",
      "spring animation",
      "motion",
      "card stack",
      "live notification"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/illustrations/rotating-tabs-with-text"
  },
  {
    "title": "Simple Blog With Grid",
    "slug": "/blocks/blog-sections/simple-blog-with-grid",
    "slugAsParams": "simple-blog-with-grid",
    "description": "A blog listing page with a header section over a grid pattern background and a three-column card grid for posts. Cards scale on hover.",
    "category": "blog-sections",
    "categoryLabel": "Blog Sections",
    "difficulty": "beginner",
    "keywords": [
      "blog grid layout",
      "blog listing page",
      "three column blog grid",
      "blog cards react",
      "grid pattern background",
      "next.js blog index",
      "hover scale cards",
      "content marketing page",
      "resource library layout",
      "article grid"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/blog-sections/simple-blog-with-grid"
  },
  {
    "title": "Simple Centered Contact Form",
    "slug": "/blocks/contact-sections/simple-centered-contact-form",
    "slugAsParams": "simple-centered-contact-form",
    "description": "A compact centered contact form card with name, email, company, and message fields. Includes social media links at the bottom.",
    "category": "contact-sections",
    "categoryLabel": "Contact Sections",
    "difficulty": "beginner",
    "keywords": [
      "simple contact form",
      "centered contact card",
      "contact form react",
      "minimal contact section",
      "social links contact",
      "next.js contact page",
      "form card component",
      "business inquiry form",
      "startup contact form",
      "clean contact layout"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/contact-sections/simple-centered-contact-form"
  },
  {
    "title": "Simple CTA With Images",
    "slug": "/blocks/cta-sections/simple-cta-with-images",
    "slugAsParams": "simple-cta-with-images",
    "description": "A horizontal CTA section with overlapping user avatars, star ratings, and a call-to-action button. Avatars show tooltips on hover with spring-based animations.",
    "category": "cta-sections",
    "categoryLabel": "CTA Sections",
    "difficulty": "intermediate",
    "keywords": [
      "CTA with avatars",
      "user testimonial CTA",
      "star rating CTA",
      "social proof section",
      "framer motion tooltip",
      "waitlist CTA",
      "next.js CTA section",
      "avatar stack component",
      "trust badges CTA",
      "conversion section"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/cta-sections/simple-cta-with-images"
  },
  {
    "title": "Simple FAQs With Background",
    "slug": "/blocks/faqs/simple-faqs-with-background",
    "slugAsParams": "simple-faqs-with-background",
    "description": "A centered FAQ section with chevron-based accordions. Each item has a subtle background that appears when expanded for visual feedback.",
    "category": "faqs",
    "categoryLabel": "FAQs",
    "difficulty": "beginner",
    "keywords": [
      "centered FAQ section",
      "chevron accordion",
      "FAQ with background",
      "single column FAQ",
      "framer motion FAQ",
      "next.js help section",
      "expandable questions",
      "customer support FAQ",
      "knowledge base section",
      "animated FAQ list"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/faqs/simple-faqs-with-background"
  },
  {
    "title": "Simple Footer With Four Grids",
    "slug": "/blocks/footers/simple-footer-with-four-grids",
    "slugAsParams": "simple-footer-with-four-grids",
    "description": "A clean footer layout with four link columns: pages, socials, legal, and account. Includes a logo, tagline, and copyright notice at the bottom.",
    "category": "footers",
    "categoryLabel": "Footers",
    "difficulty": "beginner",
    "keywords": [
      "multi-column footer",
      "footer with logo",
      "link grid footer",
      "social links footer",
      "legal links footer",
      "next.js footer",
      "responsive footer layout",
      "SaaS footer",
      "website footer component",
      "footer navigation links"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/footers/simple-footer-with-four-grids"
  },
  {
    "title": "Simple Navbar With Hover Effects",
    "slug": "/blocks/navbars/simple-navbar-with-hover-effects",
    "slugAsParams": "simple-navbar-with-hover-effects",
    "description": "A rounded pill-style navbar with sliding background hover effects on nav items. Uses layoutId for smooth animated transitions between hovered states.",
    "category": "navbars",
    "categoryLabel": "Navbars",
    "difficulty": "intermediate",
    "keywords": [
      "navbar hover effects",
      "pill navbar react",
      "layoutId animation",
      "sliding background nav",
      "framer motion navbar",
      "next.js header",
      "responsive navbar",
      "mobile menu animation",
      "rounded navbar",
      "animated nav hover"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/navbars/simple-navbar-with-hover-effects"
  },
  {
    "title": "Simple Pricing With Three Tiers",
    "slug": "/blocks/pricing-sections/simple-pricing-with-three-tiers",
    "slugAsParams": "simple-pricing-with-three-tiers",
    "description": "A clean three-column pricing section with feature lists and CTA buttons. The middle tier is highlighted as featured with enhanced styling.",
    "category": "pricing-sections",
    "categoryLabel": "Pricing Sections",
    "difficulty": "beginner",
    "keywords": [
      "three tier pricing",
      "simple pricing cards",
      "featured plan highlight",
      "pricing comparison",
      "feature checklist pricing",
      "next.js pricing",
      "SaaS pricing layout",
      "plan comparison cards",
      "pricing with features",
      "minimal pricing section"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/pricing-sections/simple-pricing-with-three-tiers"
  },
  {
    "title": "Simple Sidebar With Hover",
    "slug": "/blocks/sidebars/simple-sidebar-with-hover",
    "slugAsParams": "simple-sidebar-with-hover",
    "description": "A sidebar that expands on hover to reveal link labels. Shows only icons when collapsed, full labels when hovered or active.",
    "category": "sidebars",
    "categoryLabel": "Sidebars",
    "difficulty": "intermediate",
    "keywords": [
      "hover sidebar react",
      "expand on hover nav",
      "icon sidebar",
      "collapsible sidebar",
      "dashboard sidebar",
      "next.js sidebar",
      "framer motion sidebar",
      "animated sidebar",
      "auto expand nav",
      "slim sidebar"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/sidebars/simple-sidebar-with-hover"
  },
  {
    "title": "Features Section With Card Gradient",
    "slug": "/blocks/feature-sections/simple-with-card-gradient",
    "slugAsParams": "simple-with-card-gradient",
    "description": "A responsive feature grid with eight cards. Each card has a gradient background and an SVG grid pattern with randomly positioned highlighted squares.",
    "category": "feature-sections",
    "categoryLabel": "Feature Sections",
    "difficulty": "beginner",
    "keywords": [
      "features grid react",
      "gradient cards",
      "SVG grid pattern",
      "feature cards layout",
      "responsive feature grid",
      "next.js features section",
      "card grid with pattern",
      "SaaS features",
      "product features display",
      "feature list component"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/feature-sections/simple-with-card-gradient"
  },
  {
    "title": "Features Section With Hover Effects",
    "slug": "/blocks/feature-sections/simple-with-hover-effects",
    "slugAsParams": "simple-with-hover-effects",
    "description": "An eight-card feature grid with icons and animated hover states. A vertical accent bar and gradient overlay appear on hover.",
    "category": "feature-sections",
    "categoryLabel": "Feature Sections",
    "difficulty": "beginner",
    "keywords": [
      "features with icons",
      "hover animation features",
      "feature grid with borders",
      "accent bar animation",
      "gradient hover effect",
      "next.js feature section",
      "icon feature cards",
      "SaaS features grid",
      "product capabilities display",
      "animated feature list"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/feature-sections/simple-with-hover-effects"
  },
  {
    "title": "Spotlight Logo Cloud",
    "slug": "/blocks/logo-clouds/spotlight-logo-cloud",
    "slugAsParams": "spotlight-logo-cloud",
    "description": "A static grid of logos with an ambient color spotlight effect in the background. Radial gradients create a soft, glowing atmosphere.",
    "category": "logo-clouds",
    "categoryLabel": "Logo Clouds",
    "difficulty": "beginner",
    "keywords": [
      "spotlight logo cloud",
      "ambient color background",
      "logo grid display",
      "radial gradient logos",
      "glowing background effect",
      "next.js logo section",
      "static logo grid",
      "investor logos display",
      "brand showcase",
      "four column logo grid"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/logo-clouds/spotlight-logo-cloud"
  },
  {
    "title": "Spotlight Shader",
    "slug": "/blocks/shaders/spotlight-shader",
    "slugAsParams": "spotlight-shader",
    "description": "A canvas shader with configurable spotlight beams shining from corners or edges. Supports multiple spotlights with custom colors, positions, and animations.",
    "category": "shaders",
    "categoryLabel": "Shaders",
    "difficulty": "advanced",
    "keywords": [
      "spotlight shader react",
      "corner light beams",
      "animated spotlight",
      "stage lighting effect",
      "multiple spotlights canvas",
      "next.js spotlight",
      "beam animation shader",
      "dramatic lighting background",
      "cone light effect",
      "ambient color shader"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/shaders/spotlight-shader"
  },
  {
    "title": "Stats For Changelog",
    "slug": "/blocks/stats-sections/stats-for-changelog",
    "slugAsParams": "stats-for-changelog",
    "description": "A timeline-style changelog section with date tabs and content cards. Clicking tabs reveals corresponding release notes with images.",
    "category": "stats-sections",
    "categoryLabel": "Stats Sections",
    "difficulty": "intermediate",
    "keywords": [
      "changelog component",
      "timeline tabs react",
      "release notes section",
      "date picker changelog",
      "version history display",
      "next.js changelog",
      "framer motion tabs",
      "product updates section",
      "monthly changelog",
      "animated content tabs"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/stats-sections/stats-for-changelog"
  },
  {
    "title": "Stats With Gradient",
    "slug": "/blocks/stats-sections/stats-with-gradient",
    "slugAsParams": "stats-with-gradient",
    "description": "A four-column stats grid with glassmorphism cards. Features an animated purple gradient beam at the bottom and decorative SVG bar patterns.",
    "category": "stats-sections",
    "categoryLabel": "Stats Sections",
    "difficulty": "intermediate",
    "keywords": [
      "gradient stats section",
      "glassmorphism cards",
      "purple beam animation",
      "SVG bar pattern",
      "blurred gradient effect",
      "next.js stats grid",
      "metric cards grid",
      "hover gradient animation",
      "four column stats",
      "stats with decoration"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/stats-sections/stats-with-gradient"
  },
  {
    "title": "Stats With Grid Background",
    "slug": "/blocks/stats-sections/stats-with-grid-background",
    "slugAsParams": "stats-with-grid-background",
    "description": "A three-column stats section with icon containers, values, and descriptions. Each card has an SVG grid pattern background and a hover-animated corner element.",
    "category": "stats-sections",
    "categoryLabel": "Stats Sections",
    "difficulty": "intermediate",
    "keywords": [
      "stats cards grid",
      "icon stats section",
      "grid pattern background",
      "corner hover animation",
      "metric display cards",
      "next.js stats section",
      "SVG grid pattern",
      "value highlight cards",
      "business metrics",
      "stats with icons"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/stats-sections/stats-with-grid-background"
  },
  {
    "title": "Stats With Number Ticker",
    "slug": "/blocks/stats-sections/stats-with-number-ticker",
    "slugAsParams": "stats-with-number-ticker",
    "description": "A stats section with animated counting numbers. Values tick up from zero when the component enters the viewport, using spring physics.",
    "category": "stats-sections",
    "categoryLabel": "Stats Sections",
    "difficulty": "intermediate",
    "keywords": [
      "number ticker react",
      "animated counter",
      "counting animation",
      "spring physics counter",
      "viewport trigger animation",
      "next.js stats counter",
      "framer motion number",
      "useInView counter",
      "animated statistics",
      "count up effect"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/stats-sections/stats-with-number-ticker"
  },
  {
    "title": "Symmetric Bento Grid",
    "slug": "/blocks/bento-grids/symmetric-bento-grid",
    "slugAsParams": "symmetric-bento-grid",
    "description": "A five-card asymmetric bento layout with animated SVG connection paths, a rotating 3D globe using Cobe, and deployment workflow visualization.",
    "category": "bento-grids",
    "categoryLabel": "Bento Grids",
    "difficulty": "advanced",
    "keywords": [
      "asymmetric bento grid",
      "3D globe react",
      "cobe globe component",
      "deployment workflow UI",
      "SVG path animation",
      "git workflow visualization",
      "next.js bento layout",
      "framer motion SVG",
      "developer tool landing",
      "edge network globe"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/bento-grids/symmetric-bento-grid"
  },
  {
    "title": "Testimonials Background With Drag",
    "slug": "/blocks/testimonials/testimonials-background-with-drag",
    "slugAsParams": "testimonials-background-with-drag",
    "description": "A hero-style testimonials section with draggable cards scattered in the background. Cards can be picked up and moved, creating an interactive experience.",
    "category": "testimonials",
    "categoryLabel": "Testimonials",
    "difficulty": "advanced",
    "keywords": [
      "draggable testimonials",
      "interactive testimonial cards",
      "scatter layout",
      "framer motion drag",
      "hero testimonials",
      "pick up cards",
      "next.js drag and drop",
      "playful testimonials",
      "background testimonial cards",
      "z-index stacking drag"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/testimonials/testimonials-background-with-drag"
  },
  {
    "title": "Testimonials Grid With Centered Carousel",
    "slug": "/blocks/testimonials/testimonials-grid-with-centered-carousel",
    "slugAsParams": "testimonials-grid-with-centered-carousel",
    "description": "A testimonials section with a faded background grid and a centered carousel slider. The active testimonial displays prominently while others blur in the background.",
    "category": "testimonials",
    "categoryLabel": "Testimonials",
    "difficulty": "advanced",
    "keywords": [
      "testimonial carousel react",
      "centered slider",
      "faded background grid",
      "focus testimonial",
      "headlessui carousel",
      "next.js testimonials",
      "testimonial slider",
      "social proof section",
      "customer reviews carousel",
      "animated testimonial grid"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/testimonials/testimonials-grid-with-centered-carousel"
  },
  {
    "title": "Testimonials Hover Illustration",
    "slug": "/blocks/illustrations/testimonials-hover-illustration",
    "slugAsParams": "testimonials-hover-illustration",
    "description": "An interactive testimonial card grid with hover animations. Cards lift and rotate on hover, revealing a diagonal stripe pattern beneath each card.",
    "category": "illustrations",
    "categoryLabel": "Illustrations",
    "difficulty": "beginner",
    "keywords": [
      "testimonials animation",
      "hover cards",
      "testimonial grid",
      "animated testimonials",
      "card hover effect",
      "testimonial illustration",
      "review cards",
      "motion testimonials",
      "customer reviews",
      "testimonial component"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/illustrations/testimonials-hover-illustration"
  },
  {
    "title": "Testimonials Marquee Grid",
    "slug": "/blocks/testimonials/testimonials-marquee-grid",
    "slugAsParams": "testimonials-marquee-grid",
    "description": "A two-row testimonials section with horizontal marquee scrolling. Cards scroll at different speeds with pause-on-hover interaction.",
    "category": "testimonials",
    "categoryLabel": "Testimonials",
    "difficulty": "intermediate",
    "keywords": [
      "testimonial marquee",
      "scrolling testimonials",
      "react-fast-marquee",
      "infinite scroll reviews",
      "two row testimonials",
      "pause on hover",
      "next.js testimonials",
      "horizontal scroll cards",
      "continuous testimonials",
      "social proof marquee"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/testimonials/testimonials-marquee-grid"
  },
  {
    "title": "Testimonials Masonry Grid",
    "slug": "/blocks/testimonials/testimonials-masonry-grid",
    "slugAsParams": "testimonials-masonry-grid",
    "description": "A four-column masonry layout of testimonial cards with quote icons. Cards have varying heights based on content length, creating a Pinterest-style layout.",
    "category": "testimonials",
    "categoryLabel": "Testimonials",
    "difficulty": "beginner",
    "keywords": [
      "masonry testimonials",
      "pinterest layout",
      "quote icon cards",
      "variable height grid",
      "four column testimonials",
      "next.js masonry",
      "testimonial cards grid",
      "social proof masonry",
      "customer reviews grid",
      "staggered testimonials"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/testimonials/testimonials-masonry-grid"
  },
  {
    "title": "Testimonials With Carousel",
    "slug": "/blocks/testimonials/testimonials-with-carousel",
    "slugAsParams": "testimonials-with-carousel",
    "description": "A testimonials section with paginated carousel navigation. Displays three testimonials at a time with smooth animated transitions between pages.",
    "category": "testimonials",
    "categoryLabel": "Testimonials",
    "difficulty": "beginner",
    "keywords": [
      "testimonials carousel",
      "paginated testimonials",
      "animated testimonials",
      "social proof section",
      "customer reviews carousel",
      "next.js testimonials",
      "motion testimonials",
      "testimonial cards grid",
      "carousel navigation",
      "review slider"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/testimonials/testimonials-with-carousel"
  },
  {
    "title": "Text Animation Blur Fade In",
    "slug": "/blocks/text-animations/text-animation-blur-fade-in",
    "slugAsParams": "text-animation-blur-fade-in",
    "description": "A word-by-word text reveal animation where each word fades in from blur. Uses viewport detection to trigger animations when content scrolls into view.",
    "category": "text-animations",
    "categoryLabel": "Text Animations",
    "difficulty": "beginner",
    "keywords": [
      "blur fade text",
      "word by word reveal",
      "scroll trigger text",
      "whileInView animation",
      "staggered text reveal",
      "next.js text animation",
      "framer motion blur",
      "viewport triggered",
      "fade in words",
      "text entrance animation"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/text-animations/text-animation-blur-fade-in"
  },
  {
    "title": "Text Animation Flipping Words",
    "slug": "/blocks/text-animations/text-animation-flipping-words",
    "slugAsParams": "text-animation-flipping-words",
    "description": "A typewriter-style text animation that types and deletes words with 3D flip effects. Characters rotate in with blur as they appear.",
    "category": "text-animations",
    "categoryLabel": "Text Animations",
    "difficulty": "intermediate",
    "keywords": [
      "flipping text animation",
      "3D text rotation",
      "typewriter with flip",
      "character animation",
      "blur fade text",
      "next.js text animation",
      "framer motion text",
      "rotateY animation",
      "typing delete effect",
      "word cycling animation"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/text-animations/text-animation-flipping-words"
  },
  {
    "title": "Text Animation Typewriter Effect",
    "slug": "/blocks/text-animations/text-animation-typewriter-effect",
    "slugAsParams": "text-animation-typewriter-effect",
    "description": "A classic typewriter text effect that types words character by character. Includes a blinking cursor and configurable typing and deletion speeds.",
    "category": "text-animations",
    "categoryLabel": "Text Animations",
    "difficulty": "beginner",
    "keywords": [
      "typewriter effect react",
      "typing animation",
      "blinking cursor",
      "word cycling text",
      "character by character",
      "next.js typewriter",
      "framer motion typing",
      "animated headline",
      "typing delete loop",
      "text reveal animation"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/text-animations/text-animation-typewriter-effect"
  },
  {
    "title": "Three Column Bento Grid",
    "slug": "/blocks/bento-grids/three-column-bento-grid",
    "slugAsParams": "three-column-bento-grid",
    "description": "A responsive bento grid with animated skeletons including avatar scoring, progress tracking timelines, video interview previews, and drag-and-drop file upload.",
    "category": "bento-grids",
    "categoryLabel": "Bento Grids",
    "difficulty": "intermediate",
    "keywords": [
      "three column bento",
      "ATS score cards",
      "file upload animation",
      "timeline progress grid",
      "react bento layout",
      "framer motion cards",
      "candidate tracking UI",
      "animated beam lines",
      "draggable file upload",
      "interview scheduling grid"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/bento-grids/three-column-bento-grid"
  },
  {
    "title": "Three Columns With Images",
    "slug": "/blocks/bento-grids/three-column-with-images",
    "slugAsParams": "three-column-with-images",
    "description": "A five-card bento grid using product screenshots instead of animated skeletons. Cards animate on hover with title and description text shifting horizontally.",
    "category": "bento-grids",
    "categoryLabel": "Bento Grids",
    "difficulty": "beginner",
    "keywords": [
      "bento grid images",
      "screenshot feature cards",
      "hover animation grid",
      "react dashboard grid",
      "framer motion hover",
      "SaaS feature section",
      "product screenshot layout",
      "three column cards",
      "dashboard bento grid",
      "next.js feature grid"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/bento-grids/three-column-with-images"
  },
  {
    "title": "Two Column With Image",
    "slug": "/blocks/hero-sections/two-column-with-image",
    "slugAsParams": "two-column-with-image",
    "description": "A classic two-column hero layout with compelling copy on one side and a high-impact image on the other. Ideal for product-led landing pages, marketing websites, and any page that needs to balance visual storytelling with persuasive text above the fold.",
    "category": "hero-sections",
    "categoryLabel": "Hero Sections",
    "difficulty": "beginner",
    "keywords": [
      "two column hero section",
      "split hero layout",
      "hero with side image",
      "react two column hero",
      "next.js split hero",
      "product hero two columns",
      "tailwind two column layout",
      "hero section image and text",
      "marketing hero component",
      "landing page split layout",
      "hero with product image",
      "side by side hero section"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/hero-sections/two-column-with-image"
  },
  {
    "title": "Uptime Status Illustration",
    "slug": "/blocks/illustrations/uptime-status-illustration",
    "slugAsParams": "uptime-status-illustration",
    "description": "An interactive uptime status bar illustration with hover effects. Each bar represents a day's status and reveals detailed information on hover with smooth animations.",
    "category": "illustrations",
    "categoryLabel": "Illustrations",
    "difficulty": "intermediate",
    "keywords": [
      "uptime",
      "status bar",
      "hover effect",
      "interactive illustration",
      "status indicator",
      "monitoring",
      "health check",
      "server status",
      "availability",
      "motion animation"
    ],
    "documentationUrl": "https://ui.aceternity.com/blocks/illustrations/uptime-status-illustration"
  }
]