Phantom Checker — Drop Monitoring Conversion Site

Technology Stack

React 18, TypeScript, Vite 7, Tailwind CSS 3.4, tailwindcss-animate, React Router, HugeIcons, Fontsource, Vercel

Overview

Duration: 3/2026

Phantom Checker is a monitoring service for resellers: it watches retailers for product drops and restocks and pushes alerts the moment something goes live. Its buyers live in Discord, Telegram and Whop, which is where the product is distributed and where this page has to send them.

That audience shapes everything. They are technical, sceptical, and comparing several monitors at once, so the page leads with coverage and detection speed rather than brand language, and it puts real pricing on the page instead of hiding it behind a sales call — in this category, a "contact us" pricing section is read as a disqualification.

Page Structure

Each section is an isolated module composed into a single conversion flow:

• Hero dashboard — the product UI itself as the hero image, rather than an illustration
• Dashboard features — what the monitor does once you are inside it
• Platform coverage — the five-part capability story: all-platform coverage, drop detection, filtering against your own requirements, privacy, and alerting
• Pricing — the interactive configurator
• Testimonials and FAQ — paired in one section, so the objection and the reassurance sit together
• Early monitor add-on — an upsell surfaced in a modal rather than given its own section and diluting the primary path

Interactive Pricing

The pricing section is the most engineered part of the page, because the product does not price on one axis. Cost depends on monthly event volume and on how many people need a seat, and the two interact — the seat tiers available differ per volume bucket.

It is modelled as a matrix rather than a set of plan cards:

• Volume buckets run 100 · 200 · 500 · 750 · 1,000 as a row of pills
• Seat tiers per bucket are offered on a slider, and the options change with the bucket: the entry bucket is single-user only, while the top bucket opens up four through ten users
• Prices resolve from $175/month at the entry point to $1,500/month at the top
• Selection is clamped, not reset — moving from a bucket with seven seat options to one with three clamps to the last valid tier rather than snapping back to the first, so a visitor exploring buckets never loses their place and never has to re-enter what they already told the page

Encoding it this way makes the price grid data, so adding a tier is an edit to a table rather than another hand-built card, and marketing can change pricing without an engineer rebuilding the section.

Scroll Choreography

Animation is built on IntersectionObserver directly rather than pulling in a motion library, keeping the bundle small on a page whose audience is often on mobile data:

• A reveal hook returns a ref and a visibility flag, tuned so an element must clear the fold before it counts as revealed
• It disconnects on first trigger where appropriate, rather than leaving one live observer per element running for the lifetime of the page
• A reveal wrapper exposes five variants — fade-up, fade-in, scale-in, slide-left, slide-right — each pairing a hidden state with a matching keyframe, plus per-element delay and duration so a section can be choreographed rather than fired all at once

Header Behaviour

The header animator is a plain function with no framework dependency — it takes an element and a sentinel, toggles classes, and returns its own teardown:

• A sentinel above the header drives the scrolled state through an observer, which is far more reliable than reading scroll offsets against a header whose own height can change
• Directional hide — scrolling down past a threshold hides the bar, scrolling up brings it back, with a suppression callback so an open mobile menu can veto it
• Frame-throttled so the scroll handler stays off the critical path
• Reduced motion is honoured first — if the visitor has asked for it, the animator pins the header to its resting state and returns immediately, never attaching a listener at all

Build Details

• Base-path-safe assets — every static asset resolves through the build's base URL, so the site keeps working if it is ever served from a sub-path rather than the domain root
• Self-hosted typeface, keeping the font off a third-party origin on the critical path
• Per-icon imports rather than a bundled icon set

The theme running through this build is doing the interactive work directly on platform primitives — observers, frame scheduling, a data table — and spending the complexity budget on the pricing model instead, which is the part a visitor actually has to understand before they will buy.