Fathom / Front-end design study / 2026
Building an editorial product page around scroll.
Fathom is a frontend study for a fictional diving-equipment brand, using one-time React entry checks and CSS motion to introduce its product story.
- ROLE
- Frontend engineering and design
- STATE OF THE BUILD
- Study
- RECORD UPDATED
THE WORK
The project.
Fathom presents a fictional diving-equipment brand through photography, material details and a seabed-contour illustration. The React page uses motion to introduce those sections as they enter view, then leaves them visible when the reader scrolls back. Its product specifications and testimonial-style copy belong to the design concept, not verified equipment or customer evidence.
A reusable hook handles the small piece of state each reveal needs: whether its element has entered the viewport. On first entry it sets that state and disconnects its observer. CSS then controls opacity, movement and staggered timing, so React does not calculate reveal values on each animation frame. The contour SVG uses the same hook with a different threshold and its own stroke animation.
Reduced-motion styles restore visible content and remove the reveal transition. The ordinary path still starts hidden and assumes IntersectionObserver is available, leaving an important fallback to address before calling the reading experience resilient to JavaScript or browser-support failures.
IMPLEMENTATION
Design choices.
- Keep a section visible after its first reveal. Reverse scrolling then returns to the content without replaying the entrance, while each wrapper remains responsible for disconnecting its own observer.
- Use React for the entry decision and CSS for the transition. Five typed delay choices provide staggered timing without introducing per-frame state updates for the reveals.
- Make reduced-motion content visible in CSS, but recognize that this does not skip hook creation. The normal hidden baseline still needs a fallback when JavaScript or IntersectionObserver is unavailable.
HOW IT FITS TOGETHER
Architecture.
- Reveal passes an element ref to useInView and turns its latched entry state into visibility and delay classes. The hook disconnects after first entry and on cleanup, keeping observer lifetime local to that wrapper.
- CSS consumes the classes to animate opacity and position. The contour SVG shares the entry mechanism with a different threshold, while its stroke timing remains in CSS rather than frame-by-frame React updates.
- Navigation has a separate passive scroll listener with cleanup. The page gives the remote hero image loading priority and uses lazy loading for imagery farther down the story.
Explore the architecture map8 components · 9 connections
Fathom page composition and motion
Page markup, viewport state and visual transitions have separate responsibilities.
React page
Browser behavior
Visual system
Scroll or drag the background to move. Use the zoom buttons to resize.Arrow keys move between components. Enter selects.
Choose a component to explore
Select a numbered component on the map or use the component menu. Its details and connections will appear here.
No component selected.
All connections (9)
- 01 · Landing-page composition → 02 · Reusable reveal wrappersection content · Direct call
- 02 · Reusable reveal wrapper → 03 · Viewport observersobserve ref · Direct call
- 03 · Viewport observers → 02 · Reusable reveal wrappervisible state · Response / return
- 02 · Reusable reveal wrapper → 05 · Authored CSSstate classes · Direct call
- 01 · Landing-page composition → 04 · Navigation scroll statemount listener · Direct call
- 01 · Landing-page composition → 06 · Bathymetric SVGinline illustration · Direct call
- 06 · Bathymetric SVG → 05 · Authored CSSstroke state · Direct call
- 01 · Landing-page composition → 07 · Remote imagesimage references · Direct call
- 05 · Authored CSS → 08 · Reduced-motion stylespreference override · Direct call
MADE WITH
React · TypeScript · Vite · CSS · SVG · IntersectionObserver
CHECKS & RESULTS
What was checked.
A source review shows what the code does. It is not a fresh test of the running app.
Code and development records reviewedReviewed
The code, tests and available development records were checked. Reported test results keep their original scope. No fresh app or live deployment check was run for this write-up.
- Scope of this check
- Code review, not a fresh run of the app
NEXT
Still to work through.
The source shows a small, reusable division between viewport detection and animation, with a clear unresolved fallback. The next check is a browser pass across ordinary scrolling, reduced motion and unavailable observer support, including whether the content stays readable. This account inspected uncommitted source; it does not establish a fresh browser result or a recorded development sequence.