CLAUDE.md — Homepage Widgets

This covers the homepage (content/home/) of the Fürst Lab Hugo site. See ../post/CLAUDE.md for site-wide architecture.

Hero Dot-Field Animation

The hero section (hero.md) uses a canvas-based animated dot grid instead of a background video. The animation lives in static/js/dot-bg.js and is loaded via layouts/partials/custom_js.html.

How It Hooks Into Hugo

• hero.md front-matter sets background.color: black (no video). The black fill is seamless with the canvas fade-in.
• dot-bg.js dynamically creates a <canvas id="dot-bg"> and appends it to #hero .home-section-bg (the div Hugo/Wowchemy generates for widget backgrounds).
• CSS in assets/scss/custom.scss sets overflow: hidden on the bg container (clips canvas during zoom) and display: block on the canvas (removes inline spacing).
• The canvas sits at z-index: -1 so hero content (title, typewriter text, CTA buttons) renders on top.

Script Structure (static/js/dot-bg.js)

Wrapped in an IIFE. Early-returns if #hero doesn’t exist (safe on non-homepage pages).

Key sections:

1. Config block — all tunables at the top
2. Canvas creation — appended to .home-section-bg
3. buildDots() — (re)computes grid dimensions and dot array; called on init and resize
4. Helper functions — oscillation, color math, mouse proximity, brightness capping
5. IntersectionObserver — pauses requestAnimationFrame when hero scrolls off-screen
6. ResizeObserver + debounced window resize — rebuilds dot grid on dimension changes
7. draw() loop — frame-rate-capped render loop

Dot Generation

• Grid: DOTS_X columns (responsive: (W / 100) * DOTS_PER_100PX, clamped to MIN_DOTS_X–MAX_DOTS_X), rows auto-computed from hero height. Each dot placed at grid center: (spacing * (c + 0.5), spacing * (r + 0.5)).
• Canvas DPR: capped at MAX_RENDER_DPR (default 1) to reduce pixel count on Retina.
• Per-dot properties (set once at build, fixed for lifetime):
  • x, y — pixel position
  • c — column index (used for precomputed wave Y lookups)
  • xFrac — x / W, precomputed for wave sweep calculations
  • phase — random [0, 2*PI] starting oscillation offset
  • speed — CYCLE_SPEED * (0.7–1.3), spark dots get 1.8x multiplier
  • baseR (0–14), baseG (51–255 depending on spark), baseB (220–254) — color personality. R stays low to keep palette cyan/blue, B always high.
  • dark — boolean flag, DARK_SPOTS% of dots are permanently dim
  • darkMax — dark dots capped at 3–20, others at 255
  • brightCap — per-dot brightness ceiling from BRIGHTNESS_MIN/MAX range

Color Oscillation

Triangle wave (not cosine) for linear brightness ramp with no lingering at peaks:

angle = (phase + time * speed) mod 2PI
tRaw = angle < PI ? 1 - 2*angle/PI : -3 + 2*angle/PI   // range: -1 to +1
t = -1 + fadeIn * (tRaw + 1)                              // fade-in envelope

• t >= 0: R lerps toward 60 (NOT 255 — keeps cyan, prevents grey), G/B toward 255
• t < 0: all channels scale toward 0

Brightness Capping

Both use proportional scaling (scale all channels by same ratio to preserve hue):

1. brightCap — if max channel exceeds cap, scale all down
2. darkMax — additional cap for dark-flagged dots

Mouse proximity and wave pulse temporarily lerp these caps toward 255 (uncapping).

Wave Pulse

Two sine waves with configurable wavelength/amplitude/band-width. Pulse intensity follows a sine cycle (WAVE_PULSE seconds). At each trough, wave parameters re-randomize. Sweep stagger (WAVE_SWEEP) creates a left-to-right reveal effect. Per-column wave Y values are precomputed each frame to avoid redundant sin() calls.

Mouse Interaction

• mousemove on heroSection (not canvas) with getBoundingClientRect() coordinate transform
• Quadratic falloff: p = (1 - dist/MOUSE_RADIUS)^2
• Effect: lerps brightness caps toward 255 near cursor (dots brighten)
• No wheel event (removed to avoid interfering with page scroll)

Performance

• TARGET_FPS (default 20) caps frame rate via time-delta gating
• MAX_RENDER_DPR (default 1) reduces internal canvas resolution
• IntersectionObserver pauses rendering when off-screen
• Column-based wave Y precomputation avoids per-dot sin() calls

Config Parameters

People Widget

people.md renders the team section. Profile images use CSS class .avatar.avatar-circle. Custom hover glow is defined in assets/scss/custom.scss.

Development

hugo server -D    # from /Users/max/Library/CloudStorage/Dropbox/TheFuerstLab/

Homepage at http://localhost:1313/.