); } const testimonials = [ { quote: "It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair.", name: "Charles Dickens", title: "A Tale of Two Cities", }, { quote: "To be, or not to be, that is the question: Whether 'tis nobler in the mind to suffer The slings and arrows of outrageous fortune, Or to take Arms against a Sea of troubles, And by opposing end them: to die, to sleep.", name: "William Shakespeare", title: "Hamlet", }, { quote: "All that we see or seem is but a dream within a dream.", name: "Edgar Allan Poe", title: "A Dream Within a Dream", }, { quote: "It is a truth universally acknowledged, that a single man in possession of a good fortune, must be in want of a wife.", name: "Jane Austen", title: "Pride and Prejudice", }, { quote: "Call me Ishmael. Some years ago\u2014never mind how long precisely\u2014having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.", name: "Herman Melville", title: "Moby-Dick", }, ]; `,__rawStringJsx__:`"use client"; import React from "react"; import { InfiniteMovingCards } from "../ui/infinite-moving-cards"; export function InfiniteMovingCardsDemo() { return ( (

) ); } const testimonials = [ { quote: "It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair.", name: "Charles Dickens", title: "A Tale of Two Cities", }, { quote: "To be, or not to be, that is the question: Whether 'tis nobler in the mind to suffer The slings and arrows of outrageous fortune, Or to take Arms against a Sea of troubles, And by opposing end them: to die, to sleep.", name: "William Shakespeare", title: "Hamlet", }, { quote: "All that we see or seem is but a dream within a dream.", name: "Edgar Allan Poe", title: "A Dream Within a Dream", }, { quote: "It is a truth universally acknowledged, that a single man in possession of a good fortune, must be in want of a wife.", name: "Jane Austen", title: "Pride and Prejudice", }, { quote: "Call me Ishmael. Some years ago\u2014never mind how long precisely\u2014having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.", name: "Herman Melville", title: "Moby-Dick", }, ]; `,__src__:"src/registry/default/example/infinite-moving-cards-demo.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", { "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"useEffect"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"react"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"InfiniteMovingCards"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"../ui/infinite-moving-cards"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"InfiniteMovingCardsDemo"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"h-[40rem] rounded-md flex flex-col antialiased bg-white dark:bg-black dark:bg-grid-white/[0.05] items-center justify-center relative overflow-hidden"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"InfiniteMovingCards"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"items"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"testimonials"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"direction"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"right"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"speed"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"slow"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"testimonials"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ["})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"quote"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:":"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair."'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"name"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"Charles Dickens"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"A Tale of Two Cities"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"quote"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:":"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:`"To be, or not to be, that is the question: Whether 'tis nobler in the mind to suffer The slings and arrows of outrageous fortune, Or to take Arms against a Sea of troubles, And by opposing end them: to die, to sleep."`}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"name"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"William Shakespeare"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"Hamlet"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"quote"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"All that we see or seem is but a dream within a dream."'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"name"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"Edgar Allan Poe"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"A Dream Within a Dream"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"quote"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:":"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"It is a truth universally acknowledged, that a single man in possession of a good fortune, must be in want of a wife."'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"name"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"Jane Austen"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"Pride and Prejudice"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"quote"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:":"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"Call me Ishmael. Some years ago\u2014never mind how long precisely\u2014having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world."'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"name"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"Herman Melville"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"Moby-Dick"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"];"})})]})})})}),` `,(0,e.jsxs)(l.h2,{id:"installation",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,e.jsxs)(a,{defaultValue:"manual",children:[(0,e.jsxs)(r,{children:[(0,e.jsx)(t,{value:"cli",children:"CLI"}),(0,e.jsx)(t,{value:"manual",children:"Manual"})]}),(0,e.jsx)(d,{value:"cli",children:(0,e.jsxs)(B,{children:[(0,e.jsx)(o,{children:"Run the following command"}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx aceternity-ui@latest add infinite-moving-cards `,__npmCommand__:`npx aceternity-ui@latest add infinite-moving-cards `,__yarnCommand__:`npx aceternity-ui@latest add infinite-moving-cards `,__pnpmCommand__:`pnpm dlx aceternity-ui@latest add infinite-moving-cards `,__bunCommand__:`bunx --bun aceternity-ui@latest add infinite-moving-cards `,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"npx "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"aceternity-ui@latest"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"add"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"infinite-moving-cards"})]})})})}),(0,e.jsx)(o,{children:"Add Tailwind CSS plugin for variable classes"}),(0,e.jsxs)(l.div,{"data-rehype-pretty-code-fragment":"",children:[(0,e.jsx)(l.div,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"default",children:"tailwind.config.ts"}),(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__withMeta__:!0,__rawString__:`const defaultTheme = require("tailwindcss/defaultTheme"); const colors = require("tailwindcss/colors"); const { default: flattenColorPalette, } = require("tailwindcss/lib/util/flattenColorPalette"); /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{ts,tsx}"], darkMode: "class", theme: { // rest of the code extend: { animation: { scroll: "scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite", }, keyframes: { scroll: { to: { transform: "translate(calc(-50% - 0.5rem))", }, }, }, }, }, plugins: [addVariablesForColors], }; function addVariablesForColors({ addBase, theme }: any) { let allColors = flattenColorPalette(theme("colors")); let newVars = Object.fromEntries( Object.entries(allColors).map(([key, val]) => [\`--\${key}\`, val]) ); addBase({ ":root": newVars, }); } `,__rawStringJsx__:`const defaultTheme = require("tailwindcss/defaultTheme"); const colors = require("tailwindcss/colors"); const { default: flattenColorPalette, } = require("tailwindcss/lib/util/flattenColorPalette"); /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{ts,tsx}"], darkMode: "class", theme: { // rest of the code extend: { animation: { scroll: "scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite", }, keyframes: { scroll: { to: { transform: "translate(calc(-50% - 0.5rem))", }, }, }, }, }, plugins: [addVariablesForColors], }; function addVariablesForColors({ addBase, theme }) { let allColors = flattenColorPalette(theme("colors")); let newVars = Object.fromEntries(Object.entries(allColors).map(([key, val]) => [\`--\${key}\`, val])); addBase({ ":root": newVars, }); } `,children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"defaultTheme"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"require"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"tailwindcss/defaultTheme"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"colors"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"require"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"tailwindcss/colors"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"default"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"flattenColorPalette"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"} "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"require"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"tailwindcss/lib/util/flattenColorPalette"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"/** "}),(0,e.jsx)(l.span,{style:{color:"#C678DD",fontStyle:"italic"},children:"@type"}),(0,e.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B",fontStyle:"italic"},children:"{import('tailwindcss').Config}"}),(0,e.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:" */"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"module"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"exports"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"content"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": ["}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"./src/**/*.{ts,tsx}"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"darkMode"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"class"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"// rest of the code"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"extend"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"animation"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"scroll"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:":"})]}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"keyframes"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"scroll"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"to"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"transform"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"translate(calc(-50% - 0.5rem))"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line line--highlighted",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line line--highlighted",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"plugins"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": ["}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"addVariablesForColors"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"],"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"};"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"addVariablesForColors"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"({ "}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"addBase"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }: "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"any"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"allColors"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"flattenColorPalette"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"colors"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"));"})]}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"newVars"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"Object"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"fromEntries"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"Object"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"entries"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"allColors"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:")."}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"map"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"((["}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"key"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"val"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"]) "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"`--"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"key"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"val"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"])"})]}),` `,(0,e.jsx)(l.span,{className:"line line--highlighted",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line line--highlighted",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"addBase"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'":root"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"newVars"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line line--highlighted",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" });"})}),` `,(0,e.jsx)(l.span,{className:"line line--highlighted",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}"})})]})})]})]})}),(0,e.jsx)(d,{value:"manual",children:(0,e.jsxs)(B,{children:[(0,e.jsx)(o,{children:"Install dependencies"}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm i framer-motion clsx tailwind-merge `,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"npm "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"i"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"framer-motion"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"clsx"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"tailwind-merge"})]})})})}),(0,e.jsx)(o,{children:"Add util file"}),(0,e.jsxs)(l.div,{"data-rehype-pretty-code-fragment":"",children:[(0,e.jsx)(l.div,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"default",children:"lib/utils.ts"}),(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__withMeta__:!0,__rawString__:`import { ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } `,__rawStringJsx__:`import { clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs) { return twMerge(clsx(inputs)); } `,children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"ClassValue"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"clsx"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"clsx"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"twMerge"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"tailwind-merge"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"(..."}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"inputs"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"ClassValue"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"[]) {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"twMerge"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"clsx"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"inputs"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"));"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}"})})]})})]}),(0,e.jsx)(o,{children:"Add Tailwind CSS plugin for variable classes"}),(0,e.jsxs)(l.div,{"data-rehype-pretty-code-fragment":"",children:[(0,e.jsx)(l.div,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"default",children:"tailwind.config.ts"}),(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__withMeta__:!0,__rawString__:`const defaultTheme = require("tailwindcss/defaultTheme"); const colors = require("tailwindcss/colors"); const { default: flattenColorPalette, } = require("tailwindcss/lib/util/flattenColorPalette"); /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{ts,tsx}"], darkMode: "class", theme: { // rest of the code extend: { animation: { scroll: "scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite", }, keyframes: { scroll: { to: { transform: "translate(calc(-50% - 0.5rem))", }, }, }, }, }, plugins: [addVariablesForColors], }; function addVariablesForColors({ addBase, theme }: any) { let allColors = flattenColorPalette(theme("colors")); let newVars = Object.fromEntries( Object.entries(allColors).map(([key, val]) => [\`--\${key}\`, val]) ); addBase({ ":root": newVars, }); } `,__rawStringJsx__:`const defaultTheme = require("tailwindcss/defaultTheme"); const colors = require("tailwindcss/colors"); const { default: flattenColorPalette, } = require("tailwindcss/lib/util/flattenColorPalette"); /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{ts,tsx}"], darkMode: "class", theme: { // rest of the code extend: { animation: { scroll: "scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite", }, keyframes: { scroll: { to: { transform: "translate(calc(-50% - 0.5rem))", }, }, }, }, }, plugins: [addVariablesForColors], }; function addVariablesForColors({ addBase, theme }) { let allColors = flattenColorPalette(theme("colors")); let newVars = Object.fromEntries(Object.entries(allColors).map(([key, val]) => [\`--\${key}\`, val])); addBase({ ":root": newVars, }); } `,children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"defaultTheme"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"require"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"tailwindcss/defaultTheme"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"colors"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"require"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"tailwindcss/colors"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"default"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"flattenColorPalette"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"} "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"require"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"tailwindcss/lib/util/flattenColorPalette"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"/** "}),(0,e.jsx)(l.span,{style:{color:"#C678DD",fontStyle:"italic"},children:"@type"}),(0,e.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B",fontStyle:"italic"},children:"{import('tailwindcss').Config}"}),(0,e.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:" */"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"module"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"exports"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"content"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": ["}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"./src/**/*.{ts,tsx}"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"darkMode"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"class"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"// rest of the code"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"extend"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"animation"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"scroll"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:":"})]}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"keyframes"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"scroll"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"to"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"transform"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"translate(calc(-50% - 0.5rem))"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line line--highlighted",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line line--highlighted",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" },"})}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"plugins"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": ["}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"addVariablesForColors"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"],"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"};"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"addVariablesForColors"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"({ "}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"addBase"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }: "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"any"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"allColors"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"flattenColorPalette"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"colors"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"));"})]}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"let"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"newVars"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"Object"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"fromEntries"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"Object"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"entries"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"allColors"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:")."}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"map"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"((["}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"key"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"val"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"]) "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"`--"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"${"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"key"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"`"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"val"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"])"})]}),` `,(0,e.jsx)(l.span,{className:"line line--highlighted",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line line--highlighted",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"addBase"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'":root"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"newVars"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line line--highlighted",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" });"})}),` `,(0,e.jsx)(l.span,{className:"line line--highlighted",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}"})})]})})]}),(0,e.jsx)(o,{children:"Copy the source code"}),(0,e.jsx)(l.p,{children:(0,e.jsx)(l.code,{children:"components/ui/infinite-moving-cards.tsx"})}),(0,e.jsx)(h,{name:"infinite-moving-cards",children:(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client"; import { cn } from "@/lib/utils"; import React, { useEffect, useState } from "react"; export const InfiniteMovingCards = ({ items, direction = "left", speed = "fast", pauseOnHover = true, className, }: { items: { quote: string; name: string; title: string; }[]; direction?: "left" | "right"; speed?: "fast" | "normal" | "slow"; pauseOnHover?: boolean; className?: string; }) => { const containerRef = React.useRef(null); const scrollerRef = React.useRef(null); useEffect(() => { addAnimation(); }, []); const [start, setStart] = useState(false); function addAnimation() { if (containerRef.current && scrollerRef.current) { const scrollerContent = Array.from(scrollerRef.current.children); scrollerContent.forEach((item) => { const duplicatedItem = item.cloneNode(true); if (scrollerRef.current) { scrollerRef.current.appendChild(duplicatedItem); } }); getDirection(); getSpeed(); setStart(true); } } const getDirection = () => { if (containerRef.current) { if (direction === "left") { containerRef.current.style.setProperty( "--animation-direction", "forwards" ); } else { containerRef.current.style.setProperty( "--animation-direction", "reverse" ); } } }; const getSpeed = () => { if (containerRef.current) { if (speed === "fast") { containerRef.current.style.setProperty("--animation-duration", "20s"); } else if (speed === "normal") { containerRef.current.style.setProperty("--animation-duration", "40s"); } else { containerRef.current.style.setProperty("--animation-duration", "80s"); } } }; return (

{item.quote}
{item.name} {item.title}

); }; `,__rawStringJsx__:`"use client"; import { cn } from "@/lib/utils"; import React, { useEffect, useState } from "react"; export const InfiniteMovingCards = ({ items, direction = "left", speed = "fast", pauseOnHover = true, className }) => { const containerRef = React.useRef(null); const scrollerRef = React.useRef(null); useEffect(() => { addAnimation(); }, []); const [start, setStart] = useState(false); function addAnimation() { if (containerRef.current && scrollerRef.current) { const scrollerContent = Array.from(scrollerRef.current.children); scrollerContent.forEach((item) => { const duplicatedItem = item.cloneNode(true); if (scrollerRef.current) { scrollerRef.current.appendChild(duplicatedItem); } }); getDirection(); getSpeed(); setStart(true); } } const getDirection = () => { if (containerRef.current) { if (direction === "left") { containerRef.current.style.setProperty("--animation-direction", "forwards"); } else { containerRef.current.style.setProperty("--animation-direction", "reverse"); } } }; const getSpeed = () => { if (containerRef.current) { if (speed === "fast") { containerRef.current.style.setProperty("--animation-duration", "20s"); } else if (speed === "normal") { containerRef.current.style.setProperty("--animation-duration", "40s"); } else { containerRef.current.style.setProperty("--animation-duration", "80s"); } } }; return ( (

{item.quote}
{item.name} {item.title}

) ); }; `,__src__:"src/registry/default/ui/infinite-moving-cards.tsx",__style__:"default",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"@/lib/utils"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", { "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"useEffect"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"react"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"InfiniteMovingCards"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"items"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"direction"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"left"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"speed"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"fast"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"pauseOnHover"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"true"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}: {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"items"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"quote"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"name"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }[];"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"direction"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"left"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" | "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"right"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"speed"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"fast"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" | "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"normal"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" | "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"slow"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"pauseOnHover"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"boolean"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}) "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"containerRef"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"useRef"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"HTMLDivElement"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">("}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"scrollerRef"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"useRef"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"HTMLUListElement"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">("}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"useEffect"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"addAnimation"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"();"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }, []);"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"start"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"setStart"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"addAnimation"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"containerRef"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"scrollerRef"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"scrollerContent"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"Array"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"scrollerRef"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"children"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"scrollerContent"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"forEach"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"item"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"duplicatedItem"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"item"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"cloneNode"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"true"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"scrollerRef"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"scrollerRef"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"appendChild"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"duplicatedItem"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" });"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"getDirection"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"();"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"getSpeed"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"();"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"setStart"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"true"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"getDirection"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"containerRef"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"direction"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"left"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"containerRef"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"style"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"setProperty"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"--animation-direction"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"forwards"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"else"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"containerRef"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"style"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"setProperty"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"--animation-direction"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"reverse"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" };"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"getSpeed"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"containerRef"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"speed"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"fast"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"containerRef"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"style"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"setProperty"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"--animation-duration"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"20s"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"else"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"speed"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"normal"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:") {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"containerRef"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"style"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"setProperty"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"--animation-duration"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"40s"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"else"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"containerRef"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"style"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"setProperty"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"--animation-duration"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"80s"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" };"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"div"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"containerRef"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"scroller relative z-20 max-w-7xl overflow-hidden [mask-image:linear-gradient(to_right,transparent,white_20%,white_80%,transparent)]"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"className"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" )"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"ul"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"scrollerRef"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'" flex min-w-full shrink-0 gap-4 py-4 w-max flex-nowrap"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"start"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"animate-scroll "'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"pauseOnHover"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"hover:[animation-play-state:paused]"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" )"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"items"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"map"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"item"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"idx"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"li"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"w-[350px] max-w-full relative rounded-2xl border border-b-0 flex-shrink-0 border-slate-700 px-8 py-6 md:w-[450px]"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"style"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"background"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:":"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"linear-gradient(180deg, var(--slate-800), var(--slate-900)"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"key"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"item"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"name"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"blockquote"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"div"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"aria-hidden"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"true"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"user-select-none -z-1 pointer-events-none absolute -left-0.5 -top-0.5 h-[calc(100%_+_4px)] w-[calc(100%_+_4px)]"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'" relative z-20 text-sm leading-[1.6] text-gray-100 font-normal"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"item"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"quote"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"relative z-20 mt-6 flex flex-row items-center"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"flex flex-col gap-1"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'" text-sm leading-[1.6] text-gray-400 font-normal"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"item"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"name"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'" text-sm leading-[1.6] text-gray-400 font-normal"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"item"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ))"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"};"})})]})})})})]})})]}),` `,(0,e.jsxs)(l.h2,{id:"props",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#props",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Props"]}),` `,(0,e.jsxs)(l.table,{children:[(0,e.jsx)(l.thead,{children:(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.th,{children:"Prop"}),(0,e.jsx)(l.th,{children:"Type"}),(0,e.jsx)(l.th,{children:"Description"})]})}),(0,e.jsxs)(l.tbody,{children:[(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:"items"})}),(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:"{ quote: string; name: string; title: string; }[]"})}),(0,e.jsx)(l.td,{children:"An array of objects, each containing a quote, name, and title."})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:"direction"})}),(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:'"left" | "right" '})}),(0,e.jsx)(l.td,{children:'The direction of the animation. Default is "left".'})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:"speed"})}),(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:'"fast" | "normal" | "slow" '})}),(0,e.jsx)(l.td,{children:'The speed of the animation. Default is "fast".'})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:"pauseOnHover"})}),(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:"boolean "})}),(0,e.jsx)(l.td,{children:"If true, the animation will pause when the mouse hovers over it. Default is true."})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:"className"})}),(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:"string "})}),(0,e.jsx)(l.td,{children:"Optional additional CSS classes to apply to the component."})]})]})]})]})}function x(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,Object.assign({},n,{children:(0,e.jsx)(F,n)})):F(n)}var b=x;function c(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return w(_);})(); ;return Component;

Aceternity UI