Aevion — Autonomous LiDAR Drone

Six prompts, in build order. Each one describes the visual language, not the original site.

• Main build prompt+−

  Copy

  Use the following dimensions and timings as reconstruction targets inferred from the reference, not exact measurements of the original implementation. Build an original industrial-aerospace product experience around one hero asset: a pale, compact quadcopter carrying a dark sensor module, rendered as a hovering specimen in a large off-white technical field. The defining composition is the drone’s continuous, scroll-led movement through a sparse instrument interface—not a conventional product landing page.
  
  At the 1440×900 reference framing, create a near-white (#fafafa) page with an approximately 13px outer horizontal inset and a fixed ~40px masthead. Place a tiny monochrome personal mark and product-category label at top left, a restrained credit/status label centered, and a time/status plus ~34×18px light-grey menu control at right. Use Switzer for all human-readable text and protoMono for tiny system labels. Main editorial text should be roughly 31–38px, weight 400, line-height ~1.04; interface text ~8–11px; metadata around 7–9px with uppercase or bracket-like notation and generous tracking.
  
  Use a fixed WebGL canvas beneath the masthead for the object, with DOM content layers above it. The first panel is a cool pale-blue-grey (#dbe5e6) horizontal scan field around 94px tall. Establish the drone front-on, centered at roughly 330–430px wide, hovering in the lower half of the viewport. Its body is matte white/silver with dark charcoal lens glass, subtle pale aqua reflections and transparent propeller discs blurred by rotation. Fade in giant, extremely low-contrast outline-like display lettering behind the drone during the first ~2 seconds; it should nearly disappear into the atmosphere and must not become a bold title treatment. A two-line supporting statement settles at lower left while a tiny scroll cue occupies lower right.
  
  As scroll progress advances, transition through tall editorial panels rather than card sections. Introduce a central vertical divider. Stage an approximately 50/50 split: an oversized three-line claim at left and a close three-quarter drone view at right, with the model passing behind the grid rules but in front of the faded background typography. Make the words charcoal at their active focal point and let the trailing or leading lines fall toward #c3c4c4. The drone should drift horizontally and rotate about its vertical axis, preserving hover altitude while the propellers remain softly blurred.
  
  Next, use an approximately 150px-tall ruled section header: a huge one-word black label begins at left, a miniature section identifier sits beneath it, and a small outlined circular chapter index sits at the far right. Align the large drone at right/center across the following white panel. Put a short, two-line engineering summary in the right half, beginning around the panel midline; progressively dim secondary lines to a very light grey. Avoid named products, original copy or brands: use your own concise inspection-system claims and specifications.
  
  Conclude this visible sequence with the drone suspended over a faint semicircular radar geometry. The arc begins around the mid-page horizontal rule and rises behind the object. Place three equal specification cells beneath it, separated by vertical rules and bounded by horizontal rules. Each cell gets one large numerical value, a tiny monospaced bracketed descriptor, and a subtle active/inactive opacity state. The selected center cell gets a ~58px circular control straddling the boundary above it, outlined in grey with a 3×3 dot icon. Over the last few seconds, shift emphasis from the first value to the last while the drone turns to face more forward and small tick marks appear on the arc.
  
  Use CSS Grid for all rules and editorial alignment, and a WebGL scene for the drone, camera and rotor blur. A glTF asset with physically based white plastic, brushed-metal and dark-glass materials is suitable. Use an original licensed model or create one; do not use logos or copied promotional imagery. Use environment lighting with a broad cool-white key, weak fill, ambient occlusion and minimal ground shadow. Preserve empty space: no feature-card grid, testimonials, glossy gradients, oversized rounded CTA pills, glassmorphism or heavy shadows. Ensure keyboard-accessible menu and scanner controls, meaningful text equivalents for numerical figures, sufficient contrast for essential text, and a static raster or simplified CSS/SVG fallback if WebGL cannot start. Respect reduced motion by showing a stable frontal render and discrete non-parallax section changes. Keep canvas rendering within a sensible frame budget and pause or throttle when offscreen.

• Build frontend+−

  Copy

  Structure this as a single long scroll scene with a fixed AppShell, a PersistentMasthead, a SceneCanvas, and semantic DOM sections: IntroPanel, StatementPanel, EngineeringPanel and MetricsPanel. Keep the 3D scene independent from copy components. SceneCanvas owns the renderer, loaded model, camera rig, lights, reduced-motion mode and a normalized scrollProgress value. Pass named choreography checkpoints to a DroneRig rather than scattering positional values through section components: introFront, diagonalRight, sideProfile, and radarFront. DroneRig interpolates position, quaternion rotation, scale and rotor speed between checkpoints.
  
  Use a ScrollProgress provider based on requestAnimationFrame plus element ranges, or a scroll animation library’s progress callbacks. Store progress as a ref for render-loop reads; do not re-render React on every scroll tick. DOM sections expose refs only to register start/end ranges. The metrics selection may be local state in MetricsPanel; synchronize it to a small target camera/drone pose only if it is intentionally interactive. Menu state belongs to AppShell.
  
  Define CSS variables for --paper:#fafafa, --scan:#dbe5e6, --rule:#c3c4c4, --muted:#abacac, --ink:#202a2c, masthead height, outer gutter and grid line color. Build every panel using a shared .technical-grid background or pseudo-elements, with actual semantic borders where they communicate table structure. Use CSS grid for the two-column claim and three-column metrics rail; use absolute positioning only for the radar art and canvas-aligned overlays. Give the canvas fixed positioning with pointer-events:none unless later adding deliberate object inspection.
  
  Load the 3D asset lazily after first content paint, use Suspense with a static image placeholder, and isolate WebGL errors in an error boundary. Keep the render loop demand-driven where practical; continuously render only while scroll momentum, rotor animation or interactive focus requires it. Use progressive enhancement: DOM copy and rules remain fully usable without the scene. Prevent layout shifts by reserving viewport section heights and aspect-ratio boxes for fallback imagery.

• Generate assets+−

  Copy

  Create or license an original quadcopter model rather than using another company’s product render. Target a compact four-arm inspection aircraft with folded-looking mechanical joints, a centrally mounted black sensor/camera pod, pale warm-grey polymer shells, satin aluminum fasteners and small mint/cool-blue reflective accents. Build it in Blender as a clean glTF 2.0 scene with separate named meshes for fuselage, arms, landing legs, sensor pod and each rotor. Keep the model at real-world proportions and orient its nose toward -Z or document its axis consistently.
  
  Use 2K PBR maps initially: base color, metallic-roughness and normal maps for the body; use a distinct dark glossy material for lens glass. Bake fine panel seams, small screws and vent detail into normal/AO maps where silhouette does not need geometry. Make four propeller meshes independently rotatable. Export a visually faithful desktop asset ideally below roughly 6–10MB after Draco or Meshopt geometry compression and KTX2/BasisU texture conversion. Test a simplified mobile LOD with fewer arm-edge bevels and 1K maps. Preserve enough bevel geometry for grazing highlights; a perfectly flat low-poly craft will break the illusion.
  
  Produce a static fallback render at roughly 1600px wide with alpha or an off-white background matching the page. Render front and three-quarter right variants only if section-specific fallbacks are necessary; otherwise one front-three-quarter image is enough. Apply atmospheric bloom, soft propeller streaks and floorless studio lighting in the render pipeline, not by embedding another brand’s imagery. The faint scan arc, ticks, bracket labels and 3×3 dot glyph should be authored as lightweight inline SVG, using a roughly 600×330 viewBox for the half-dial. Keep its paths unfilled, 1px-equivalent strokes, and make labels live HTML for accessibility and crisp scaling. Any giant ghost lettering should be live text with low opacity, not an image.

• Add animations+−

  Copy

  Drive the object with scroll progress, while retaining a short, quiet idle hover when scrolling stops. Across the first roughly 2 seconds of the reference-like introduction, fade the scan band from transparent to pale blue-grey and bring in the frontal drone with opacity plus a small scale settle, around 700–1100ms using cubic-bezier(.22,.61,.36,1). Fade ghost display lettering behind it over roughly 900ms at low opacity; delay the lower-left summary by about 150–250ms. It should feel like a laboratory instrument booting, not a flashy reveal.
  
  Map the main scroll story to four smooth camera/drone keyframes. Begin centered and front-on; move into a right-weighted three-quarter close view during the claim panel; travel to a broad side profile through the engineering panel; finish nearer frontal and centered above the radar. Use quaternion slerp for rotation, interpolation with eased progress such as cubic in-out, and target roughly 0.5–0.9 seconds of inertial smoothing after scrolling. Avoid sudden section snaps. Animate the rotors independently at a believable high angular speed, but use motion-blurred translucent discs or shader blur at normal viewing distances; literal sharp spinning blades strobe badly.
  
  Reveal copy by opacity and 8–16px vertical translation over around 450–650ms as its panel reaches approximately 35–50% viewport visibility. Large active text can shift from #c3c4c4 to dark ink, while inactive text returns gradually to muted grey. Draw scan-arc paths with stroke-dashoffset over roughly 700ms and stagger ticks by ~35–60ms. Fade the three metrics in with about 100ms offsets, then move active emphasis between values in ~250ms. The dot control may gently brighten on focus or hover; do not make it pulse continuously.
  
  Run scroll calculations in requestAnimationFrame, cache bounds on resize, and keep the WebGL update budget under roughly 16.7ms/frame on desktop. On hover-capable devices, allow a tiny bounded pointer parallax of around 1–2 degrees on the camera rig, with no object picking required. Under prefers-reduced-motion, stop rotor rotation, hold a stable three-quarter image or static scene, replace scrubbed transforms with simple opacity changes, and show the complete radar and all metrics without timed drawing. Pause rendering in hidden tabs and honor page visibility.

• Responsive polish+−

  Copy

  Keep the fixed utility masthead, sparse paper field and drone-as-specimen signature at every width, but simplify the choreography rather than shrinking desktop composition blindly. Above roughly 1100px, retain the near-full-width 12–16px outer gutter, 50/50 editorial split, giant pale background lettering and three equal metric cells. Size the headline around 31–38px and maintain generous viewport-height panels so the canvas has room to breathe.
  
  Between roughly 720px and 1100px, reduce the masthead’s nonessential center credit first, use a ~20–28px editorial statement, and keep the drone centered or slightly right rather than allowing it to overlap text. The two-column panels can retain their divider but shift copy into a contained lower-left block with a stronger off-white backing if object contrast becomes unreliable. Reduce the 3D model’s screen footprint to around 45–60vw. Keep three metrics in one row only while labels remain legible; otherwise decrease label density before reducing touch targets.
  
  Below roughly 720px, use a ~12px side gutter and a ~38–44px masthead. Retain left identity and a real 44px minimum menu target; hide the centered utility label and condense secondary status into the menu. Replace the desktop split claim with a vertical sequence: drone occupies the upper roughly 44–52vh, then the claim below it. Remove giant ghost lettering if it competes with legibility. Make each narrative panel about 80–105vh rather than forcing a fixed 900px composition. Render the object from a forgiving front-three-quarter angle and constrain it around 72–88vw wide.
  
  On phones, turn the three-cell metric rail into a stacked list or horizontally swipeable, snapped rail with visible position indicators; do not create tiny one-third-width data cells. Keep the semicircular dial behind the drone but crop it aggressively to the upper portion of the metrics area. Place the circular dot control above the active metric, never over small type. Use 22–28px main type with ~1.08 line-height, 11–13px body type and at least 12px system labels where actionable. Disable pointer parallax on coarse pointers. Load the mobile LOD or static fallback based on capability and network conditions, while ensuring all engineering information exists as ordinary DOM text.

• Final visual polish+−

  Copy

  The final pass should protect the design’s near-invisible precision. Align masthead content to the same outer grid as the rules below; vertically center tiny labels optically, not just mathematically. Use font smoothing carefully, font-feature-settings for tabular figures where metrics need stable widths, and tune Switzer headline tracking slightly tight only if necessary—roughly -0.02em is a useful target. Keep monospaced metadata airy rather than illegibly small. Essential body copy and active figures need strong contrast; only decorative ghost text and inactive values may approach low contrast.
  
  Make horizontal and vertical rules extremely restrained: about 1px, pale cool grey, with no dark borders and no shadows. Inspect intersections at device pixel ratio 1 and 2 to avoid blurry half-pixel lines. The huge display word must sit behind the drone and remain barely perceptible; a common failed attempt makes it too opaque, too black or too typographically loud. Likewise, preserve blank space—do not fill panels with explanatory paragraphs.
  
  Tune the 3D studio render before adding effects. Use soft broad highlights along arm bevels, readable but not mirror-like sensor glass, a nearly imperceptible ambient shadow, and enough propeller translucency that the craft still reads sharply. A common failure is oversized, dark, game-like geometry; keep it pale, airy and product-photographic. Verify depth ordering so DOM rules may pass visually behind the craft while the radar sits behind both. Avoid bloom that contaminates the white page.
  
  Use visible keyboard focus rings that fit the hairline system: a 1–2px charcoal or cool-grey outline with offset, especially for menu and scanner control. Follow a logical DOM order despite visual overlays: masthead controls, section content, then metrics controls. Respect reduced motion and verify text is understandable with the canvas disabled. Preload fonts conservatively, use font-display:swap, reserve all panel heights, defer noncritical model decoding, and use compressed textures to avoid a late-frame stutter. Compare at the 1440×900 framing: first attempts typically miss the object scale, overstate line contrast, crowd the header, render rotors too sharply, and treat the metrics rail as cards instead of a technical table.

These prompts describe a visual language: composition, rhythm, type scale and motion. Build with your own branding, copy, logos and imagery — the design and content of Aevion — Autonomous LiDAR Drone belong to their authors.

Difficulty

Advanced

Framework

React or Next.js

Styling

CSS custom properties · CSS Grid · CSS Modules or Tailwind

Animation

WebGL context (detected) · Canvas element (detected) · Video element (detected) · Composition changes across a 9.25s clip (detected) · Three.js or React Three Fiber · GSAP ScrollTrigger · CSS transforms for interface transitions

AI coding tool

claude-code

Estimated effort

1–2 weeks

The grid, typography and interface are highly reproducible, but fidelity depends on a similarly detailed 3D asset and carefully art-directed camera choreography. The original render and motion tuning remain the limiting factors.