alloc · aleclarson · Jul 13, 2025 · Jul 14, 2025
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+dist
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1,2 @@
+# Disable lockfile generation
+package-lock=false
diff --git a/index.html b/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link href="https://framerusercontent.com/images/3aQX5dnH5Yqgsn98QXKF2ZXxIE.png" rel="icon" media="(prefers-color-scheme: light)" />
+    <link href="https://framerusercontent.com/images/3aQX5dnH5Yqgsn98QXKF2ZXxIE.png" rel="icon" media="(prefers-color-scheme: dark)" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Preact In Motion</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "vite-preact-ts-starter",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@preact/signals": "^2",
+    "motion": "^12",
+    "preact": "^10",
+    "preact-in-motion": "*",
+    "radashi": "^12"
+  },
+  "devDependencies": {
+    "@preact/preset-vite": "^2",
+    "typescript": "^5.8.3",
+    "vite": "^7.0.4",
+    "vite-tsconfig-paths": "^5.1.4"
+  }
+}
diff --git a/src/main.tsx b/src/main.tsx
@@ -0,0 +1,5 @@
+import 'preact-in-motion'
+import { navigate } from './navigate'
+import './styles/main.css'
+
+navigate(new URL(location.href))
diff --git a/src/navigate.tsx b/src/navigate.tsx
@@ -0,0 +1,47 @@
+import { Fragment, render, type ComponentType } from 'preact'
+
+const pages = import.meta.glob(['./**/index.tsx', './404.tsx'], {
+  base: './pages/',
+})
+
+const layouts = import.meta.glob('./**/layout.tsx', {
+  base: './pages/',
+})
+
+export function navigate(url: URL) {
+  const currentPage = url.pathname
+    .replace(/^\/?/, './')
+    .replace(/\/?$/, '/index.tsx')
+
+  const getPageModule = (pages[currentPage] ?? pages['404.tsx']) as
+    | (() => Promise<{ default: ComponentType }>)
+    | undefined
+
+  let getLayoutModule: typeof getPageModule
+  for (
+    let parts = currentPage.split('/').slice(0, -1);
+    parts.length > 0;
+    parts.pop()
+  ) {
+    getLayoutModule = layouts[
+      parts.join('/') + '/layout.tsx'
+    ] as typeof getLayoutModule
+  }
+
+  getLayoutModule ??= async () => ({
+    default: Fragment,
+  })
+
+  if (getPageModule) {
+    Promise.all([getPageModule(), getLayoutModule()]).then(
+      ([{ default: Page }, { default: Layout }]) => {
+        render(
+          <Layout>
+            <Page />
+          </Layout>,
+          document.getElementById('app')!
+        )
+      }
+    )
+  }
+}
diff --git a/src/pages/animate-presence/index.tsx b/src/pages/animate-presence/index.tsx
@@ -0,0 +1,3 @@
+export default () => {
+  return <div>AnimatePresence</div>
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -0,0 +1,136 @@
+import { easeInOut, spring } from 'motion'
+import 'preact-in-motion'
+import { AnimatePresence } from 'preact-in-motion'
+import { useState } from 'preact/hooks'
+import { withExamples } from '~/utils/withExamples'
+import { withVisibility } from '~/utils/withVisibility'
+
+const BasicAnimation = ({ visible }: { visible: boolean }) => {
+  return (
+    <div
+      animate={{
+        opacity: visible ? 1 : 0,
+        duration: 1,
+        ease: easeInOut,
+      }}>
+      Basic Animation
+    </div>
+  )
+}
+
+// Lifecycle Animations Component
+const LifecycleAnimations = () => {
+  return (
+    <>
+      <div>Lifecycle Animations</div>
+      <button
+        animate={{
+          initial: {
+            opacity: 0,
+          },
+          enter: {
+            opacity: 1,
+          },
+          whileHover: {
+            transform: 'scale(1.3)',
+            duration: 0.2,
+          },
+        }}>
+        Hover me
+      </button>
+    </>
+  )
+}
+
+// AnimatePresence Component
+const AnimatePresenceExample = ({ visible }: { visible: boolean }) => {
+  return (
+    <AnimatePresence>
+      {visible && (
+        <h3
+          animate={{
+            leave: {
+              opacity: 0,
+            },
+          }}>
+          Fade Out Then Unmount
+        </h3>
+      )}
+    </AnimatePresence>
+  )
+}
+
+// AnimatePresence with Multiple Elements Component
+const AnimatePresenceMultiple = () => {
+  const [isHappy, setIsHappy] = useState(true)
+
+  return (
+    <div class="column">
+      <AnimatePresence enterDelay={300}>
+        {isHappy ? (
+          <span
+            key="happy"
+            animate={{
+              initial: { transform: 'translateX(50px)', opacity: 0 },
+              enter: { transform: 'translateX(0)', opacity: 1 },
+              leave: { reverse: true },
+            }}>
+            😄 I'm happy!
+          </span>
+        ) : (
+          <span
+            key="sad"
+            animate={{
+              initial: { transform: 'translateX(-50px)', opacity: 0 },
+              enter: { transform: 'translateX(0)', opacity: 1 },
+              leave: { reverse: true },
+            }}>
+            😢 I'm sad...
+          </span>
+        )}
+      </AnimatePresence>
+      <button onClick={() => setIsHappy(!isHappy)}>Toggle Mood</button>
+    </div>
+  )
+}
+
+// Spring Animation Component
+const SpringAnimation = () => {
+  return (
+    <div
+      animate={{
+        transform: 'scale(1.1)',
+        type: spring,
+        bounce: 1,
+        duration: 3,
+        repeat: Infinity,
+      }}>
+      Spring Animation
+    </div>
+  )
+}
+
+// Easing Function Component
+const EasingFunction = () => {
+  return (
+    <div
+      animate={{
+        color: ['magenta', 'orange', 'green'],
+        ease: easeInOut,
+        duration: 3,
+        repeat: Infinity,
+        repeatType: 'reverse',
+      }}>
+      Easing Function Animation
+    </div>
+  )
+}
+
+export default withExamples([
+  withVisibility(BasicAnimation),
+  LifecycleAnimations,
+  withVisibility(AnimatePresenceExample),
+  AnimatePresenceMultiple,
+  SpringAnimation,
+  EasingFunction,
+])
diff --git a/src/pages/layout.tsx b/src/pages/layout.tsx
@@ -0,0 +1,17 @@
+import type { ComponentChildren } from 'preact'
+
+export default (props: { children: ComponentChildren }) => {
+  return (
+    <main>
+      <div class="row" style={{ justifyContent: 'space-between' }}>
+        <h1>Preact In Motion</h1>
+        <nav class="row">
+          <a href="/">Basic</a>
+          <a href="/animate-presence">AnimatePresence</a>
+          <a href="/options">Options</a>
+        </nav>
+      </div>
+      {props.children}
+    </main>
+  )
+}
diff --git a/src/pages/options/index.tsx b/src/pages/options/index.tsx
@@ -0,0 +1,22 @@
+import { withExamples } from '~/utils/withExamples'
+import { withVisibility } from '~/utils/withVisibility'
+
+const TransitionOption = ({ visible }: { visible: boolean }) => {
+  return (
+    <div
+      animate={{
+        opacity: visible ? 1 : 0,
+        transform: `scale(${visible ? 1 : 0.5})`,
+        transition: {
+          duration: 0.2,
+          opacity: { duration: 1 },
+        },
+      }}>
+      Transition Option
+    </div>
+  )
+}
+
+export default withExamples([
+  withVisibility(TransitionOption), //
+])
diff --git a/src/styles/base.css b/src/styles/base.css
@@ -0,0 +1,51 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+}
+
+h3 {
+  margin: 0;
+}
+
+main {
+  padding: 20px;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
diff --git a/src/styles/main.css b/src/styles/main.css
@@ -0,0 +1,37 @@
+@import './base.css';
+
+.examples {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: start;
+  gap: 16px;
+}
+
+.example {
+  justify-content: center;
+  min-height: 100px;
+  border-radius: 12px;
+  background-color: #2a3a45;
+  padding: 8px 40px;
+}
+
+@media (prefers-color-scheme: light) {
+  .example {
+    background-color: #e6f0f5;
+  }
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 16px;
+}
diff --git a/src/utils/withExamples.tsx b/src/utils/withExamples.tsx
@@ -0,0 +1,27 @@
+import type { ComponentType } from 'preact'
+import { isArray } from 'radashi'
+
+export function withExamples(
+  components: ComponentType[] | Record<string, ComponentType[]>
+) {
+  return () => (
+    <div class="examples">
+      {isArray(components)
+        ? components.map(Component => (
+            <div class="example column">
+              <Component />
+            </div>
+          ))
+        : Object.entries(components).map(([title, components]) => (
+            <>
+              <h2>{title}</h2>
+              {components.map(Component => (
+                <div class="example column">
+                  <Component />
+                </div>
+              ))}
+            </>
+          ))}
+    </div>
+  )
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# Disable lockfile generation
		package-lock=false