marqy 0.0.8 → 1.0.0

package/examples/astro.config.mjs

@@ -0,0 +1,101 @@
+import react from '@astrojs/react'
+import tailwindcss from '@tailwindcss/vite'
+import { defineConfig, fontProviders } from 'astro/config'
+
+export default defineConfig({
+  integrations: [react()],
+  fonts: [
+    {
+      provider: fontProviders.local(),
+      name: 'AkkuratMono',
+      cssVariable: '--font-akkurat-mono',
+      options: {
+        variants: [
+          {
+            src: [
+              './src/fonts/Akkurat-Mono.woff2',
+              './src/fonts/Akkurat-Mono.woff',
+            ],
+            weight: 500,
+            style: 'normal',
+          },
+          {
+            src: [
+              './src/fonts/Akkurat-Mono-Bold.woff',
+            ],
+            weight: 700,
+            style: 'normal',
+          },
+        ],
+      },
+      fallbacks: ['monospace'],
+    },
+    {
+      provider: fontProviders.local(),
+      name: 'GrtskPeta',
+      cssVariable: '--font-grtsk',
+      options: {
+        variants: [
+          {
+            src: [
+              './src/fonts/Grtsk-Peta-Light.woff2',
+              './src/fonts/Grtsk-Peta-Light.woff',
+            ],
+            weight: 300,
+            style: 'normal',
+          },
+          {
+            src: [
+              './src/fonts/Grtsk-Peta-Regular.woff2',
+              './src/fonts/Grtsk-Peta-Regular.woff',
+            ],
+            weight: 400,
+            style: 'normal',
+          },
+          {
+            src: [
+              './src/fonts/Grtsk-Peta-Medium.woff2',
+              './src/fonts/Grtsk-Peta-Medium.woff',
+            ],
+            weight: 500,
+            style: 'normal',
+          },
+        ],
+      },
+    },
+    {
+      provider: fontProviders.local(),
+      name: 'GrtskTera',
+      cssVariable: '--font-grtsk-wide',
+      options: {
+        variants: [
+          {
+            src: [
+              './src/fonts/Grtsk-Tera-Medium.woff2',
+              './src/fonts/Grtsk-Tera-Medium.woff',
+            ],
+            weight: 500,
+            style: 'normal',
+          },
+          {
+            src: [
+              './src/fonts/Grtsk-Tera-Bold.woff2',
+              './src/fonts/Grtsk-Tera-Bold.woff',
+            ],
+            weight: 700,
+            style: 'normal',
+          },
+        ],
+      },
+    },
+  ],
+  vite: {
+    plugins: [tailwindcss()],
+    optimizeDeps: {
+      include: ['react', 'react-dom', 'react-dom/client', 'react-cool-dimensions'],
+    },
+    resolve: {
+      dedupe: ['react', 'react-dom'],
+    },
+  },
+})

package/examples/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "marqy-examples",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview"
+  },
+  "dependencies": {
+    "@astrojs/react": "^4.0.0",
+    "@base-ui-components/react": "^1.0.0-rc.0",
+    "@gsap/react": "^2.1.2",
+    "@tailwindcss/vite": "^4.2.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "astro": "^6.0.0",
+    "gsap": "^3.15.0",
+    "marqy": "link:..",
+    "react": "^19.0.0",
+    "react-cool-dimensions": "^3.0.1",
+    "react-dom": "^19.0.0",
+    "react-resizable": "^3.1.3",
+    "tailwind-merge": "^3.0.0",
+    "tailwindcss": "^4.2.0"
+  },
+  "devDependencies": {
+    "@types/react-resizable": "^3.0.8"
+  }
+}

package/examples/public/favicon.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="32" height="32" fill="black"/>
+<path d="M10.2351 8.83203L16.0696 17.3083L21.8473 8.83203H26.2095V23.168H22.3184V14.1144L17.8127 20.8947H14.2287L9.68211 14.232V23.168H5.79102V8.83203H10.2351Z" fill="#f1f1f1"/>
+</svg>

package/examples/public/marqy-logo.svg

