ux: add cohesive live interactions across key surfaces

Introduce shared micro-interaction classes for taps, hover lift, and section reveal motion, and apply them across home, cards, footer, and subpage navigation for a more consistently alive feel.

Made-with: Cursor

Author: dotsystemsdevs

src/app/globals.css

@@ -237,6 +237,36 @@ button {
   -webkit-tap-highlight-color: transparent;
 }
 
+/* Shared micro-interactions for a livelier feel */
+.alive-interactive {
+  transition: transform 0.16s ease, opacity 0.16s ease, box-shadow 0.18s ease, color 0.15s ease, background 0.15s ease;
+}
+
+.alive-interactive:active {
+  transform: translateY(1px) scale(0.985);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .alive-interactive:hover {
+    transform: translateY(-1px);
+  }
+}
+
+.alive-card {
+  transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.15s ease, opacity 0.12s ease;
+  will-change: transform;
+}
+
+.alive-card:active {
+  transform: translateY(1px) scale(0.988);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .alive-card:hover {
+    transform: translateY(-2px);
+  }
+}
+
 /* ── Graveyard ── */
 @keyframes marquee {
   from { transform: translateX(0); }
@@ -536,6 +566,10 @@ a.subpage-inline-mail {
   animation: section-fade-up 420ms ease-out both;
 }
 
+.ux-live-section {
+  animation: section-fade-up 420ms ease-out both;
+}
+
 .certificate-card-shell {
   animation: section-fade-up 380ms ease-out both;
 }
@@ -562,6 +596,7 @@ a.subpage-inline-mail {
   .page-hero,
   .input-block,
   .chips-section,
+  .ux-live-section,
   .certificate-card-shell,
   .site-footer,
   .about-cards > div,
@@ -648,6 +683,11 @@ a.subpage-inline-mail {
     padding-left: 14px !important;
   }
 
+  .alive-interactive:active,
+  .alive-card:active {
+    transform: scale(0.99);
+  }
+
   .input-button-wrapper:focus-within {
     margin-bottom: 8px;
   }

src/app/page.tsx

@@ -75,7 +75,7 @@ export default function Page() {
             />
           </div>
 
-          <div style={{ width: '100%', marginTop: '10px' }}>
+          <div className="ux-live-section" style={{ width: '100%', marginTop: '10px' }}>
             <SearchForm url={url} setUrl={setUrl} onSubmit={analyze} onSelect={handleSelect} loading={loading} />
           </div>
 
@@ -95,13 +95,13 @@ export default function Page() {
 
       {/* Certificate — inline, no redirect */}
       {certificate && !loading && (
-        <div className="certificate-scroll-zone" style={{ width: '100%' }}>
+        <div className="certificate-scroll-zone ux-live-section" style={{ width: '100%' }}>
           <CertificateCard cert={certificate} onReset={reset} />
         </div>
       )}
 
       {idle && (
-        <div style={{ width: '100%', marginTop: '34px', paddingBottom: 0 }}>
+        <div className="ux-live-section" style={{ width: '100%', marginTop: '34px', paddingBottom: 0 }}>
           <div style={{ marginBottom: '14px', textAlign: 'center' }}>
             <p style={{ fontFamily: FONT, fontSize: '13px', fontWeight: 700, color: '#727272', margin: 0, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
               Recently Buried

src/components/ErrorDisplay.tsx

@@ -20,6 +20,7 @@ export default function ErrorDisplay({ error, onRetry }: Props) {
           <p style={{ fontSize: '13px', color: '#7A5C38', margin: 0 }}>retry in {error.retryAfter}s</p>
         ) : (
           <button
+            className="alive-interactive"
             onClick={onRetry}
             style={{
               fontFamily: FONT,

src/components/Leaderboard.tsx

@@ -45,6 +45,7 @@ export default function Leaderboard({ onSelect }: Props) {
   function GraveyardCard({ entry }: { entry: LeaderboardEntry }) {
     return (
       <button
+        className="alive-card"
         type="button"
         onClick={() => { track('graveyard_clicked', { repo: entry.fullName }); onSelect(`https://github.com/${entry.fullName}`) }}
         style={{

src/components/RecentlyBuried.tsx

@@ -41,6 +41,7 @@ export default function RecentlyBuried({ onSelect }: Props) {
   function Card({ entry }: { entry: typeof entries[number] }) {
     return (
       <button
+        className="alive-card"
         type="button"
         onClick={() => {
           track('recent_clicked', { repo: entry.fullName })

src/components/SearchForm.tsx

@@ -124,7 +124,7 @@ export default function SearchForm({ url, setUrl, onSubmit, onSelect, loading }:
         {/* Button */}
         <ClickSpark color="#2b2b2b">
         <button
-          className="input-submit-button"
+          className="input-submit-button alive-interactive"
           type="submit"
           disabled={loading}
           aria-label="Issue death certificate"
@@ -168,6 +168,7 @@ export default function SearchForm({ url, setUrl, onSubmit, onSelect, loading }:
       {/* Random dead repo */}
       <div className="chips-section" style={{ display: 'flex', justifyContent: 'center', marginTop: '6px', marginBottom: '8px' }}>
         <button
+          className="alive-interactive"
           type="button"
           onClick={handleRandom}
           disabled={randomLoading || loading}

src/components/SiteFooter.tsx

@@ -31,11 +31,11 @@ export default function SiteFooter({ compact = false }: SiteFooterProps) {
     <footer className={`site-footer${compact ? ' site-footer--compact' : ''}`}>
       <nav className="site-footer-nav" aria-label="Footer">
         {LINKS.map(({ href, label }) => (
-          <a key={href} href={href} style={{ fontFamily: FONT }}>{label}</a>
+          <a key={href} href={href} className="alive-interactive" style={{ fontFamily: FONT }}>{label}</a>
         ))}
       </nav>
       <a
-        className="site-footer-source-link"
+        className="site-footer-source-link alive-interactive"
         href="https://github.com/dotsystemsdevs/saas-commitmentissues"
         target="_blank"
         rel="noopener noreferrer"
@@ -61,7 +61,7 @@ export default function SiteFooter({ compact = false }: SiteFooterProps) {
       </a>
       <button
         type="button"
-        className={`site-footer-copy site-footer-copy-btn${aliveFlash ? ' site-footer-copy--alive' : ''}`}
+        className={`site-footer-copy site-footer-copy-btn alive-interactive${aliveFlash ? ' site-footer-copy--alive' : ''}`}
         onClick={handleRestClick}
         style={{ fontFamily: FONT }}
       >

src/components/SubpageShell.tsx

@@ -21,6 +21,7 @@ export default function SubpageShell({ subtitle, title, microcopy, headerExtra,
           <Link
             href="/"
             aria-label="Back to home"
+            className="subpage-back-link alive-interactive"
             style={{
               fontFamily: UI,
               display: 'inline-flex',