← Zákazky

wordpress-Interactive "Swipe Match" & "Hold to Scan" UI Component

Rozpočet: $15.0 - $25.0 HOURLY / PART_TIME ⭐ 0.00 (0) SGP

javascript, html, wordpress, web-design, css, web-programming, graphic-design

We are a premium e-commerce brand looking for a Front-End Animation Wizard to build a standalone, highly interactive UI module for our website. This is a pure front-end project (no backend integration required). You will deliver clean, modular code (HTML/CSS/JS or a React/Vue component) that we will plug into our site. If you are obsessed with 60FPS fluid animations, Tinder-style swipe physics, and native-app-level touch interactions, this job is for you. What You Will Build (Two Core Features): 1. The "Aura Scan" (Press & Hold Interaction) The Interaction: Users must long-press a central target area on their screen for 2.5 seconds to "scan" their vibe. The Animation: While holding, a beautiful breathing/blur gradient CSS animation and a progress indicator will track the 2.5 seconds. The Catch: If the user releases their finger before 2.5 seconds, the animation must instantly abort/reset with a "Keep holding..." prompt. Success State: If held successfully, trigger a mobile haptic vibration (if supported) and fade in a daily result card. 2. "Daily Picks" (Tinder-Style Swipe Match) The Interaction: A stack of image cards that users can drag and swipe Right (Like) or Left (Nope). The Physics: We need natural drag resistance, tilt effects as the card moves off-center, and a buttery-smooth release. Crucial Technical Requirements: Silky Smooth 60FPS: You must use transform (translate, rotate, scale) and opacity exclusively for your animations. Absolutely no animating top/left/margin to prevent layout thrashing on mobile devices. Mastery of Touch Events: Flawless handling of touchstart, touchmove, and touchend tightly coupled with JS timers (setTimeout/clearTimeout) for the "Hold to Scan" logic. No ghost triggers. Completely Decoupled: The code must be independent. You will receive data via a JSON input and output user actions (like swiped cards) via JS callbacks. No hardcoded links. CSS Isolation: Strict CSS namespacing or CSS Modules to ensure zero styling conflicts with our main wordpress theme.
Otvoriť na Upwork