skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-12 06:06:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: overdrive demo works with hover slider, no AI slop

Browse Source 
The demo must be purely visual (hover slider reveals after state,
no clicking). New demo shows standard rectangular card vs organic
blob-shaped composition — the visual difference is instant and
communicates "beyond normal CSS" without animation or interaction.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-03-16 07:24:55 -07:00
co-authored by Claude Opus 4.6
parent 234f5b7051
commit 8bb0017752
1 changed files with 19 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/demos/commands/overdrive.js
+19 -37
View File
@@ -1,51 +1,33 @@
// Overdrive command demo - shows a static list becoming a morphing shared-element transition
// Overdrive command demo - shows standard rectangular layout vs organic, non-standard composition
export default {
id: 'overdrive',
caption: 'Static list with page jump → Shared element morph transition',
caption: 'Standard rectangular layout → Organic, technically ambitious composition',
before: `
<div style="width: 100%; max-width: 240px; padding: 16px; font-family: system-ui, sans-serif;">
<div style="font-size: 11px; color: #999; margin-bottom: 10px;">PROJECTS</div>
<div style="display: flex; flex-direction: column; gap: 8px;">
<div style="padding: 10px; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 4px; display: flex; align-items: center; gap: 10px;">
<div style="width: 28px; height: 28px; background: #e0e0e0; border-radius: 4px;"></div>
<div>
<div style="font-size: 12px; color: #333; font-weight: 500;">Redesign</div>
<div style="font-size: 11px; color: #999;">3 tasks</div>
</div>
</div>
<div style="padding: 10px; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 4px; display: flex; align-items: center; gap: 10px;">
<div style="width: 28px; height: 28px; background: #e0e0e0; border-radius: 4px;"></div>
<div>
<div style="font-size: 12px; color: #333; font-weight: 500;">Launch</div>
<div style="font-size: 11px; color: #999;">7 tasks</div>
</div>
</div>
<div style="width: 100%; max-width: 240px; padding: 20px 16px; text-align: center; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 8px;">
<div style="width: 48px; height: 48px; background: #ddd; border-radius: 50%; margin: 0 auto 12px;"></div>
<div style="font-size: 14px; font-weight: 600; color: #333; margin-bottom: 4px;">Sarah Chen</div>
<div style="font-size: 12px; color: #888; margin-bottom: 16px;">Design Lead</div>
<div style="display: flex; justify-content: center; gap: 24px; padding-top: 12px; border-top: 1px solid #e0e0e0;">
<div style="text-align: center;"><div style="font-size: 14px; font-weight: 600; color: #333;">142</div><div style="font-size: 10px; color: #999;">Projects</div></div>
<div style="text-align: center;"><div style="font-size: 14px; font-weight: 600; color: #333;">38</div><div style="font-size: 10px; color: #999;">Reviews</div></div>
</div>
</div>
`,
after: `
<div style="width: 100%; max-width: 240px; padding: 16px; font-family: 'Instrument Sans', sans-serif;">
<div style="font-size: 0.6875rem; letter-spacing: 0.06em; color: var(--color-ash); margin-bottom: 10px;">PROJECTS</div>
<div style="display: flex; flex-direction: column; gap: 6px;">
<div style="padding: 10px; background: color-mix(in oklch, var(--color-accent) 6%, var(--color-paper)); border: 1px solid color-mix(in oklch, var(--color-accent) 15%, var(--color-paper)); border-radius: 6px; display: flex; align-items: center; gap: 10px; view-transition-name: project-card;">
<div style="width: 28px; height: 28px; background: var(--color-accent); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: white; font-size: 10px; font-weight: 600;">R</div>
<div style="flex: 1;">
<div style="font-size: 0.8125rem; color: var(--color-ink); font-weight: 500;">Redesign</div>
<div style="font-size: 0.6875rem; color: var(--color-ash);">3 tasks</div>
</div>
<div style="font-size: 0.5625rem; padding: 2px 6px; background: color-mix(in oklch, var(--color-accent) 12%, transparent); color: var(--color-accent); border-radius: 3px; font-weight: 500;">Active</div>
</div>
<div style="padding: 10px; background: var(--color-paper); border: 1px solid var(--color-mist); border-radius: 6px; display: flex; align-items: center; gap: 10px;">
<div style="width: 28px; height: 28px; background: var(--color-mist); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--color-ash); font-size: 10px; font-weight: 600;">L</div>
<div style="flex: 1;">
<div style="font-size: 0.8125rem; color: var(--color-ink); font-weight: 500;">Launch</div>
<div style="font-size: 0.6875rem; color: var(--color-ash);">7 tasks</div>
</div>
<div style="width: 100%; max-width: 240px; padding: 20px 16px; position: relative; overflow: hidden; background: var(--color-paper); border-radius: 24px 24px 8px 8px;">
<div style="position: absolute; top: -30px; right: -20px; width: 100px; height: 100px; background: color-mix(in oklch, var(--color-accent) 10%, transparent); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; filter: blur(1px);"></div>
<div style="position: absolute; bottom: -15px; left: -10px; width: 70px; height: 70px; background: color-mix(in oklch, var(--color-accent) 6%, transparent); border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%;"></div>
<div style="position: relative; z-index: 1;">
<div style="width: 48px; height: 48px; background: var(--color-accent); border-radius: 40% 60% 55% 45% / 55% 40% 60% 45%; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; color: white; font-size: 15px; font-weight: 600; font-family: 'Cormorant Garamond', serif;">SC</div>
<div style="font-size: 0.9375rem; font-weight: 600; color: var(--color-ink); margin-bottom: 2px; font-family: 'Cormorant Garamond', serif;">Sarah Chen</div>
<div style="font-size: 0.6875rem; color: var(--color-ash); margin-bottom: 16px; letter-spacing: 0.04em; font-family: 'Instrument Sans', sans-serif;">Design Lead</div>
<div style="display: flex; justify-content: center; gap: 20px; padding-top: 12px; border-top: 1px solid var(--color-mist);">
<div style="text-align: center;"><div style="font-size: 0.875rem; font-weight: 600; color: var(--color-ink); font-variant-numeric: tabular-nums;">142</div><div style="font-size: 0.5625rem; color: var(--color-ash); letter-spacing: 0.06em;">Projects</div></div>
<div style="text-align: center;"><div style="font-size: 0.875rem; font-weight: 600; color: var(--color-ink); font-variant-numeric: tabular-nums;">38</div><div style="font-size: 0.5625rem; color: var(--color-ash); letter-spacing: 0.06em;">Reviews</div></div>
</div>
</div>
<div style="margin-top: 8px; font-size: 0.625rem; color: var(--color-ash); font-style: italic;">view-transition-name on cards for shared element morphing</div>
</div>
`
};