Skip to content

Commit 576417f

Browse files
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
1 parent ac13d7c commit 576417f

8 files changed

Lines changed: 52 additions & 7 deletions

File tree

src/app/globals.css

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -237,6 +237,36 @@ button {
237237
-webkit-tap-highlight-color: transparent;
238238
}
239239

240+
/* Shared micro-interactions for a livelier feel */
241+
.alive-interactive {
242+
transition: transform 0.16s ease, opacity 0.16s ease, box-shadow 0.18s ease, color 0.15s ease, background 0.15s ease;
243+
}
244+
245+
.alive-interactive:active {
246+
transform: translateY(1px) scale(0.985);
247+
}
248+
249+
@media (hover: hover) and (pointer: fine) {
250+
.alive-interactive:hover {
251+
transform: translateY(-1px);
252+
}
253+
}
254+
255+
.alive-card {
256+
transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.15s ease, opacity 0.12s ease;
257+
will-change: transform;
258+
}
259+
260+
.alive-card:active {
261+
transform: translateY(1px) scale(0.988);
262+
}
263+
264+
@media (hover: hover) and (pointer: fine) {
265+
.alive-card:hover {
266+
transform: translateY(-2px);
267+
}
268+
}
269+
240270
/* ── Graveyard ── */
241271
@keyframes marquee {
242272
from { transform: translateX(0); }
@@ -536,6 +566,10 @@ a.subpage-inline-mail {
536566
animation: section-fade-up 420ms ease-out both;
537567
}
538568

569+
.ux-live-section {
570+
animation: section-fade-up 420ms ease-out both;
571+
}
572+
539573
.certificate-card-shell {
540574
animation: section-fade-up 380ms ease-out both;
541575
}
@@ -562,6 +596,7 @@ a.subpage-inline-mail {
562596
.page-hero,
563597
.input-block,
564598
.chips-section,
599+
.ux-live-section,
565600
.certificate-card-shell,
566601
.site-footer,
567602
.about-cards > div,
@@ -648,6 +683,11 @@ a.subpage-inline-mail {
648683
padding-left: 14px !important;
649684
}
650685

686+
.alive-interactive:active,
687+
.alive-card:active {
688+
transform: scale(0.99);
689+
}
690+
651691
.input-button-wrapper:focus-within {
652692
margin-bottom: 8px;
653693
}

src/app/page.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export default function Page() {
7575
/>
7676
</div>
7777

78-
<div style={{ width: '100%', marginTop: '10px' }}>
78+
<div className="ux-live-section" style={{ width: '100%', marginTop: '10px' }}>
7979
<SearchForm url={url} setUrl={setUrl} onSubmit={analyze} onSelect={handleSelect} loading={loading} />
8080
</div>
8181

@@ -95,13 +95,13 @@ export default function Page() {
9595

9696
{/* Certificate — inline, no redirect */}
9797
{certificate && !loading && (
98-
<div className="certificate-scroll-zone" style={{ width: '100%' }}>
98+
<div className="certificate-scroll-zone ux-live-section" style={{ width: '100%' }}>
9999
<CertificateCard cert={certificate} onReset={reset} />
100100
</div>
101101
)}
102102

103103
{idle && (
104-
<div style={{ width: '100%', marginTop: '34px', paddingBottom: 0 }}>
104+
<div className="ux-live-section" style={{ width: '100%', marginTop: '34px', paddingBottom: 0 }}>
105105
<div style={{ marginBottom: '14px', textAlign: 'center' }}>
106106
<p style={{ fontFamily: FONT, fontSize: '13px', fontWeight: 700, color: '#727272', margin: 0, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
107107
Recently Buried

src/components/ErrorDisplay.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ export default function ErrorDisplay({ error, onRetry }: Props) {
2020
<p style={{ fontSize: '13px', color: '#7A5C38', margin: 0 }}>retry in {error.retryAfter}s</p>
2121
) : (
2222
<button
23+
className="alive-interactive"
2324
onClick={onRetry}
2425
style={{
2526
fontFamily: FONT,

src/components/Leaderboard.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ export default function Leaderboard({ onSelect }: Props) {
4545
function GraveyardCard({ entry }: { entry: LeaderboardEntry }) {
4646
return (
4747
<button
48+
className="alive-card"
4849
type="button"
4950
onClick={() => { track('graveyard_clicked', { repo: entry.fullName }); onSelect(`https://github.com/${entry.fullName}`) }}
5051
style={{

src/components/RecentlyBuried.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ export default function RecentlyBuried({ onSelect }: Props) {
4141
function Card({ entry }: { entry: typeof entries[number] }) {
4242
return (
4343
<button
44+
className="alive-card"
4445
type="button"
4546
onClick={() => {
4647
track('recent_clicked', { repo: entry.fullName })

src/components/SearchForm.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ export default function SearchForm({ url, setUrl, onSubmit, onSelect, loading }:
124124
{/* Button */}
125125
<ClickSpark color="#2b2b2b">
126126
<button
127-
className="input-submit-button"
127+
className="input-submit-button alive-interactive"
128128
type="submit"
129129
disabled={loading}
130130
aria-label="Issue death certificate"
@@ -168,6 +168,7 @@ export default function SearchForm({ url, setUrl, onSubmit, onSelect, loading }:
168168
{/* Random dead repo */}
169169
<div className="chips-section" style={{ display: 'flex', justifyContent: 'center', marginTop: '6px', marginBottom: '8px' }}>
170170
<button
171+
className="alive-interactive"
171172
type="button"
172173
onClick={handleRandom}
173174
disabled={randomLoading || loading}

src/components/SiteFooter.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,11 @@ export default function SiteFooter({ compact = false }: SiteFooterProps) {
3131
<footer className={`site-footer${compact ? ' site-footer--compact' : ''}`}>
3232
<nav className="site-footer-nav" aria-label="Footer">
3333
{LINKS.map(({ href, label }) => (
34-
<a key={href} href={href} style={{ fontFamily: FONT }}>{label}</a>
34+
<a key={href} href={href} className="alive-interactive" style={{ fontFamily: FONT }}>{label}</a>
3535
))}
3636
</nav>
3737
<a
38-
className="site-footer-source-link"
38+
className="site-footer-source-link alive-interactive"
3939
href="https://github.com/dotsystemsdevs/saas-commitmentissues"
4040
target="_blank"
4141
rel="noopener noreferrer"
@@ -61,7 +61,7 @@ export default function SiteFooter({ compact = false }: SiteFooterProps) {
6161
</a>
6262
<button
6363
type="button"
64-
className={`site-footer-copy site-footer-copy-btn${aliveFlash ? ' site-footer-copy--alive' : ''}`}
64+
className={`site-footer-copy site-footer-copy-btn alive-interactive${aliveFlash ? ' site-footer-copy--alive' : ''}`}
6565
onClick={handleRestClick}
6666
style={{ fontFamily: FONT }}
6767
>

src/components/SubpageShell.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export default function SubpageShell({ subtitle, title, microcopy, headerExtra,
2121
<Link
2222
href="/"
2323
aria-label="Back to home"
24+
className="subpage-back-link alive-interactive"
2425
style={{
2526
fontFamily: UI,
2627
display: 'inline-flex',

0 commit comments

Comments
 (0)