workly

Prompt

Create an **award-quality, motion-design-driven promotional website for Workly**, a local-worker discovery app. This should NOT look like a typical SaaS landing page or a template generated by an AI website builder. The design should feel like it was created by a **professional motion designer + product designer + creative developer** for a premium startup launch campaign. Think of the website as an **interactive product commercial**. The user should feel like they are watching a beautifully art-directed 60–90 second product film while scrolling through the website. --- # CORE CREATIVE DIRECTION Brand: **WORKLY** Concept: **Find local help. Right when you need it.** Core visual idea: **Location → Discovery → Connection → Work Done** Build the entire experience around this journey. The motion should communicate the product's purpose instead of simply decorating the page. Every animation should have a reason. Avoid: * Generic fade-in animations * Random floating cards * Excessive glassmorphism * Template-looking sections * Overused gradient blobs * Bouncy animations everywhere * Excessive rounded cards * Generic stock illustrations * Corporate SaaS aesthetics Instead use: * Cinematic transitions * Strong typography * Spatial composition * Depth * Layering * Parallax * Camera-like movement * Mask reveals * Clip-path transitions * Motion blur where appropriate * Scale transitions * Directional movement * Smooth easing * Scroll choreography * Carefully controlled overshoot * Visual continuity between sections --- # EXPERIENCE PHILOSOPHY The entire page should feel like ONE continuous animation. Do not design each section independently. Elements from one scene should transform into elements in the next scene. For example: A location pin in the hero can travel across the screen and become a worker location marker. A worker card can expand into a full worker profile. A phone screenshot can zoom toward the user and transition into the next section. A map can zoom out and transform into the next scene. This creates the feeling of a professionally directed motion piece. --- # HERO — THE OPENING SHOT Create a dramatic full-screen opening. Background: Very dark or brand-derived premium background. Place the Workly logo subtly in the opening. Then introduce the headline with cinematic typography: **FIND HELP.** Pause. Then: **RIGHT AROUND YOU.** The typography should enter using a combination of: * Mask reveal * Vertical movement * Slight scale * Letter-spacing animation * Opacity * Motion blur Do NOT simply fade the text in. The second line should feel like it arrives with momentum. --- # LOCATION ANIMATION After the headline appears, introduce a glowing location point. A small dot appears. Then a radius expands from the dot. Then multiple location points appear around it. The camera slowly pulls back. The dots become: * Electrician * Plumber * Cleaner * Mechanic * Tutor * Carpenter The location network should feel alive. Use subtle connecting lines. Then everything rapidly converges toward one location. Reveal the Workly app. --- # APP REVEAL Use the supplied Workly app screenshot. Place it inside a premium 3D-style smartphone frame. The phone should appear almost physically inside the scene. Animation: 1. Phone begins extremely close to camera. 2. Camera pulls backward. 3. Phone rotates slightly. 4. UI becomes visible. 5. Floating location markers orbit around it. 6. Worker cards emerge from behind the phone. 7. The phone settles into position. Use realistic depth and shadows. Do not over-rotate the phone. The movement should feel expensive and controlled. --- # HERO COPY Use: **Find local workers. Without the hassle.** Supporting text: **Discover skilled workers and service providers near you with Workly.** CTA: **Explore Workly** Secondary CTA: **How it works** --- # TRANSITION INTO THE STORY As the user scrolls, do not abruptly switch to another section. Instead: The smartphone slowly moves toward the camera. The screen fills the entire viewport. The app interface becomes the next scene. This should feel like entering the app. --- # SCENE 01 — WHAT DO YOU NEED? Show the Workly app interface. Animate service categories appearing one by one. Examples: Electrician Plumber Cleaner Mechanic Carpenter Painter Use large typography: **WHAT DO YOU NEED?** Then animate the selected service. For example: **Electrician** The interface responds. The camera pushes into the selected service. --- # SCENE 02 — FIND SOMEONE NEARBY Transition from the service interface into a map. The map fills the screen. Camera starts high above the map. Then smoothly zooms toward a neighborhood. Worker location markers appear. Each marker has subtle personality. One marker pulses. Then another. Then several. Headline: **THE RIGHT PERSON COULD BE NEARBY.** Worker cards slide into the scene. Example: **Raj** Electrician ★ 4.9 1.2 km away Keep all worker data clearly positioned as demo/example content. --- # MAP MOTION The map should behave like a cinematic camera environment. Use: * Slow zoom * Pan * Depth layers * Location pulses * Moving routes * Connecting lines * Subtle lighting Avoid making it look like a generic Google Maps clone. Create an abstract Workly-branded map aesthetic. --- # SCENE 03 — CHOOSE One worker card becomes the focal point. Other cards move away and become visually secondary. The selected card expands. Show: Profile image Name Service Rating Distance Availability CTA Then animate a connection line from the customer to the worker. Headline: **FOUND YOUR MATCH.** --- # SCENE 04 — CONNECT The interface transitions into a communication/contact experience. Use animated UI elements representing: * Contact * Call * Message * Job details The animation should feel fast and effortless. Headline: **CONNECT.** Then: **GET IT DONE.** The two words should appear as separate cinematic moments. --- # SCENE 05 — THE HUMAN MOMENT Slow the animation down. Introduce a beautiful lifestyle visual showing a customer and local worker interacting. The visual should feel authentic, warm and human. Use the Workly brand colors subtly. Text: **LOCAL HELP. HUMAN CONNECTION.** This section should provide emotional contrast after the faster UI sequences. --- # FEATURE CHOREOGRAPHY Do NOT create a boring 3×2 grid of feature cards. Instead create a horizontal or vertical cinematic sequence. Each feature gets its own visual moment. ### FEATURE 01 **Nearby** A location marker travels across the screen. ### FEATURE 02 **Simple** A complicated interface collapses into a simple Workly interaction. ### FEATURE 03 **Discover** Worker cards appear from different directions and organize themselves. ### FEATURE 04 **Connect** Two points on the screen move toward each other and connect. ### FEATURE 05 **Local** A network of nearby people forms around the user's location. Each feature should transition into the next. --- # APP SHOWCASE — CINEMATIC PHONE SEQUENCE Create a premium smartphone showcase. Use the actual supplied Workly screenshots. Create 3–4 phones at different depths. Do not simply place phones side by side. Use cinematic composition: Foreground phone: 100% scale Middle phones: 70–80% scale Background phones: 40–50% scale During scrolling: * Foreground phone moves * Background phones parallax * Screens change * Camera shifts * Phones rotate subtly * Depth changes At one point, bring all phones together into a single composition. Headline: **EVERYTHING YOU NEED. IN ONE PLACE.** --- # TYPOGRAPHY Typography is one of the main visual elements. Use a modern premium sans-serif. Large headlines should feel editorial and cinematic. Use: * Huge display typography * Tight line height * Controlled letter spacing * Weight contrast * Text masking * Word-by-word animation * Line-by-line animation Some sections should contain extremely large typography occupying most of the viewport. Example: **LOCAL.** Then: **SIMPLE.** Then: **CONNECTED.** --- # MOTION SYSTEM Create a consistent professional motion system. Primary easing: Use smooth custom cubic-bezier easing rather than default CSS easing. Use: * Slow ease-out for large objects * Fast ease-out for UI * Smooth spring-like motion for small elements * Controlled overshoot only when appropriate Motion hierarchy: Large objects = slow Medium UI = medium Small UI details = fast This creates realistic perceived depth. --- # SCROLL EXPERIENCE Scrolling should control the storytelling. Use scroll-driven animations. Important scenes should occupy approximately: **100vh–200vh** when necessary. Use sticky scenes where appropriate. Example: A section remains pinned while: 0–25% → headline appears 25–50% → phone enters 50–75% → app UI transforms 75–100% → transition to next scene Then release the section. This should feel like a professional motion-design timeline. --- # TRANSITIONS Create custom transitions between scenes. Possible techniques: * Mask expansion * Circular reveal * Image zoom * Smartphone screen takeover * Map zoom * Typography wipe * Horizontal camera movement * Vertical camera movement * Color transition * Shape morphing Never use a simple hard cut unless intentionally used for dramatic pacing. --- # COLOR Use the supplied Workly branding as the source of truth. Extract: * Primary brand color * Secondary color * Accent color * Background color * Text color Create a sophisticated color system. Use color changes to distinguish scenes. For example: Dark opening → Brand color → Light app scene → Dark map scene → Warm human scene → Brand-colored final CTA --- # SOUND-READY DESIGN Do not implement audio unless requested. However, design the animation timing as if it will eventually be synchronized to music. Create natural "beats" in the animation: Headline hit UI reveal Location pulse Phone reveal Map zoom Worker selection Final logo reveal The animation should be capable of being synchronized with sound later. --- # FINAL CTA — CINEMATIC ENDING After the entire journey, slow everything down. The background becomes minimal. A single location point appears. Then the Workly logo emerges. Headline: **HELP IS CLOSER THAN YOU THINK.** Supporting text: **Discover local workers with Workly.** CTA: **Get Started** Then perform a final subtle zoom-out. The Workly logo remains centered. End with a clean, premium finish. --- # TECHNICAL IMPLEMENTATION Use: Next.js React TypeScript Tailwind CSS Framer Motion Use CSS transforms and GPU-friendly animation wherever possible. Use React components for each scene. Suggested architecture: /components/motion/ HeroScene.tsx LocationScene.tsx AppReveal.tsx ServiceScene.tsx MapScene.tsx WorkerScene.tsx ConnectionScene.tsx PhoneShowcase.tsx FeatureStory.tsx FinalCTA.tsx Use reusable motion variants. Keep the code clean and maintainable. --- # IMPORTANT PERFORMANCE REQUIREMENT Although the site should look extremely cinematic, it must remain performant. Use: * transform * opacity * scale * translate * rotate for most animation. Avoid constantly animating expensive layout properties. Use IntersectionObserver / Framer Motion viewport detection where appropriate. Lazy load large images. Respect: prefers-reduced-motion For reduced-motion users, provide a simplified version of the experience. --- # ASSET HANDLING I will provide: * Workly logo * App screenshots * App icons * Worker images * Other brand assets Use the real supplied assets. Never replace the Workly logo with an AI-generated logo. Never alter the screenshots. Preserve their original aspect ratio. Create: /public/assets/workly/ and organize assets cleanly. --- # DESIGN QUALITY BAR The final result should feel closer to: **Apple product launch × modern motion studio × premium startup campaign** than: **AI-generated SaaS landing page.** The most important requirement is: ## MOTION SHOULD TELL THE STORY. Do not add animation simply because animation is possible. Every movement should communicate: location discovery proximity selection connection completion The final website should make someone think: **"This looks like a professional product commercial."** rather than: **"This is a website with some animations."**

A system prompt was added to support web rendering