Coordinated overlays
The mobile interface coordinates the purchase modal and Vani so they do not stack over each other. It locks the background while a panel is open, restores the visitor's position on close and supports the browser Back action.
VanityFilter Website
A product you can inspect before you buy.
The storefront for a visual product has to show its work.
Sputnik Digital Effects built vanityfilter.com around that job. Visitors can examine retouching examples, choose a license and ask Vani for product help without losing their place. A moonlit garden gives the site its identity. The product remains in the foreground.
PlatformPHP
SceneCSS + Canvas 2D
LanguagesEnglish + Spanish
SupportVani AI
01Visual direction
A garden that moves with the page.
The visual setting gives VanityFilter a distinct home without turning the purchase journey into an animation.
Layered garden artwork and mist shift with native scrolling. Fireflies stay in the margins, while butterflies cross a decorative 2D canvas behind the content. The scene uses CSS transforms and canvas drawing, with no WebGL dependency.
Visitors can pause the scene, and that choice is remembered. Reduced-motion preferences and hidden tabs stop the animation. Reading pages use a quieter fixed composition, keeping long-form help comfortable to follow.
02Product evidence
Let the visitor judge the result.
Skin retouching is a visual decision. Interactive comparisons put the evidence within reach.
Before-and-after controls let visitors move the dividing line across a portrait and examine the treatment themselves. The close-up comparison also offers preset choices, so the page can show how different settings change the same subject.
The presentation connects those examples to the desktop workflow and deeper feature pages.
See the comparisons on the live site
Buying and asking for help fit the phone.
A narrow screen needs more than smaller desktop controls.
Stripe and PayPal
The storefront keeps Stripe and PayPal purchase paths within the same product journey. Creator codes connect promotion links to the offer, while payment events feed the license-delivery workflow. English and Latin American Spanish pages give each audience a localized route through the site.
Product help that follows the published site.
Vani answers product questions inside the storefront, with English and Spanish support connected to the same maintained product knowledge.
Locale-aware Vani
The page locale selects the appropriate Vani tenant on Sputnik's shared AI Chat Worker. Vani explains documented workflows and can collect a consented support handoff when a visitor needs further help.
Website knowledge publishing
Knowledge synchronization is part of website publishing. After a successful upload, the shared tooling reads the live canonical sitemap pages and verifies the new searchable source collection before activating it for both languages. Published guidance can reach Vani without a separate manual article-list rewrite.
Inside the build.
Visual design
A custom storefront with shared page components and a controlled visual setting.
- PHP and shared includesCommon navigation, page assets and locale-aware script loading.
- CSS layer motionGarden artwork and mist respond to native scroll position.
- 2D canvasDecorative butterflies with a capped pixel budget.
- Motion controlsSaved pause state, reduced-motion support and hidden-tab suspension.
Product inspection
Front-end controls let the visitor examine the retouching instead of taking a headline on trust.
- Before-and-after controlsA movable divider exposes original and processed examples.
- Preset selectionClose-up examples show different treatment settings.
- Feature pagesDedicated space for product demonstrations and workflow explanations.
Commerce on mobile
Purchase and support surfaces share the screen without competing for it.
- Coordinated overlaysOnly one mobile purchase or chat surface stays open.
- Focus and scroll handlingBackground interaction is suspended and the page position is restored on close.
- Browser historyBack closes the active mobile overlay.
- Stripe and PayPalTwo purchase paths connected to license fulfillment.
Bilingual support
A shared support runtime serves localized pages and maintained website knowledge.
- Locale-aware VaniEnglish and Latin American Spanish pages select their respective support tenants.
- Sputnik AI Chat WorkerDocumented product guidance and consented support handoffs.
- Website knowledge publishingLive canonical pages populate the searchable source collection.
- Verified activationPublished knowledge shards are checked before both locales use the new collection.
Explore the desktop application.
See the computer-vision pipeline and Windows product behind this storefront.
See VanityFilter 2.8