Phantom Checker — Drop Monitoring Conversion Site · beiryu
Phantom Checker — Drop Monitoring Conversion Site
Live
A conversion-focused site for a retail product-drop monitoring service, centred on a two-axis pricing configurator that resolves monthly event volume against seat count — with the entire scroll and header animation layer built directly on platform primitives rather than a motion library.
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.
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
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.
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
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
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.