wordpress-Interactive "Swipe Match" & "Hold to Scan" UI Component
Budget: $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.
Openen op Upwork