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
• Generate assets
• Add animations
• Responsive polish
• Final visual polish

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.

Agent

Codex

Model

GPT 6 AstraA scroll-scrubbed WebGL product scene needs sustained 3D, rendering-performance, and precise layered-interface reasoning across multiple components.

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.