Tweak intro animations

brookslybrand · brookslybrand · commit b71f8cbbc636 · 2026-01-20T11:05:32.000-06:00
diff --git a/HOME_PAGE_NOTES.md b/HOME_PAGE_NOTES.md
@@ -42,3 +42,15 @@ This file is **append-only**. Do not rewrite or reorganize existing entries—on
 
 - **Breakpoints**: Use Tailwind's default breakpoints (`sm:`, `md:`, `lg:`, etc.) instead of arbitrary breakpoints like `min-[800px]:`. The Figma frames use 800px but `md:` (768px) is close enough.
 - **Typography helpers (marketing)**: Shared text utility classes live in `app/styles/marketing.css` (e.g., `.rmx-body`, `.rmx-body-md`, `.rmx-body-lg`, `.rmx-heading-hero`, `.rmx-heading-lg`, `.rmx-heading-xl`, `.rmx-heading-sm`, `.rmx-button-text`, `.rmx-button-text-lg`, `.rmx-body-on-dark`).
+
+- **Intro animation timing variables**: All animation timing is driven by CSS variables in `:root` (not scoped to `.rmx-intro-mask-overlay`) so they can be referenced by any element. Variables: `--rmx-intro-black-hold`, `--rmx-intro-black-fade`, `--rmx-intro-logo-delay`, `--rmx-intro-logo-duration`, `--rmx-intro-logo-easing`, `--rmx-intro-logo-start`, `--rmx-intro-r-fade-duration`, `--rmx-hero-fade-delay`, `--rmx-hero-fade-duration`.
+
+- **Intro R fill fade**: The R shape in the intro mask starts with a solid fill (`--rmx-neutral-200`) that fades out, allowing users to recognize the R shape before content shows through. Implemented using an SVG `<mask>` element to avoid duplicating the R path data.
+
+- **Hero content fade-in**: The `.rmx-hero` class applies a fade-in animation with a delay calculated from the intro animation timing (`--rmx-hero-fade-delay`).
+
+- **Timeline section implementation**:
+  - Desktop (`xl:+`): Uses an inline SVG (`desktop.tsx`) with glow filters, gradient fills, and year labels
+  - Mobile/Tablet (`<xl:`): Uses a CSS grid-based layout (`mobile.tsx`) with colored track segments
+  - Breakpoint at `xl:` (1280px) to switch between layouts
+  - Both use CSS variables for colors (`--rmx-highlight-*`, `--rmx-shade-*`, `--rmx-neutral-*`)
diff --git a/HOME_PAGE_PLAN.md b/HOME_PAGE_PLAN.md
@@ -54,8 +54,18 @@
 ### ✅ Completed
 
 - Intro mask reveal animation (`app/ui/marketing/home/intro-mask-reveal.tsx`)
+  - R shape starts solid (visible) then fades out to reveal content behind
+  - Hero text content fades in after intro animation completes
+  - Animation timing driven by CSS variables in `:root`
+  - Reduced motion support
 - Section 1 — Hero (`app/ui/marketing/home/hero-section.tsx`)
 - Section 2 — Pitch + CTA (`app/ui/marketing/home/pitch-section.tsx`)
+- Section 3 — Timeline (`app/ui/marketing/home/timeline-section/`)
+  - Heading + 3 explanatory text blocks with colored links
+  - Desktop SVG diagram (`desktop.tsx`) with year labels, multi-lane tracks, glow effects
+  - Mobile grid-based diagram (`mobile.tsx`) with vertical layout
+  - Responsive breakpoint at `xl:` (1280px)
+  - CSS variables for all colors
 - Section 4 — "Stay in the loop" (`app/ui/marketing/home/stay-in-the-loop-section.tsx`)
   - Newsletter subscription card with form
   - Discord community card with button
@@ -65,19 +75,16 @@
 - Footer (using existing `app/ui/footer.tsx`)
 - Typography helpers added in `app/styles/marketing.css` and applied to sections
 
-### Section 3 — Timeline ("The story so far")
+### Remaining work
 