@@ -0,0 +1,35 @@
+<svg width="984" height="200" viewBox="0 0 984 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_458_171)">
+<rect width="984" height="200" fill="white"/>
+<path d="M0 0H200V200H0V0Z" fill="white"/>
+<path d="M200 0V200H0V0H200ZM4 196H196V4H4V196Z" fill="black"/>
+<path d="M63.9668 55.2002L100.433 108.177L136.543 55.2002H163.807V144.8H139.487V88.2148L111.327 130.592H88.9268L60.5107 88.9502V144.8H36.1914V55.2002H63.9668Z" fill="black"/>
+<path d="M196 -124H396V76H196V-124Z" fill="white"/>
+<path d="M396 -124V76H196V-124H396ZM200 72H392V-120H200V72Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M356.992 20.7998H328.576L320.111 4.16016H270.864L262.399 20.7998H235.008L282.752 -68.7998H309.248L356.992 20.7998ZM280.698 -15.168H310.277L295.487 -44.2402L280.698 -15.168Z" fill="black"/>
+<path d="M196 72H396V272H196V72Z" fill="white"/>
+<path d="M396 72V272H196V72H396ZM200 268H392V76H200V268Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M356.992 216.8H328.576L320.111 200.16H270.864L262.399 216.8H235.008L282.752 127.2H309.248L356.992 216.8ZM280.698 180.832H310.277L295.487 151.76L280.698 180.832Z" fill="black"/>
+<path d="M392 -71H592V129H392V-71Z" fill="white"/>
+<path d="M592 -71V129H392V-71H592ZM396 125H588V-67H396V125Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M504.416 -15.7998C509.792 -15.7998 514.571 -15.1173 518.752 -13.752C522.933 -12.3866 526.432 -10.4242 529.248 -7.86426C532.149 -5.30428 534.326 -2.2324 535.776 1.35156C537.312 4.93554 538.08 8.98908 538.08 13.5117C538.08 19.1435 536.715 24.0928 533.984 28.3594C531.339 32.5407 527.499 35.8265 522.464 38.2158C519.509 39.5914 516.174 40.5561 512.458 41.1104L542.176 73.7998H510.304L483.907 43.8477H467.808V73.7998H441.824V-15.7998H504.416ZM467.808 24.2637H499.808C501.855 24.2637 503.648 24.0506 505.184 23.624C506.72 23.112 508 22.4721 509.024 21.7041C510.048 20.8508 510.816 19.7838 511.328 18.5039C511.84 17.1386 512.096 15.6448 512.096 14.0234C512.096 12.317 511.84 10.8238 511.328 9.54395C510.816 8.26405 510.048 7.23966 509.024 6.47168C508 5.61835 506.72 4.97842 505.184 4.55176C503.648 4.03982 501.855 3.78418 499.808 3.78418H467.808V24.2637Z" fill="black"/>
+<path d="M392 125H592V325H392V125Z" fill="white"/>
+<path d="M592 125V325H392V125H592ZM396 321H588V129H396V321Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M504.416 180.2C509.792 180.2 514.571 180.883 518.752 182.248C522.933 183.613 526.432 185.576 529.248 188.136C532.149 190.696 534.326 193.768 535.776 197.352C537.312 200.936 538.08 204.989 538.08 209.512C538.08 215.143 536.715 220.093 533.984 224.359C531.339 228.541 527.499 231.826 522.464 234.216C519.509 235.591 516.174 236.556 512.458 237.11L542.176 269.8H510.304L483.907 239.848H467.808V269.8H441.824V180.2H504.416ZM467.808 220.264H499.808C501.855 220.264 503.648 220.051 505.184 219.624C506.72 219.112 508 218.472 509.024 217.704C510.048 216.851 510.816 215.784 511.328 214.504C511.84 213.139 512.096 211.645 512.096 210.023C512.096 208.317 511.84 206.824 511.328 205.544C510.816 204.264 510.048 203.24 509.024 202.472C508 201.618 506.72 200.978 505.184 200.552C503.648 200.04 501.855 199.784 499.808 199.784H467.808V220.264Z" fill="black"/>
+<path d="M588 0H788V200H588V0Z" fill="white"/>
+<path d="M788 0V200H588V0H788ZM592 196H784V4H592V196Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M688.5 53.376C695.839 53.376 702.537 54.0585 708.596 55.4238C714.276 56.7038 719.356 58.5462 723.836 60.9512L725.611 61.9277C730.001 64.4027 733.716 67.4402 736.756 71.04C740.084 74.7947 742.601 79.0612 744.308 83.8398C746.014 88.6185 746.868 93.9092 746.868 99.7119C746.868 105.429 746.014 110.677 744.308 115.456C742.601 120.235 740.084 124.501 736.756 128.256C734.215 131.197 731.202 133.796 727.719 136.057L743.028 154.624H714.484L705.826 144.309C700.513 145.295 694.738 145.792 688.5 145.792C681.162 145.792 674.42 145.109 668.276 143.744C662.218 142.379 656.798 140.415 652.02 137.855C647.326 135.21 643.359 132.01 640.116 128.256C636.874 124.501 634.356 120.235 632.564 115.456C630.858 110.677 630.004 105.429 630.004 99.7119C630.004 93.9092 630.858 88.6185 632.564 83.8398C634.271 79.0612 636.746 74.7947 639.988 71.04C643.316 67.2001 647.326 63.9994 652.02 61.4395C656.798 58.7941 662.218 56.7892 668.276 55.4238C674.42 54.0585 681.161 53.376 688.5 53.376ZM688.5 73.8555C684.234 73.8555 680.394 74.1973 676.98 74.8799C673.567 75.5626 670.58 76.6294 668.02 78.0801C665.46 79.4454 663.327 81.1523 661.62 83.2002C659.999 85.2482 658.762 87.6376 657.908 90.3682C657.055 93.0988 656.628 96.2134 656.628 99.7119C656.628 103.125 657.055 106.197 657.908 108.928C658.762 111.573 659.999 113.962 661.62 116.096C663.327 118.144 665.46 119.851 668.02 121.216C670.58 122.581 673.567 123.605 676.98 124.288C680.394 124.971 684.234 125.312 688.5 125.312C689.773 125.312 691.01 125.279 692.212 125.216L680.564 110.848H706.932L713.065 118.287C713.819 117.606 714.506 116.876 715.124 116.096C716.831 113.962 718.111 111.573 718.964 108.928C719.817 106.197 720.244 103.125 720.244 99.7119C720.244 96.2134 719.817 93.0988 718.964 90.3682C718.111 87.6376 716.831 85.2481 715.124 83.2002C713.503 81.1522 711.412 79.4454 708.852 78.0801C706.292 76.6295 703.305 75.5625 699.892 74.8799C696.478 74.1973 692.681 73.8555 688.5 73.8555Z" fill="black"/>
+<path d="M784 -120H984V80H784V-120Z" fill="white"/>
+<path d="M984 -120V80H784V-120H984ZM788 76H980V-116H788V76Z" fill="black"/>
+<path d="M884.604 -31.3418L908.769 -64.7998H939.232L896.864 -9.4834V24.7998H870.88V-9.76758L828.768 -64.7998H860.768L884.604 -31.3418Z" fill="black"/>
+<path d="M784 76H984V276H784V76Z" fill="white"/>
+<path d="M984 76V276H784V76H984ZM788 272H980V80H788V272Z" fill="black"/>
+<path d="M884.604 164.658L908.769 131.2H939.232L896.864 186.517V220.8H870.88V186.232L828.768 131.2H860.768L884.604 164.658Z" fill="black"/>
+<path d="M984 0V200H0V0H984ZM4 196H980V4H4V196Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_458_171">
+<rect width="984" height="200" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/examples/src/components/CopyButton.tsx

