Mobile app landing page with features and screenshots.
The phone floats in a loop with translateY(-20px), creating a levitation effect that evokes the lightness and modernity of the app. Surrounding floating cards reinforce the depth.
animation: float 6s ease-in-out infinite + box-shadow: 50px Explore 3D & Depth →Cyan and green light orbs move slowly over 15s, creating a living background without distraction. The effect reinforces the app's tech identity and evokes innovation.
animation: heroGlow 15s ease-in-out infinite + radial-gradient Explore Backgrounds →The green dot pulses in a loop to signal something new. A micro-animation that catches the eye without being aggressive and immediately communicates freshness.
animation: pulse 2s ease-in-out infinite + scale(1.2) Explore Utilities →The card rises 8px with a gradient bar appearing at the top (scaleX). The icon enlarges and rotates slightly, and a glow halo appears behind it.
translateY(-8px) + scaleX(0) to scaleX(1) + filter: blur glow Explore Hover & Interactions →A draggable carousel with phone mockups. The active slide enlarges to scale(1.08) and animated dots show position. Visual presentation of app screens.
transform: scale(1.08) + transition 0.5s ease + cursor: grab Explore Gallery & Media →A gradient progress line connects the 3 circular steps. On scroll, the width animates from 0 to 100%, revealing the user journey step by step.
width: 0 to 100% + background: var(--gradient) + transition 1s Explore Data & Visualization →Sections appear with fadeInUp triggered by IntersectionObserver. Content reveals progressively, maintaining engagement and creating a pleasant reading rhythm.
animation: fadeInUp 0.6s ease + IntersectionObserver Explore Scroll & Parallax →