anentrypoint-design 0.0.10 → 0.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "247420 design system SDK — webjsx + modified ripple-ui, single-file ESM bundle for reproducible use of the AnEntrypoint design.",
   "type": "module",
   "main": "./dist/247420.js",

package/src/app.js

@@ -1,26 +1,26 @@
 // Unified 247420 single-page app. Replaces the separate homepage,
 // project_page, writing, and manifesto entry points with one WebJSX page
 // that uses the design-system components and hash routing.
-import { h, mount, installStyles, components as C } from './index.js';
+import { h, mount, installStyles, components as C, motion } from './index.js';
 
 const data = {
-    nav: [['works', '#/works'], ['writing', '#/writing'], ['manifesto', '#/manifesto'], ['source ↗', 'https://github.com/AnEntrypoint']],
+    nav: [['works', '#/works'], ['project', '#/project'], ['writing', '#/writing'], ['manifesto', '#/manifesto'], ['source ↗', 'https://github.com/AnEntrypoint']],
     works: [
-        { code: '001', title: 'gm', sub: 'state machine for coding agents', meta: '2025 · 3k★', body: 'a tiny deterministic state machine that lets llms code without losing their minds. it thinks so you don\'t have to (as much).' },
-        { code: '002', title: 'zellous', sub: 'production push-to-talk', meta: '2024 · live', body: 'hold the button. talk. someone on the other side hears you. opus codec, dynamic rooms, 50-message replay.' },
-        { code: '003', title: 'spoint', sub: 'spawnpoint', meta: '2024 · live', body: 'the directory for "where should we start?" one url, one room, everyone lands in the same place.' },
-        { code: '004', title: 'flatspace', sub: 'flat-file cms', meta: 'wip', body: 'still figuring out what to say about this one. come back tuesday.' },
-        { code: '005', title: 'thebird', sub: '—', meta: 'wip', body: 'yes, the name is a reference. no, we won\'t tell you to what.' },
-        { code: '006', title: 'mcp-repl', sub: 'repl for mcp', meta: '2024 · live', body: 'executenodejs, executedeno, executebash, astgrep_search.' },
-        { code: '007', title: 'mutagen', sub: 'adaptogen server', meta: '2024 · live', body: 'everything to do with a dapp deg3n. read the source.' },
-        { code: '008', title: 'techshaman', sub: 'member site', meta: 'ongoing', body: 'the official website for the techshaman.' }
+        { code: '001', title: 'gm', sub: 'state machine for coding agents', meta: '2025 · 3k★', body: 'a tiny deterministic state machine that lets llms code without losing their minds. it thinks so you don\'t have to (as much).', href: '#/project', source: 'https://github.com/AnEntrypoint/gm' },
+        { code: '002', title: 'zellous', sub: 'production push-to-talk', meta: '2024 · live', body: 'hold the button. talk. someone on the other side hears you. opus codec, dynamic rooms, 50-message replay.', href: 'https://zellous.com', source: 'https://github.com/AnEntrypoint/zellous' },
+        { code: '003', title: 'spoint', sub: 'spawnpoint', meta: '2024 · live', body: 'the directory for "where should we start?" one url, one room, everyone lands in the same place.', href: 'https://spoint.world', source: 'https://github.com/AnEntrypoint/spoint' },
+        { code: '004', title: 'flatspace', sub: 'flat-file cms', meta: 'wip', body: 'still figuring out what to say about this one. come back tuesday.', href: 'https://github.com/AnEntrypoint/flatspace', source: 'https://github.com/AnEntrypoint/flatspace' },
+        { code: '005', title: 'thebird', sub: '—', meta: 'wip', body: 'yes, the name is a reference. no, we won\'t tell you to what.', href: 'https://github.com/AnEntrypoint/thebird', source: 'https://github.com/AnEntrypoint/thebird' },
+        { code: '006', title: 'mcp-repl', sub: 'repl for mcp', meta: '2024 · live', body: 'executenodejs, executedeno, executebash, astgrep_search.', href: 'https://github.com/AnEntrypoint/mcp-repl', source: 'https://github.com/AnEntrypoint/mcp-repl' },
+        { code: '007', title: 'mutagen', sub: 'adaptogen server', meta: '2024 · live', body: 'everything to do with a dapp deg3n. read the source.', href: 'https://github.com/AnEntrypoint/mutagen', source: 'https://github.com/AnEntrypoint/mutagen' },
+        { code: '008', title: 'techshaman', sub: 'member site', meta: 'ongoing', body: 'the official website for the techshaman.', href: 'https://github.com/AnEntrypoint/techshaman', source: 'https://github.com/AnEntrypoint/techshaman' }
     ],
     posts: [
-        { date: '2026.04.14', title: 'we were here first', tag: 'lore' },
-        { date: '2026.03.22', title: 'gm v0.4 postmortem, or: why state machines', tag: 'gm' },
-        { date: '2026.02.09', title: 'push-to-talk is a protocol, not a feature', tag: 'zellous' },
-        { date: '2025.12.11', title: 'against the vibe-coded interface', tag: 'manifesto' },
-        { date: '2025.10.03', title: 'notes on shipping weird', tag: 'notes' }
+        { date: '2026.04.14', title: 'we were here first', tag: 'lore', href: 'https://247420.xyz' },
+        { date: '2026.03.22', title: 'gm v0.4 postmortem, or: why state machines', tag: 'gm', href: 'https://github.com/AnEntrypoint/gm' },
+        { date: '2026.02.09', title: 'push-to-talk is a protocol, not a feature', tag: 'zellous', href: 'https://github.com/AnEntrypoint/zellous' },
+        { date: '2025.12.11', title: 'against the vibe-coded interface', tag: 'manifesto', href: '#/manifesto' },
+        { date: '2025.10.03', title: 'notes on shipping weird', tag: 'notes', href: 'https://github.com/AnEntrypoint' }
     ],
     manifesto: [
         { text: 'we are the creative department of the internet. always open (24/7). always a little bit high on possibility (420).' },
@@ -59,6 +59,9 @@ function parseRoute() {
 window.addEventListener('hashchange', () => {
     state.route = parseRoute();
     render();
+    requestAnimationFrame(() => {
+        motion.animateSelector('.app-main', 'fadeIn', { duration: 'var(--motion-base)' });
+    });
 });
 
 let render;
@@ -99,7 +102,18 @@ function pageMain() {
         return C.ProjectView({
             project: data.project,
             copied: state.copied,
-            onCopy: (cmd) => { navigator.clipboard?.writeText(cmd); state.copied = true; render(); setTimeout(() => { state.copied = false; render(); }, 1200); }
+            onCopy: (cmd) => {
+                navigator.clipboard?.writeText(cmd);
+                state.copied = true;
+                render();
+                requestAnimationFrame(() => {
+                    motion.animateSelector('.cli .copy', 'pulse', { duration: 'var(--motion-fast)' });
+                });
+                setTimeout(() => {
+                    state.copied = false;
+                    render();
+                }, 1200);
+            }
         });
     }
     if (r === 'writing') {
@@ -110,7 +124,15 @@ function pageMain() {
     }
     return C.HomeView({
         state, onNav: navigate,
-        onToggleWork: (i) => { state.opened = i; render(); },
+        onToggleWork: (i) => {
+            state.opened = i;
+            render();
+            if (i >= 0) {
+                requestAnimationFrame(() => {
+                    motion.animateSelector(`[data-work-index="${i}"]`, 'fadeInUp', { duration: 'var(--motion-fast)' });
+                });
+            }
+        },
         works: data.works, posts: data.posts, manifesto: data.manifesto,
         currentlyShipping: data.currentlyShipping
     });
@@ -129,3 +151,6 @@ function App() {
 await installStyles();
 const root = document.getElementById('root');
 render = mount(root, App);
+requestAnimationFrame(() => {
+    motion.animateSelector('.app-main', 'fadeIn', { duration: 'var(--motion-base)' });
+});

package/src/components.js

@@ -89,11 +89,19 @@ export function Status({ left = [], right = [] } = {}) {
 }
 
 export function AppShell({ topbar, crumb, side, main, status, narrow } = {}) {
+    const hasSide = Boolean(side);
+    const sideMotionClass = hasSide
+        ? ' animate__animated animate__fadeInLeft'
+        : ' animate__animated animate__fadeOutLeft';
+    const sideNode = hasSide
+        ? side
+        : h('aside', { class: 'app-side', 'aria-hidden': 'true' });
+
     return h('div', { class: 'app' },
         topbar || null,
         crumb || null,
-        h('div', { class: 'app-body' + (side ? '' : ' no-side') },
-            side || null,
+        h('div', { class: 'app-body' + (hasSide ? '' : ' no-side') },
+            h('div', { class: 'app-side-shell' + sideMotionClass }, sideNode),
             h('main', { class: 'app-main' + (narrow ? ' narrow' : '') }, ...(Array.isArray(main) ? main : [main]))
         ),
         status || null
@@ -176,7 +184,7 @@ export function Changelog({ entries = [] }) {
         children: entries.map((e, i) =>
             h('div', { key: i, class: 'row', style: 'grid-template-columns:100px 70px 1fr' },
                 h('span', { class: 'code' }, e.date),
-                h('span', { style: 'color:var(--panel-accent);font-family:var(--ff-mono);font-size:12px' }, e.ver),
+                h('span', { style: 'color:var(--panel-accent);font-family:var(--ff-mono);font-size:14px' }, e.ver),
                 h('span', { class: 'title' }, e.msg)
             )
         )
@@ -196,7 +204,11 @@ export function WorksList({ works = [], openedIndex = -1, onToggle }) {
                     active: isOpen,
                     onClick: () => onToggle && onToggle(isOpen ? -1 : i)
                 }),
-                isOpen ? h('div', { style: 'padding:14px 20px 18px 86px;background:var(--panel-2);color:var(--panel-text);font-size:13px;line-height:1.6' },
+                isOpen ? h('div', {
+                    class: 'work-detail',
+                    'data-work-index': String(i),
+                    style: 'padding:14px 20px 18px 86px;background:var(--panel-2);color:var(--panel-text);font-size:13px;line-height:1.6'
+                },
                     h('p', { style: 'margin:0 0 12px 0;max-width:64ch' }, w.body),
                     h('div', { style: 'display:flex;gap:8px' },
                         Btn({ primary: true, href: w.href || '#', children: 'open ↗' }),

package/src/index.js

@@ -2,6 +2,7 @@ import * as webjsx from '../vendor/webjsx/index.js';
 import { loadCss, scope } from './styles.js';
 import { registerDeckStage, getDeckStage } from './deck-stage.js';
 import * as components from './components.js';
+import * as motion from './motion.js';
 
 let _installed = false;
 export async function installStyles(target) {
@@ -12,6 +13,7 @@ export async function installStyles(target) {
     tag.setAttribute('data-247420', '');
     tag.textContent = css;
     root.appendChild(tag);
+    if (!target) motion.installMotion();
     if (!target) _installed = true;
 }
 
@@ -19,12 +21,17 @@ export function mount(rootEl, viewFn, { autoScope = true } = {}) {
     if (autoScope && rootEl && rootEl.classList && !rootEl.classList.contains(scope.slice(1))) {
         rootEl.classList.add(scope.slice(1));
     }
-    const render = () => webjsx.applyDiff(rootEl, viewFn(render));
+    const render = () => {
+        webjsx.applyDiff(rootEl, viewFn(render));
+        requestAnimationFrame(() => {
+            motion.animateTree(rootEl);
+        });
+    };
     render();
     return render;
 }
 
-export { webjsx, loadCss, scope, registerDeckStage, getDeckStage, components };
+export { webjsx, loadCss, scope, registerDeckStage, getDeckStage, components, motion };
 export const h = webjsx.createElement;
 export const applyDiff = webjsx.applyDiff;
-export default { webjsx, loadCss, scope, installStyles, mount, h, applyDiff, registerDeckStage, getDeckStage, components };
+export default { webjsx, loadCss, scope, installStyles, mount, h, applyDiff, registerDeckStage, getDeckStage, components, motion };

package/src/motion.js

@@ -0,0 +1,122 @@
+const ANIMATE_CSS_ID = 'animate-style-cdn';
+const ANIMATE_CSS_HREF = 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css';
+const MOTION_STYLE_ID = 'ds-247420-motion';
+
+function hasDom() {
+    return typeof document !== 'undefined';
+}
+
+export function shouldReduceMotion() {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return false;
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
+export function installMotion() {
+    if (!hasDom()) return;
+
+    if (!document.getElementById(ANIMATE_CSS_ID)) {
+        const link = document.createElement('link');
+        link.id = ANIMATE_CSS_ID;
+        link.rel = 'stylesheet';
+        link.href = ANIMATE_CSS_HREF;
+        document.head.appendChild(link);
+    }
+
+    if (!document.getElementById(MOTION_STYLE_ID)) {
+        const style = document.createElement('style');
+        style.id = MOTION_STYLE_ID;
+        style.textContent = `
+:root {
+  --motion-fast: 220ms;
+  --motion-base: 420ms;
+  --motion-slow: 720ms;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animate__animated {
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 1ms !important;
+  }
+}
+`.trim();
+        document.head.appendChild(style);
+    }
+}
+
+export function animateElement(el, name, {
+    duration = null,
+    delay = null,
+    speedClass = '',
+    repeat = null,
+    cleanup = true
+} = {}) {
+    if (!el || !name || shouldReduceMotion()) return Promise.resolve(false);
+
+    const classes = ['animate__animated', `animate__${name}`];
+    if (speedClass) classes.push(`animate__${speedClass}`);
+
+    el.classList.remove(...classes);
+    void el.offsetWidth;
+    el.classList.add(...classes);
+
+    if (duration) el.style.setProperty('--animate-duration', duration);
+    if (delay) el.style.setProperty('--animate-delay', delay);
+    if (repeat != null) el.style.setProperty('--animate-repeat', String(repeat));
+
+    return new Promise((resolve) => {
+        const onEnd = () => {
+            if (cleanup) {
+                el.classList.remove(...classes);
+            }
+            if (duration) el.style.removeProperty('--animate-duration');
+            if (delay) el.style.removeProperty('--animate-delay');
+            if (repeat != null) el.style.removeProperty('--animate-repeat');
+            resolve(true);
+        };
+        el.addEventListener('animationend', onEnd, { once: true });
+    });
+}
+
+export function animateSelector(selector, name, opts = {}) {
+    if (!hasDom()) return Promise.resolve(false);
+    const el = document.querySelector(selector);
+    return animateElement(el, name, opts);
+}
+
+function defaultEffectFor(el) {
+    const tag = String(el.tagName || '').toLowerCase();
+    if (tag === 'aside') return 'fadeInLeft';
+    if (tag === 'header') return 'fadeInDown';
+    if (tag === 'footer') return 'fadeInUp';
+    if (tag === 'main' || tag === 'section' || tag === 'article') return 'fadeIn';
+    if (tag === 'a' || tag === 'button' || tag === 'input' || tag === 'textarea' || tag === 'select') return 'fadeInUp';
+    return 'fadeIn';
+}
+
+export function animateTree(root, {
+    selector = '*',
+    baseDelayMs = 14,
+    duration = 'var(--motion-base)'
+} = {}) {
+    if (!hasDom() || !root || shouldReduceMotion()) return 0;
+
+    const nodes = Array.from(root.querySelectorAll(selector));
+    let animated = 0;
+
+    nodes.forEach((el) => {
+        if (!el || !el.classList) return;
+        if (el.matches('script,style,link,meta,title')) return;
+        if (el.hasAttribute('data-no-motion')) return;
+        if (el.dataset.motionApplied === '1') return;
+
+        const effect = el.dataset.motionEffect || defaultEffectFor(el);
+        el.classList.add('animate__animated', `animate__${effect}`);
+        el.style.setProperty('--animate-duration', duration);
+        el.style.setProperty('--animate-delay', `${animated * baseDelayMs}ms`);
+        el.dataset.motionApplied = '1';
+        animated += 1;
+    });
+
+    return animated;
+}