@@ -0,0 +1,26 @@
+import { cn } from '../lib/cn'
+import { useCopyText } from '../lib/hooks/useCopyText'
+
+type CopyButtonProps = {
+  text: string
+}
+
+export default function CopyButton({ text }: CopyButtonProps) {
+  const [isCopying, copyText] = useCopyText()
+
+  return (
+    <button
+      onClick={() => copyText(text)}
+      data-copying={isCopying}
+      className="inline-flex clean-btn cursor-pointer p-10"
+    >
+      <span
+        className={cn('text-p0 uppercase tracking-10 py-4 border-b', {
+          'animate-flicker-opacity': isCopying,
+        })}
+      >
+        {isCopying ? 'Copied!' : 'Copy'}
+      </span>
+    </button>
+  )
+}

package/examples/src/components/Divider.tsx

@@ -0,0 +1,3 @@
+export default function Divider({ value = ' // ' }: { value?: string }) {
+  return <span className="text-current opacity-40">{value}</span>
+}

package/examples/src/components/Footer.astro

@@ -0,0 +1,7 @@
+---
+import MarqyCredits from "./MarqyCredits";
+---
+
+<footer class="border-t">
+  <MarqyCredits client:load />
+</footer>

package/examples/src/components/InUse.astro

@@ -0,0 +1,89 @@
+---
+import { getImage } from 'astro:assets'
+
+import SectionHeadline from '../components/SectionHeadline'
+import InUseExamples from '../components/InUseExamples'
+
+import baggu from '../assets/baggu.jpg'
+import bluesky from '../assets/bluesky.jpg'
+import clams from '../assets/clams-lol.jpg'
+import coconutClub from '../assets/coconut-club.jpg'
+import lucci from '../assets/lucci.jpg'
+import philaMuseum from '../assets/phila-museum.jpg'
+import redRooster from '../assets/red-rooster.jpg'
+import sanity from '../assets/sanity.jpg'
+import usal from '../assets/usal.jpg'
+import vacation from '../assets/vacation.jpg'
+
+const examples = [
+  {
+    title: 'baggu.com',
+    url: 'https://baggu.com/',
+    img: baggu,
+  },
+  {
+    title: 'vacation.inc',
+    url: 'https://www.vacation.inc/',
+    img: vacation,
+  },
+  {
+    title: 'clams.lol',
+    url: 'https://www.clams.lol/',
+    img: clams,
+  },
+  {
+    title: 'sanity.io',
+    url: 'https://www.sanity.io/',
+    img: sanity,
+  },
+  {
+    title: 'thecoconutclubexuma.com',
+    url: 'https://www.thecoconutclubexuma.com/',
+    img: coconutClub,
+  },
+  {
+    title: 'luccilambrusco.com',
+    url: 'https://www.luccilambrusco.com/',
+    img: lucci,
+  },
+  {
+    title: 'bsky.social',
+    url: 'https://bsky.social/about',
+    img: bluesky,
+  },
+  {
+    title: 'philamuseum.org',
+    url: 'https://www.philamuseum.org/',
+    img: philaMuseum,
+  },
+  {
+    title: 'redroostercoffee.com',
+    url: 'https://www.redroostercoffee.com/',
+    img: redRooster,
+  },
+  {
+    title: 'usalproject.com',
+    url: 'https://www.usalproject.com/',
+    img: usal,
+  }
+]
+
+const examplesWithImages = await Promise.all(
+  examples.map(async (example) => ({
+    ...example,
+    img: await getImage({
+      src: example.img,
+      format: 'avif',
+      widths: [600, 1200],
+      sizes: '(min-width: 768px) 50vw, 75vw',
+    }),
+  }))
+)
+---
+
+<section class="relative overflow-hidden border-t">
+  <SectionHeadline text="In Use" client:load />
+  <div class="py-20 md:px-80 md:py-40">
+    <InUseExamples examples={examplesWithImages} client:load />
+  </div>
+</section>

