Project Context
What was
built
This session delivered a complete visual overhaul of the Magnetic Remembering website. The entire site has been transformed into an immersive dark experience that mirrors the sacred geometry animated logo: deep void backgrounds, luminous gold accents, glowing animated borders, and interactive mouse-driven light and particle effects.
Every page, every component, and every interactive element has been updated. The result is a site that feels alive, responsive to the visitor, and visually consistent with the depth and intentionality of the work it represents.
Session One
Six systems,
rebuilt from darkness
Fully Dark Site
The entire site now uses #0d0b12 void-900 backgrounds everywhere. All light and cream sections removed. Every page renders on deep dark with high-contrast warm text and gold accents.
Glowing Text
Three tiers of heading glow: glow-text standard, glow-text-strong hero-level, glow-text-subtle for descriptions. All links emit gold on hover across the site.
Animated Border Glow
Interactive cards pulse with a traveling gold glow via glow-border-pulse. Section separators use animated gold lines with blur. Divider bars carry a light sweep matching the logo animation.
Cursor Glow + Particles
The CursorGlow component renders a full-screen canvas. The cursor emits a radial gold glow and trails subtle particles. On interactive elements, 6 additional particles burst on hover. Particles drift with slight gravity and fade naturally.
Parallax Field
The ParallaxField component renders 25 floating geometry elements at varying depths. Elements move at different speeds relative to scroll, creating dimensional depth, pulsing in and out with staggered sparkle timing.
Interactive Hover Glow
The glow-interactive class adds a radial gold gradient that follows mouse position inside the element. Cards and CTA buttons light up from within — reinforcing the "light emerging from darkness" metaphor.
Session Two
Scroll reveals,
contrast & branding
Cinematic Scroll Reveals
All sections use a blur-to-sharp reveal — opacity + translateY + blur — with premium cubic-bezier easing. Hero text elements stagger in sequence. Section titles and prose reveal in 3 waves. Program cards stagger left to right. A reusable ScrollReveal component supports any element.
Shimmer Underline
Key thematic phrases carry a 1px gold shimmer underline with a traveling light sweep. Applied sparingly to "remember who they are," "deliberate," and "integrate it" — only on select italic/thematic moments to keep it meaningful.
Contrast Pass
Form inputs, labels, footer links, copyright, program card durations, tool descriptors, FAQ categories, and privacy timestamps all bumped one step brighter. Small gray-on-black text is now legibly readable across all viewports.
Email Contact
Joshua's email is now linked in four places behind clean labels: "Contact Joshua" in the footer, "Contact Joshua Directly" below the application form, "Reach Out Directly" on FAQ, and a link in form error states. The raw address is never visible to visitors.
White Logo + Favicon
Header nav now uses logo-white.png transparent version. Favicon generated at 16/32/48px ICO, plus 180px apple-touch-icon and 192px web icon. All sourced from provided sacred geometry assets.
Codebase Changes
Every file
touched
New Components
Core System
Layout & Content Components
Tool Components
All 14 Pages
Design Language
Visual system
reference
| Element | Treatment |
|---|---|
| Body background | void-900 #0d0b12 everywhere |
| Body text | void-200 #b8b0c8 — high contrast on dark |
| Headings | warm-100 + gold text-shadow glow |
| Accent / emphasis | gold-400 #d4b855 — glowing on hover |
| Borders | void-600 base → gold-500 on hover + box-shadow glow |
| Inputs / forms | void-800 bg, void-500 border, gold focus ring |
| Buttons (primary) | gold-500 bg, void-900 text, gold bloom on hover |
| Buttons (secondary) | gold-500 border, gold-400 text, fills on hover |
| Section separators | Animated gold gradient line with traveling light sweep |
| Cursor | Radial gold glow + trailing particles + burst on hover |
| Background depth | 25 parallax floating gold dots + geometry lines |
| Scrollbar | Dark track, void-600 thumb, gold hover state |
| Text selection | Gold highlight at 25% opacity |
| Scroll reveals | opacity + translateY + blur, cubic-bezier(0.16,1,0.3,1) |
| Shimmer underline | 1px animated gold sweep — select thematic phrases only |
Delivery Status
Where everything
stands
| Item | Status |
|---|---|
| Build (Next.js 16) | Passing |
| Full dark visual system | Complete |
| 14 pages + 4 tools | Complete |
| Contrast pass (forms, small text) | Fixed |
| Email contact (4 locations) | Linked |
| Favicon + apple-touch-icon | Set |
| White transparent logo | Header |
| Scroll reveals + shimmer underline | New |
| Vercel deployment | Live |
| Custom domain | Pending Joshua |
| Additional testimonials | Pending Joshua |
| Application form questions | Pending Joshua |
| Resend API key (form delivery) | Pending Setup |
Search Strategy
SEO roadmap
& what's needed
The site has a solid foundation — structured data, per-page metadata, sitemap, robots.txt, canonical URLs. The items below are what make this site fully competitive in search.
Register themagneticremembering.com and connect to Vercel. All metadata, schema, sitemap, and canonical URLs already point to this domain. Without it, Google indexes the .vercel.app URL which has zero brand authority.
Create a 1200×630 Open Graph image. Currently no OG image is set — when shared on LinkedIn, Twitter, or iMessage the preview is blank. Use the sacred geometry logo + brand name on dark background.
Verify ownership of the domain in GSC. Submit the sitemap. Monitor indexing. This is how Google discovers and prioritizes the site.
Each major page (About, Convergence, Philosophy, Apply) should have its own OG image with the page title overlaid. buildPageMetadata() already accepts OG fields — the images just need to be created and linked.
Joshua's portrait and any future images need descriptive alt text for accessibility and image search. Decorative images should use empty alt="".
Ensure www redirects to the canonical version. Vercel handles this automatically once the domain is connected — verify after setup to avoid duplicate indexing.
A /insights section with 2–4 articles would dramatically improve keyword reach. "What is internal fragmentation," "self-trust vs self-confidence," and "narrative patterns" are low-competition, high-intent search terms.
The FAQ page has excellent Q&A content. Adding FAQPage JSON-LD would make these eligible for Google's rich FAQ snippets — significantly more search result real estate.
A single quality backlink from a relevant coaching directory, wellness platform, or psychology-adjacent publication accelerates domain authority faster than any on-page optimization.
Run Lighthouse after domain is live. The cursor glow canvas, parallax field, and particle system may need lazy-loading or reduced-motion fallbacks for Core Web Vitals. prefers-reduced-motion kills animations — verify the canvas also pauses.
Add Review structured data to testimonials. Google may display star ratings in search results for service-based businesses.
No analytics currently installed. Consider Vercel Analytics (privacy-friendly, zero-config) or Plausible to understand which pages convert visitors to applicants.
What's already done
- JSON-LD structured data (Organization, Person, WebSite, 3 Services)
- Per-page metadata with unique titles and descriptions
- Canonical URLs on all pages
- Sitemap via next-sitemap with page-level priority weights
- robots.txt allowing all crawlers
- Semantic HTML — proper heading hierarchy, sections, nav, footer
- Favicon + apple-touch-icon (16/32/48px ICO, 180px touch, 192px web)
- prefers-reduced-motion support for full accessibility compliance
- Mobile responsive via Tailwind breakpoints
- Font-display: swap — no invisible text during load