Client
VeltixTimeline
Studio buildProduct
Concept build, VPN product marketing siteIndustry
SaaSSecurity SoftwareMarketingVeltix is a concept build for a VPN product, produced in-house as a reference rather than for a client. Two problems shaped it. The glass panels on the platform cards are the design's signature, and the usual backdrop-filter approach recomputes an identical result every frame at a measured 20% dropped-frame cost. Separately, the design reference presented real company logos as customers, repeated the same encryption paragraph under three different feature headings, and offered nothing a reader could verify.
Built the platform cards as real refraction, passing a static copy of the section's light through an SVG displacement filter with three passes at different scales for red, green, and blue dispersion, rasterised once rather than recomputed per frame.
Confirmed it is a lens and not a blur with a 30px stripe test: 22 identical half-period samples through the centre of the pane, stretched values only in the outer bevel band.
Replaced the reference design's real company logos with invented names, since presenting real companies as customers of a product they have not endorsed is fabricated social proof, and left out testimonials, ratings, and review counts entirely.
Measured every text colour against its actual rendered backdrop at the 90th percentile and darkened the two tokens that failed, a micro-label grey at 2.49:1 and an accent green one hundredth short of AA.
About 172 KB first-load weight on desktop including the hero WebP, with source photographs cut from roughly 2 MB each to a 214 KB largest shipped variant.
WCAG AA throughout, at 17:1 on large text and 5.0 to 5.3:1 on small text, measured against real backdrops rather than nominal tokens.
Zero horizontal overflow, verified at 500, 768, 1024, 1440, and 1920.
Seven JavaScript modules sharing nothing but a reduced-motion query, each guarding its own DOM lookups, so removing a section from the HTML cannot throw.