package/examples/src/components/InUseExamples.tsx

@@ -0,0 +1,60 @@
+import { Marqy } from 'marqy'
+
+interface OptimizedImage {
+  src: string
+  srcSet: { attribute: string }
+  attributes: Record<string, string>
+}
+
+interface Example {
+  title: string
+  url: string
+  img: OptimizedImage
+}
+
+export default function InUseExamples({ examples }: { examples: Example[] }) {
+  return (
+    <section>
+      <Marqy speed={1.2} pauseOnHover>
+        <div className="flex gap-20 pl-20 sm:gap-40 sm:pl-40">
+          {examples.map((example, i) => (
+            <div
+              key={i}
+              className="group relative flex flex-col gap-10 w-[50vw] md:w-[25vw]"
+            >
+              <div className="flex flex-col gap-10">
+                <figure className="relative bg-white/10 aspect-16/10 rounded-5 overflow-hidden isolate">
+                  <Marqy
+                    direction={i % 2 === 1 ? 'up' : 'down'}
+                    className="overflow-hidden h-full"
+                  >
+                    <img
+                      src={example.img.src}
+                      srcSet={example.img.srcSet.attribute}
+                      sizes="(min-width: 1000px) 25vw, 50vw"
+                      alt=""
+                      className="w-full h-full object-cover"
+                    />
+                  </Marqy>
+                </figure>
+
+                <div className="bg-white/10 text-center py-10 rounded-5">
+                  <a
+                    href={`${example.url}?ref=marqy`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex justify-center after:absolute after:inset-0 after:z-1"
+                  >
+                    <span className="text-p0 group-hover:animate-flicker-opacity group-hover:text-neon">
+                      {example.title}
+                    </span>
+                  </a>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </Marqy>
+    </section>
+  )
+}

package/examples/src/components/MarqyCredits.tsx

@@ -0,0 +1,33 @@
+import { Marqy } from 'marqy'
+
+import Divider from './Divider'
+
+export default function MarqyCredits() {
+  return (
+    <section>
+      <Marqy speed={1} direction="right" pauseOnHover>
+        <p className="uppercase py-20 text-p1 whitespace-pre">
+          <Divider />
+          Built_by{' '}
+          <a
+            href="https://www.nickdimatteo.com"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-neon hover:animate-flicker-opacity"
+          >
+            Nick DiMatteo
+          </a>{' '}
+          &{' '}
+          <a
+            href="https://www.mikewagz.com"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-neon hover:animate-flicker-opacity"
+          >
+            Mike Wagz
+          </a>
+        </p>
+      </Marqy>
+    </section>
+  )
+}

package/examples/src/components/MarqyHero.tsx

@@ -0,0 +1,77 @@
+import { Marqy } from 'marqy'
+
+import Divider from './Divider'
+import Tile from './Tile'
+
+export default function MarqyHero() {
+  return (
+    <div>
+      {/* Hero Logo */}
+      <header className="flex justify-center overflow-hidden gap-px bg-white cursor-cell">
+        <Marqy
+          className="h-[clamp(2rem,18vw,40rem)] bg-black"
+          direction="up"
+          speed={1}
+        >
+          <Tile value="m" />
+        </Marqy>
+        <Marqy
+          className="h-[clamp(2rem,18vw,40rem)] bg-black"
+          direction="down"
+          speed={1}
+        >
+          <Tile value="a" />
+        </Marqy>
+        <Marqy
+          className="h-[clamp(2rem,18vw,40rem)] bg-black"
+          direction="up"
+          speed={1}
+        >
+          <Tile value="r" />
+        </Marqy>
+        <Marqy
+          className="h-[clamp(2rem,18vw,40rem)] bg-black"
+          direction="down"
+          speed={1}
+        >
+          <Tile value="q" />
+        </Marqy>
+        <Marqy
+          className="h-[clamp(2rem,18vw,40rem)] bg-black"
+          direction="up"
+          speed={1}
+        >
+          <Tile value="y" />
+        </Marqy>
+      </header>
+
+      {/* Tagline */}
+      <Marqy direction="right" className="bg-white text-black">
+        <p className="text-p1 py-10 sm:py-20 uppercase whitespace-pre">
+          <Divider />
+          High-fidelity loops for modern interfaces
+        </p>
+      </Marqy>
+
+      <Marqy className="bg-white/70 text-black">
+        <p className="text-p1 py-10 sm:py-20 uppercase whitespace-pre">
+          <Divider />
+          Light as a feather at under 1kB gzipped
+        </p>
+      </Marqy>
+
+      <Marqy className="bg-white/50 text-black">
+        <div className="flex">
+          <p className="text-p1 py-10 sm:py-20 uppercase whitespace-pre">
+            <Divider value=" + " />
+            Synchronized speeds that perfectly loop
+          </p>
+          <p className="text-p1 py-10 sm:py-20 uppercase whitespace-pre">
+            <Divider value=" + " />
+            CSS-based animations
+          </p>
+        </div>
+      </Marqy>
+    </div>
+  )
+}

package/examples/src/components/MarqyInteractiveDemo.tsx

@@ -0,0 +1,46 @@
+import { useReducer } from 'react'
+import { Marqy } from 'marqy'
+
+import { zeroPad } from '../lib/helpers'
+
+export default function MarqyInteractiveDemo() {
+  const [count, increment] = useReducer((x: number) => (x >= 20 ? 0 : x + 1), 1)
+
+  return (
+    <section>
+      <Marqy speed={0.7} direction="right" pauseOnHover className="border-b">
+        <div className="flex items-center gap-5">
+          <p className="text-p1 py-10 uppercase whitespace-pre">{` Interactivity: `}</p>
+          <button
+            onClick={increment}
+            className="clean-btn cursor-pointer bg-white text-black text-p0 uppercase px-20 py-15"
+          >
+            Count_
+            <span
+              className="tabular-nums"
+              style={{
+                minWidth: '2ch',
+                display: 'inline-block',
+                textAlign: 'end',
+              }}
+            >
+              {zeroPad(count, 2)}
+            </span>
+          </button>
+        </div>
+      </Marqy>
+
+      <Marqy speed={0.4} className="border-b">
+        <div className="flex items-center gap-10 pr-10 py-20">
+          <p className="text-p1 uppercase">Render Anything</p>
+          <figure className="flex aspect-square rounded-5 overflow-hidden isolate bg-white/10 w-100">
+            <img
+              src="https://is1-ssl.mzstatic.com/image/thumb/Music211/v4/3e/2a/b9/3e2ab937-0ea6-c02b-3c57-afe28f9aa2a2/198704984693_Cover.jpg/632x632bb.webp"
+              alt=""
+            />
+          </figure>
+        </div>
+      </Marqy>
+    </section>
+  )
+}