-- ✅ Heading + 3 explanatory text blocks
-- Year ticks row (2014–2027)
-- Multi-lane timeline track (React Router / Remix / Remix 3) with markers
-- Export desktop and mobile SVGs from Figma, embed inline
-- Use CSS variables for colors
-- Screen-reader-friendly milestone list
+- **Timeline hover effects (desktop)**: Add hover states for timeline track segments/markers
+- **SR-friendly milestone list**: Add visually-hidden list of milestones for screen readers (TODO in `timeline-section/index.tsx`)
 
 ### Cleanup
 
 - Update `meta()` title/description/og image
 - Delete `app/ui/homepage-scroll-experience.tsx` once unused
+- Remove `public/remix-logo-mask.svg` if still present (mask SVG is now inlined)
 
 ## Acceptance criteria
 
@@ -87,7 +94,7 @@
 - Accessible semantics (heading hierarchy, landmarks, form labels, SR-only timeline)
 - Styles scoped to `app/styles/marketing.css`
 
-## Questions
+## Questions (resolved)
 
-- **Timeline SVG export**: Store exports in `design-assets/` or just paste SVG markup into component?
-- **Timeline breakpoint**: Switch SVGs at `<768px` or align with Figma frame sizes (380 vs 800 vs 1400/1920)?
+- **Timeline SVG export**: ~~Store exports in `design-assets/` or just paste SVG markup into component?~~ → Inlined in components (`desktop.tsx` / `mobile.tsx`)
+- **Timeline breakpoint**: ~~Switch SVGs at `<768px` or align with Figma frame sizes?~~ → Switch at `xl:` (1280px) — desktop diagram on xl+, mobile grid below
diff --git a/app/styles/marketing.css b/app/styles/marketing.css
@@ -27,13 +27,31 @@
   --rmx-button-surface-secondary: #ebeff2;
   --rmx-button-label-secondary: #25292d;
 
-  /* Shadow recipes (from Figma) */
   --rmx-shadow-low:
     0 1px 1px 1px #00274f59, 0 2px 3px 0 #0138701a, 0 4px 4px 0 #0138700d;
   --rmx-shadow-mid:
     0 2px 4px 0 #011d3940, 0 8px 12px 0 #01387014, 0 12px 16px 0 #0138700a,
     0 16px 20px 0 #0138700a, 0 20px 24px 0 #01387005;
 
+  --rmx-intro-black-hold: 150ms;
+  --rmx-intro-black-fade: 400ms;
+
+  --rmx-intro-logo-delay: calc(
+    var(--rmx-intro-black-hold) + var(--rmx-intro-black-fade)
+  );
+  --rmx-intro-logo-duration: 1500ms;
+  --rmx-intro-logo-easing: cubic-bezier(0.85, 0, 0.15, 1);
+  --rmx-intro-logo-start: calc(
+    var(--rmx-intro-black-hold) + var(--rmx-intro-logo-delay)
+  );
+
+  --rmx-intro-r-fade-duration: 600ms;
+
+  --rmx-hero-fade-delay: calc(
+    var(--rmx-intro-logo-start) + (var(--rmx-intro-logo-duration) / 2)
+  );
+  --rmx-hero-fade-duration: 750ms;
+
   &:where(.dark) {
     --rmx-text-primary: #e5e7eb;
     --rmx-text-muted: #9aa0a6;
@@ -227,66 +245,43 @@
   background: var(--rmx-surface-3);
 }
 
-.rmx-intro-mask-overlay {
-  /* How long the screen stays black before fading */
-  --intro-black-hold: 150ms;
-  /* How long the black fade-out takes */
-  --intro-black-fade: 400ms;
-  /* Delay after black fade before logo starts animating */
-  --intro-logo-delay: calc(var(--intro-black-hold) + var(--intro-black-fade));
-  /* How long the logo scale/reveal animation takes */
-  --intro-logo-duration: 1500ms;
-  /* Easing for the logo animation */
-  --intro-logo-easing: cubic-bezier(0.85, 0, 0.15, 1);
-
-  /* Computed: total delay before logo animation starts */
-  --intro-logo-start: calc(var(--intro-black-hold) + var(--intro-logo-delay));
+/* ========================================
+ * Intro & Hero Animations
+ * ========================================
+ *
+ * Animation sequence:
+ * 1. Black screen holds, then fades out
+ * 2. Logo scales up and reveals content behind
+ * 3. R fill fades out (so users can see the R shape first)
+ * 4. Hero text content fades in
+ *
+ * ======================================== */
 
-  position: fixed;
-  inset: 0;
-  z-index: 9999;
-  overflow: hidden;
-  pointer-events: none;
-
-  animation: rmx-intro-reveal var(--intro-logo-duration)
-    var(--intro-logo-easing) var(--intro-logo-start) forwards;
-}
+/* --- Keyframes --- */
 
