Senior Developer - Website Inline Live Demos

Our client is hiring a senior to build and integrate three interactive inline live demo instances into their newly rebuilt website (built on Framer), and review codebase to ensure cross-device and cross-browser optimization.

Location : Toronto ideally but full remote in the same timezone is accepted

Start Date : ASAP

Language : English-Speaker only

1) Scope of Demos :

• Makeup Virtual Try-On (VTO)
• Hair Virtual Try-On (VTO)
• Skin Analysis

Note: Hair and Makeup VTO share the exact same UI architecture and step-by-step user
flow, differentiated only by the product catalog (makeup vs. hair colour/styling SKUs).

2) Tech Requirement

• Build a custom web component using ReactJS + Typescript
• Modular and maintainable code
• Analytics and monitoring : Website is using Framer which provides react hook for analytics
• Device and browser compatibility
• Responsive design : Design is responsive based on container dimensions of the inline container
• Makeup & Hair Demo : One repo/codebase should be able to switch between a makeup and hair
experience based on the category specified in custom component / They’ll provide Makeup and Hair VTO SDKs / They’ll provide ModiFace CMS API for the VTO rendering data and product details / Technologies used should be managed in separate config files for easy configuration and future upgrade, ie :
▪ VTO SDK version
▪ CMS API version
• Skin Analysis Demo : Selfie taking step should utilize ModiFace Makeup VTO SDK’s photo
capturing / They'll provide web API for photo analysis / Results from analysis to be displayed in final step / Technologies used should be managed in separate config files for easy configuration and future upgrade, ie
▪ VTO SDK version
▪ API version

3. Core Functional & Architectural Requirements

• Inline Experience:
o The demos must exist inline within the webpage layout rather than opening
as full-screen overlays or separate page takeovers.
o Interactive Guidance Indicators: Demo must include animated or visual
indicators (such as the "Swipe for shades" prompt with a pulsing tap/gesture
icon seen in the reference design) to clearly guide users on where to click,
swipe, or interact throughout the demo experience.
• VTO Demos (Makeup & Hair): Require real-time live camera AR rendering
capabilities. (Handled by our SDK)
• Skin Analysis: Performed via a selfie module / image upload flow.
• API/SDK Integration & Customization:
o The underlying APIs and SDKs already exist.
o The contractor must integrate these SDKs and modify their look and feel to
precisely match the UI/UX provided in the design wireframes.
• Framer Integration & Cross-Browser/Device Compatibility:
o The website is built in Framer.
o The developer must inspect the Framer backend/codebase to ensure
seamless implementation, responsive behavior, and robust cross-browser
and cross-device performance (desktop and mobile).

4. Detailed User Flows

Makeup & Hair VTO Flow:
Design Requirement
• Entry Screen: Inline card with "Try-On Live" prompt, featuring a Lipstick product for
the user to try-on. (Details of product will be provided).
• Privacy Consent: "Our privacy promise to you" screen with Terms of Use / Privacy
Policy agreement.
• Active Live VTO: Interactive camera view with product swatch selection carousel at
the bottom.
• Fallback: Camera Access Permission: Handling device camera prompts (with a
fallback/error state if access is denied).

Skin Analysis Flow :
Design Requirement
• Landing / Entry Screen: Inline card with "Try a Skin Analysis" prompt.
• Privacy Consent: Consent screen for skin diagnostic terms.
• Capture / Upload: Selfie capture module (camera view with framing guide, photo
upload option, and instructions to remove glasses/hair).
• Analysis & Processing: "Analyzing selfie..." loading states, success confirmation
("Analyzed. Thank you!"), or error handling ("Oops! Something went wrong").
• Results Screen: Comprehensive breakdown of top skin concerns (e.g., Dullness,
Enlarged Pores, Fine Lines) with ratings and follow-up actions.

5. Integrating the Demos inline

We hope to have the demos appear in an iPhone frame within the webpage, as part of a larger section, with potential for a full-screen implementation on Mobile-web.

Integration of tutorial-style indicators, showing the user where they can click to begin the
experience, or interact with the demo throughout

6. What they will provide

• Full UI Design in Figma
• Bitbucket git repository access
• ModiFace Makeup and Hair Javascript SDK and documentation
• ModiFace CMS API (for VTO calibration data) spec
• Framer account access for testing the integration. Note, the developer will be asked
to make a branch of the site and test it on this branched environment

7. Next Steps for Alignment

• Review technical feasibility of embedding custom SDKs inline within Framer
components.
• Outline asset handoff (Figma design system, specs, and design tokens).
• Align on technical feasibility and planning for Framer codebase assessment
• Discuss delivery timelines, milestones, and testing phases across devices.

Informations de la mission :

• Début de mission : 19/10/2026
• Durée : 3 mois
• Date de publication : 19/10/2026
• Date limite de candidature : 23/10/2026