3D Find My interface concept

ROLE
You are a principal frontend engineer, 3D creative developer, and senior product designer specializing in premium interactive experiences.

MISSION
Transform my attached hand-drawn sketch into a polished, functional, interactive 3D application prototype.

The sketch is the source of truth for the interface and product concept. Preserve its core layout, elements, and interactions, but elevate the execution to the quality of a premium consumer app.

Do not simply recreate the drawing as an image. Build a real browser-based prototype that users can interact with.

PROJECT
Build a Find My-inspired 3D experience that helps a user locate a lost set of keys.

01. VISUAL DIRECTION

Create a sophisticated, mobile-first interface with:

- A detailed 3D city environment
- An angled, cinematic map camera
- Procedurally generated buildings, streets, sidewalks, trees, and crosswalks
- Realistic lighting, ambient shadows, and depth
- Smooth camera movement and transitions
- Beautifully designed floating interface cards
- Refined typography and consistent spacing
- Subtle microinteractions and responsive animations

Use a restrained visual language with neutral surfaces, natural greens, and carefully chosen accent colors.

Prioritize visual hierarchy, realism within the chosen art style, and coherent interaction design.

02. CORE USER EXPERIENCE

Implement four connected stages.

STAGE A: MAP VIEW

Show a 3D neighborhood from an elevated perspective.

Display a tracked item marker with a visible location radius.

Add a floating card containing:

Item: Keys
Location: Avenue Marceau
Distance: 14 m
Actions: Play Sound / Find

Make the map interactive with camera rotation, zoom, and smooth transitions.

STAGE B: FINDING MODE

When the user selects Find:

- Animate the camera toward the tracked item
- Highlight a navigational path
- Display directional indicators
- Transition into a closer perspective
- Show an updating distance indicator
- Maintain spatial consistency throughout the animation

STAGE C: NEARBY SEARCH

Create an AR-inspired close-up search experience.

Show a realistic 3D environment with a set of keys resting on a small round table.

Display:

Finding Keys
Distance: 1 m
Animated directional arrow

Make the experience feel like the user is approaching the actual object.

STAGE D: FOUND

Let the user select the keys to complete the search.

Play a subtle success animation, update the interface, and provide an option to restart.

03. INTERACTION REQUIREMENTS

Every visible control must have meaningful behavior.

Implement:

- Interactive camera controls
- Animated item selection
- Functional navigation between stages
- A browser-generated sound preview
- Simulated distance updates
- Interactive object selection
- Back and restart actions
- Loading and transition states

Use deterministic simulated tracking data. Do not claim to access real AirTags, GPS, or Apple Find My services.

04. TECHNICAL STACK

Use:

- React
- TypeScript
- Vite
- Three.js
- React Three Fiber
- Drei
- Motion for UI animations
- Lucide icons
- Modern CSS

Build the environment procedurally.

Avoid paid APIs, API keys, backend dependencies, and external assets that could break the demo.

Keep the code modular, readable, and maintainable.

05. RESPONSIVENESS AND PERFORMANCE

Optimize primarily for a 9:16 mobile viewport while preserving desktop compatibility.

Target smooth animation performance.

Use efficient geometry, instancing where appropriate, controlled pixel ratios, and careful scene cleanup.

Provide accessible controls and respect reduced-motion preferences.

06. DESIGN QUALITY RULES

Avoid:

- Generic dashboard layouts
- Excessive gradients
- Random decorative elements
- Unnecessary floating panels
- Inconsistent component styling
- Abrupt camera transitions
- Fake interactions
- Static screenshots disguised as apps
- Unimplemented buttons

Every visual element should contribute to usability, spatial understanding, or atmosphere.

07. DELIVERY REQUIREMENTS

Deliver a complete runnable project.

Include:

- The full project file structure
- All implementation files
- Complete dependency configuration
- Setup and execution commands
- A short explanation of the architecture
- Clear disclosure of simulated functionality

Do not use pseudocode, unfinished components, or placeholder implementations.

Before finishing, review the code for TypeScript errors, broken imports, missing dependencies, invalid state transitions, and obvious performance issues.

If your environment supports execution, run the application and fix errors.

SUCCESS CRITERIA

The result must allow a user to open a browser, explore a 3D neighborhood, select lost keys, follow an animated navigation experience, locate the keys, and complete the interaction.

It should feel like a cohesive, thoughtfully designed product prototype rather than an isolated visual demonstration.

Start implementing immediately. Make reasonable decisions without asking clarifying questions.

Source: the creator's reply under the post. Kept in its original language, unedited.

Tools the creator mentioned

More product & ads

• 1:07

  3D game builder demo on a cloud AI platform

  4.3M views

• 1:55

  Wildfire progression tracking tool

  1.7M views

• 0:24

  Buildable life-size LEGO duck design

  1.4M views

• 0:19

  Portfolio site built in three prompts

  1.2M views

• 1:02

  Interactive Tokyo last-train map site

  977.8K views

• 1:22

  Apple HomeView mock commercial

  686.1K views

Related articles

• Enterprise Training Share: AI Website Development from 0 to 1 and Beyond

  Website development insights shared at an enterprise training session — from building a site from scratch (0–1) to iterative optimization (1–100), covering a variety of AI-assisted development approaches.

• Vibe Coding Website Development: Four Ways to Build from Scratch

  A summary of four website development approaches from my enterprise training sessions — from dumping raw requirements straight into AI, to leveling up with an AI Website Cloner combined with Design Skills.

• A Practical Guide to Claude Code Skills: Your Secret Weapon for Developer Productivity

  A deep dive into Claude Code's Skills system, covering Design Skills evaluations, SEO audits, code quality guardrails, and other hands-on techniques.

• The Complete Hugging Face Learn Guide: 12 Courses to Run, Fine-Tune, and Deploy Models Yourself

  Hugging Face quietly grew its Learn section to 12 courses this year — half of them brand new. Unlike every other platform out there, HF teaches you how to run, fine-tune, and publish models yourself. You walk away with something real. Here are the 10 courses worth prioritizing.