-/* Black cover that fades out before the logo animation starts */
-.rmx-intro-mask-overlay::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: black;
-  z-index: 1;
-  animation: rmx-intro-black-fade var(--intro-black-fade) ease-out
-    var(--intro-black-hold) forwards;
+@keyframes rmx-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
-@keyframes rmx-intro-black-fade {
-  0% {
+@keyframes rmx-fade-out {
+  from {
     opacity: 1;
   }
-  100% {
+  to {
     opacity: 0;
   }
 }
 
-.rmx-intro-mask-svg {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  transform-origin: center center;
-
-  animation: rmx-intro-scale var(--intro-logo-duration) var(--intro-logo-easing)
-    var(--intro-logo-start) forwards;
-}
-
 @keyframes rmx-intro-scale {
-  0% {
+  from {
     transform: translate(0, 0) scale(1);
   }
-  100% {
+  to {
     transform: translate(-55%, 100%) scale(80);
   }
 }
@@ -306,19 +301,71 @@
   }
 }
 
+.rmx-intro-mask-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  overflow: hidden;
+  pointer-events: none;
+  animation: rmx-intro-reveal var(--rmx-intro-logo-duration)
+    var(--rmx-intro-logo-easing) var(--rmx-intro-logo-start) forwards;
+}
+
+.rmx-intro-mask-overlay::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: black;
+  z-index: 1;
+  animation: rmx-fade-out var(--rmx-intro-black-fade) ease-out
+    var(--rmx-intro-black-hold) forwards;
+}
+
+/* SVG that scales up to reveal content */
+.rmx-intro-mask-svg {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  transform-origin: center center;
+  animation: rmx-intro-scale var(--rmx-intro-logo-duration)
+    var(--rmx-intro-logo-easing) var(--rmx-intro-logo-start) forwards;
+}
+
+/* Solid fill behind the R that fades out so users can see the R shape first */
+.rmx-intro-r-fill {
+  animation: rmx-fade-out var(--rmx-intro-r-fade-duration) ease-out
+    var(--rmx-intro-logo-start) forwards;
+}
+
+.rmx-hero {
+  opacity: 0;
+  animation: rmx-fade-in var(--rmx-hero-fade-duration) ease-out
+    var(--rmx-hero-fade-delay) forwards;
+}
+
 @media (prefers-reduced-motion: reduce) {
-  .rmx-intro-mask-overlay {
+  .rmx-intro-mask-overlay,
+  .rmx-intro-mask-overlay::before,
+  .rmx-intro-mask-svg,
+  .rmx-intro-r-fill {
     animation: none;
+  }
+
+  .rmx-intro-mask-overlay {
     visibility: hidden;
     opacity: 0;
   }
 
   .rmx-intro-mask-overlay::before {
-    animation: none;
     opacity: 0;
   }
 
-  .rmx-intro-mask-svg {
+  .rmx-intro-r-fill {
+    opacity: 0;
+  }
+
+  .rmx-hero {
     animation: none;
+    opacity: 1;
   }
 }
diff --git a/app/ui/marketing/home/hero-section.tsx b/app/ui/marketing/home/hero-section.tsx
@@ -1,10 +1,16 @@
+import cx from "clsx";
 import heroImageSrc from "/racecar-teaser-hero.webp";
 
 export function HeroSection() {
   return (
     <section className="flex min-h-[540px] flex-col items-center justify-end overflow-hidden px-12 pb-6 md:min-h-[90vh] md:pb-12">
       <div className="flex w-full flex-col items-center gap-12 md:gap-24">
-        <div className="text-rmx-primary flex w-full flex-col items-start gap-12 md:items-center md:gap-6 md:text-center">
+        <div
+          className={cx(
+            "rmx-hero",
+            "text-rmx-primary flex w-full flex-col items-start gap-12 md:items-center md:gap-6 md:text-center",
+          )}
+        >
           <h1 className="rmx-heading-hero">
             Remix 3 is under active development
           </h1>
diff --git a/app/ui/marketing/home/intro-mask-reveal.tsx b/app/ui/marketing/home/intro-mask-reveal.tsx
@@ -1,3 +1,6 @@
+const REMIX_R_PATH =
+  "M1757.07 884.025L1749.55 912.385H1889.4C1894.66 912.385 1898.3 914.76 1897.52 917.688H1897.52C1896.74 920.617 1891.84 922.991 1886.59 922.991H1746.73L1739.21 951.354H1819.06C1821.32 951.354 1823.54 952.008 1825.46 953.241L1881.68 990.322H1968.08L1909 951.354H1911.88C1940 951.354 1966.17 938.658 1970.33 922.995L1973.14 912.39C1977.3 896.727 1957.86 884.03 1929.73 884.03V884.027L1929.74 884.025H1757.07ZM1736.61 961.143L1728.88 990.318H1803.09L1809.47 966.268C1810.16 963.682 1808.23 961.143 1805.58 961.143H1736.61Z";
+
 export function IntroMaskReveal() {
   return (
     <div aria-hidden="true" className="rmx-intro-mask-overlay">
@@ -8,10 +11,39 @@ export function IntroMaskReveal() {
         xmlns="http://www.w3.org/2000/svg"
         preserveAspectRatio="xMidYMid slice"
       >
+        <defs>
+          {/* Mask: white = visible, black = transparent */}
+          <mask id="r-cutout-mask">
+            <rect x="0" y="0" width="3600" height="1921" fill="white" />
+            <path d={REMIX_R_PATH} fill="black" />
+          </mask>
+          <clipPath id="color-stripes">
+            <rect
+              width="374"
+              height="134"
+              fill="white"
+              transform="translate(1613 856)"
+            />
+          </clipPath>
+        </defs>
+
+        {/* Solid R fill that fades out so users can see the shape first */}
         <path
-          d="M3600 1920.5H0V0.5H3600V1920.5ZM1757.07 884.025L1749.55 912.385H1889.4C1894.66 912.385 1898.3 914.76 1897.52 917.688H1897.52C1896.74 920.617 1891.84 922.991 1886.59 922.991H1746.73L1739.21 951.354H1819.06C1821.32 951.354 1823.54 952.008 1825.46 953.241L1881.68 990.322H1968.08L1909 951.354H1911.88C1940 951.354 1966.17 938.658 1970.33 922.995L1973.14 912.39C1977.3 896.727 1957.86 884.03 1929.73 884.03V884.027L1929.74 884.025H1757.07ZM1736.61 961.143L1728.88 990.318H1803.09L1809.47 966.268C1810.16 963.682 1808.23 961.143 1805.58 961.143H1736.61Z"
+          className="rmx-intro-r-fill"
+          d={REMIX_R_PATH}
+          fill="var(--rmx-neutral-200)"
+        />
+
+        {/* Black overlay with R cutout */}
+        <rect
+          x="0"
+          y="0.5"
+          width="3600"
+          height="1920"
           fill="black"
+          mask="url(#r-cutout-mask)"
         />
+
         <g clipPath="url(#color-stripes)">
           <path
             d="M1690.45 960.945H1667.23L1659.48 990H1682.69L1690.45 960.945Z"
@@ -74,16 +106,6 @@ export function IntroMaskReveal() {
             fill="#F44250"
           />
         </g>
-        <defs>
-          <clipPath id="color-stripes">
-            <rect
-              width="374"
-              height="134"
-              fill="white"
-              transform="translate(1613 856)"
-            />
-          </clipPath>
-        </defs>
       </svg>
     </div>
   );
