Add home anim

Author: Adam Plesnik

docs/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "localforage": "^1.10.0",
+    "lucide-react": "^0.367.0",
     "match-sorter": "^6.3.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -19,6 +20,7 @@
     "tailwindcss": "^3.4.3"
   },
   "devDependencies": {
+    "@adam.plesnik/tailwindcss-scroll-driven-animations": "^0.1.1",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.2.0",

docs/src/components/Banner.tsx

@@ -0,0 +1,16 @@
+import { WandSparkles } from 'lucide-react'
+
+const Banner = () => {
+  return (
+    <div className="mb-4 mt-8 flex items-center gap-4 rounded-lg border border-amber-400 bg-amber-50 px-4 py-3 text-sm  dark:border-amber-600 dark:bg-stone-700/30">
+      <WandSparkles
+        className="size-6 shrink-0 text-amber-500 dark:text-amber-600"
+        strokeWidth="1"
+      />
+      Scroll-driven animations are not yet supported by your browser. Use Chrome 116 or newer to see
+      the demos working correctly.
+    </div>
+  )
+}
+
+export default Banner

docs/src/components/Heading.tsx

@@ -0,0 +1,66 @@
+import { ArrowRight } from 'lucide-react'
+import { PropsWithChildren } from 'react'
+import { NavLink } from 'react-router-dom'
+
+const Heading = ({
+  size = 1,
+  className = '',
+  children,
+  id = '',
+  href = '',
+  hrefType = 'documentation',
+}: PropsWithChildren<TitleProps>) => {
+  const defaultClasses = 'relative w-full' + (className && ` ${className}`)
+  const anchor = id ? <a id={id} className={'absolute -top-32'} /> : ''
+  const link = href ? (
+    <NavLink to={href} className="group flex gap-1 text-xs text-fuchsia-500 dark:text-cyan-500">
+      <span className="border-b border-b-transparent transition-colors group-hover:border-b-current">
+        {hrefType === 'documentation' ? 'Documentation' : 'Demo'}
+      </span>
+      <ArrowRight className={'size-4' + (hrefType === 'demo' ? ' rotate-90' : '')} />
+    </NavLink>
+  ) : (
+    ''
+  )
+  if (size === 1) {
+    return (
+      <h1 className={defaultClasses + ' py-4 text-3xl font-semibold md:py-8'}>
+        {children}
+        {anchor}
+      </h1>
+    )
+  } else if (size === 2) {
+    return (
+      <h2 className={defaultClasses + ' pb-4 pt-12 text-4xl font-semibold'}>
+        {children}
+        {anchor}
+      </h2>
+    )
+  } else if (size === 3) {
+    return (
+      <h3 className={defaultClasses + ' flex items-center gap-4 pb-4 pt-8 text-xl font-bold'}>
+        {children}
+        {anchor}
+        {link}
+      </h3>
+    )
+  } else {
+    return (
+      <h4 className={defaultClasses + ' pb-6 text-sm opacity-50'}>
+        {children}
+        {anchor}
+      </h4>
+    )
+  }
+}
+
+export interface TitleProps {
+  children: PropsWithChildren
+  size: 1 | 2 | 3 | 4
+  className?: string
+  href?: string
+  hrefType?: 'documentation' | 'demo'
+  id?: string
+}
+
+export default Heading

docs/src/index.css

@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@keyframes appear {
+  to {
+    width: auto;
+  }
+}

docs/src/layouts/MainLayout.tsx

@@ -2,12 +2,18 @@ import { PropsWithChildren } from 'react'
 import { ScrollRestoration } from 'react-router-dom'
 import Footer from '../partials/Footer'
 import PageBackground from '../partials/PageBackground'
+import Nav from '../partials/Nav'
+import Banner from '../components/Banner'
 
 function MainLayout({ children }: PropsWithChildren<MainLayoutProps>) {
   return (
     <div className="flex flex-col items-center justify-center">
       <PageBackground />
-      <div className="relative z-10 w-full max-w-screen-lg p-8 md:p-16 lg:p-20">
+      <Nav />
+      <div className="relative z-10 w-full max-w-screen-xl p-8 md:p-16 lg:p-20">
+        <div className="supports-no-animations:block hidden">
+          <Banner />
+        </div>
         <div className="w-full">{children}</div>
         <Footer />
       </div>

docs/src/pages/Home.tsx

@@ -1,9 +1,13 @@
+import Heading from '../components/Heading.tsx'
 import MainLayout from '../layouts/MainLayout.tsx'
+import HomeIntroAnimation from '../partials/HomeIntroAnimation.tsx'
 
 function Home() {
   return (
     <MainLayout>
-      <div>Silence.</div>
+      <Heading size={1}>Tailwind CSS Scroll-driven Animations</Heading>
+      <Heading size={4}>Silence.</Heading>
+      <HomeIntroAnimation />
     </MainLayout>
   )
 }

docs/src/partials/HomeIntroAnimation.tsx

@@ -0,0 +1,22 @@
+const HomeIntroAnimation = () => {
+  const text = Array.from('Scroll. Your next superpower.')
+  return (
+    <div className="h-[1920px] w-full">
+      <div className="flex w-full font-bold text-3xl sm:text-7xl sticky top-32">
+        {text.map((letter, index) => (
+          <span
+            className="inline-block w-0 animate-appear overflow-hidden timeline"
+            style={{
+              animationRangeEnd: (index * 64 + 128).toString() + 'px',
+            }}
+            key={index}
+          >
+            {letter === ' ' ? '\u00A0' : letter}
+          </span>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default HomeIntroAnimation

docs/src/partials/Nav.tsx

@@ -0,0 +1,9 @@
+const Nav = () => {
+  return (
+    <div className="w-full flex justify-center sticky top-0">
+      <div className="max-w-screen-xl px-8 md:px-16 lg:px-20 w-full">Nav</div>
+    </div>
+  )
+}
+
+export default Nav

docs/tailwind.config.js

@@ -4,7 +4,15 @@ export default {
     files: ['./src/**/*.{js,ts,jsx,tsx}', './index.html'],
   },
   theme: {
-    extend: {},
+    extend: {
+      animation: {
+        appear: 'appear auto linear forwards',
+      },
+    },
+    supports: {
+      animations: 'animation-timeline: scroll(y)',
+      'no-animations': 'not(animation-timeline: scroll(y))',
+    },
   },
-  plugins: [],
+  plugins: [require('@adam.plesnik/tailwindcss-scroll-driven-animations')],
 }