- A portfolio of contact-exchange approaches across acoustic signaling, nearby P2P connectivity,
- visual codes, and cryptographic/on-chain attestations.
+
+
+
+
MISSION OVERVIEW
+
Four contact-exchange projects, one reusable trust flow.
+
+ A practical portfolio that compares acoustic payloads, nearby P2P state machines,
+ visual frame-recovery, and signed on-chain style attestations.
+
+
+
+
+
Core protocol families
+
Audio / Nearby / Visual / Web3
+
-
-
-
-
-
-
+
-
+
+
- 01 / ULTRASONIC
- Audio-tone card transfer
- Uses shared Rust DSP to modulate/decode payload through near-ultrasonic tones.
+ 01 / ULTRASONIC
+ Audio-tone card transfer
+ Uses shared Rust DSP to modulate/decode payload through near-ultrasonic tones.
-
- Demo: Estimated decode confidence {{ 100 - noise }}%
+
+
+ Noise injection
+ {{ noise }}%
+
+
+ Decode confidence
+ {{ 100 - noise }}%
+
-
+
- 02 / NEARBY
- Device-to-device handshake
- Combines app state-machine + signaling to coordinate offer/answer and transfer lifecycle.
+ 02 / NEARBY
+ Device-to-device handshake
+ Coordinates discovery, signaling, offer/answer, and payload transfer lifecycle.
-
+
-
+
-
+
- 03 / VISUAL HANDSHAKE
- Animated QR + repair symbols
- Frame stream plus repair chunks aims to recover payload despite dropped frames.
+ 03 / VISUAL HANDSHAKE
+ Animated QR + repair symbols
+ Streams frame chunks plus repair symbols to recover payload under dropped frames.
-
-
- Demo recovery indicator
+
+
+
+ Recovery estimate
+ {{ Math.max(10, 100 - dropRate) }}%
+
-
+
- 04 / WEB3 SBT
- Signed relationship attestations
- Relayer prepares EIP-712-like signable payload and tracks tx-like lifecycle metadata.
+ 04 / WEB3 SBT
+ Signed relationship attestations
+ Prepares EIP-712-style signable payload, relays it, and tracks operation state.
-
+
-
+
-
diff --git a/web/src/components/ReactNothingPanel.vue b/web/src/components/ReactNothingPanel.vue
index ab650e2..f067018 100644
--- a/web/src/components/ReactNothingPanel.vue
+++ b/web/src/components/ReactNothingPanel.vue
@@ -1,30 +1,63 @@
-
+
+
+
diff --git a/web/src/style.css b/web/src/style.css
index 701f1f1..93111a0 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -1,25 +1,208 @@
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
+
:root {
- --bg: #f2f4f7;
+ --bg: #ececec;
--paper: #ffffff;
- --ink: #111111;
- --muted: #667085;
- --accent: #d92d20;
- --line: #d0d5dd;
+ --ink: #101010;
+ --muted: #5f5f5f;
+ --line: #cfcfcf;
+ --accent: #ff3b30;
+}
+
+* {
+ box-sizing: border-box;
}
body {
margin: 0;
- background: radial-gradient(circle at 20% 0%, #fff 0%, #edf1f6 50%, #e7ecf2 100%);
+ font-family: 'Space Grotesk', sans-serif;
color: var(--ink);
+ background:
+ radial-gradient(circle at 10% 10%, #ffffff 0%, #efefef 48%, #e3e3e3 100%),
+ repeating-linear-gradient(0deg, transparent 0 34px, rgba(0, 0, 0, 0.02) 34px 35px);
+}
+
+.app-shell {
+ background: transparent;
+}
+
+.shell-header {
+ background: rgba(248, 248, 248, 0.96);
+ backdrop-filter: blur(8px);
+ border-bottom: 1px solid var(--line);
+}
+
+.toolbar-wrap {
+ max-width: 1240px;
+ margin: 0 auto;
+ width: 100%;
+ padding: 10px 12px;
+ gap: 12px;
+}
+
+.brand-wrap {
+ min-width: 0;
+}
+
+.brand-kicker {
+ font-family: 'IBM Plex Mono', monospace;
+ font-size: 11px;
+ letter-spacing: 0.14em;
+ color: var(--muted);
+}
+
+.brand-title {
+ font-size: clamp(1.1rem, 2.8vw, 1.55rem);
+ font-weight: 700;
+ white-space: normal;
+ line-height: 1.15;
}
-.demo-grid {
+.build-chip {
+ border: 1px solid var(--line);
+ background: #fff;
+ color: #222;
+ font-family: 'IBM Plex Mono', monospace;
+}
+
+.page-wrap {
+ max-width: 1240px;
+ margin: 0 auto;
+ padding: 20px 14px 34px;
+}
+
+.hero-grid {
display: grid;
- grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
- gap: 16px;
+ grid-template-columns: 1.3fr 1fr;
+ gap: 18px;
+ align-items: stretch;
+ margin-bottom: 18px;
+}
+
+.hero-eyebrow,
+.project-kicker {
+ font-family: 'IBM Plex Mono', monospace;
+ letter-spacing: 0.12em;
+ color: var(--accent);
+ font-weight: 500;
+}
+
+.hero-title {
+ margin: 8px 0;
+ font-size: clamp(1.7rem, 4.6vw, 3rem);
+ line-height: 1.02;
+}
+
+.hero-subtitle {
+ margin: 0;
+ font-size: clamp(1rem, 2.2vw, 1.3rem);
+ line-height: 1.45;
+ color: #303030;
+ max-width: 68ch;
+}
+
+.hero-metrics {
+ margin-top: 16px;
+ display: grid;
+ gap: 10px;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.metric-card {
+ background: rgba(255, 255, 255, 0.72);
+ border: 1px solid var(--line);
+ border-radius: 14px;
+ padding: 10px 12px;
+}
+
+.metric-label {
+ font-family: 'IBM Plex Mono', monospace;
+ color: var(--muted);
+ font-size: 12px;
}
-.section-title {
- letter-spacing: 0.08em;
+.metric-value {
+ margin-top: 2px;
+ font-size: 1rem;
font-weight: 700;
}
+
+.hero-react {
+ min-height: 240px;
+}
+
+.projects-grid {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 14px;
+}
+
+.project-card {
+ border-radius: 16px;
+ border: 1px solid var(--line);
+ background: rgba(255, 255, 255, 0.84);
+}
+
+.project-title {
+ margin: 8px 0 2px;
+ font-size: 1.65rem;
+ line-height: 1.1;
+}
+
+.project-copy {
+ margin: 0;
+ color: #444;
+ font-size: 1rem;
+ line-height: 1.45;
+}
+
+.demo-row {
+ margin-top: 8px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-family: 'IBM Plex Mono', monospace;
+}
+
+.mini-stepper {
+ background: transparent;
+}
+
+.step-btn {
+ margin-top: 8px;
+ border: 1px solid #1b1b1b;
+ border-radius: 999px;
+}
+
+.secondary-react-grid {
+ margin-top: 14px;
+ display: grid;
+ gap: 14px;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+@media (max-width: 1024px) {
+ .hero-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .projects-grid,
+ .secondary-react-grid,
+ .hero-metrics {
+ grid-template-columns: 1fr;
+ }
+
+ .build-chip {
+ display: none;
+ }
+}
+
+@media (max-width: 600px) {
+ .page-wrap {
+ padding: 14px 10px 26px;
+ }
+
+ .project-title {
+ font-size: 1.35rem;
+ }
+}
From 9bbc1d5f0559eca58ac465074b9f66bc1bcda609 Mon Sep 17 00:00:00 2001
From: "Dennislee:)" <55692615+dennislee928@users.noreply.github.com>
Date: Thu, 7 May 2026 20:50:20 +0800
Subject: [PATCH 7/7] Add reveal animations and UI style refinements
Update App.vue and style.css to introduce staggered "reveal" animation classes and wrap several header, hero and project elements to animate into view. Tidy up markup (compress demo rows), tweak copy for the hero blurb, and wrap ReactNothingPanel instances in reveal containers. CSS changes: add --line-strong, adjust header/bg gradients, spacing and padding, add .panel and .panel-hero styles, consolidate monospace selectors, refine typography sizes, add project-card hover elevation and transitions, responsive layout fixes, and a prefers-reduced-motion rule to disable animations for accessibility.
---
web/src/App.vue | 35 +++++-------
web/src/style.css | 134 +++++++++++++++++++++++++---------------------
2 files changed, 86 insertions(+), 83 deletions(-)
diff --git a/web/src/App.vue b/web/src/App.vue
index 61af803..510c3ba 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -2,22 +2,22 @@