# Four editorial landing pages

> Four landing pages from one morning: a furniture brand, two architecture studios, and a plant-based food brand, with big headlines, thin grid lines, and sliced image reveals. Made in Aura with Gemini 3.1 Pro from reference captures plus three detail prompts.

- Kind: Website
- Live website: https://architecture-studio.aura.build/
- Page: https://meetreference.com/v/editorial-architecture-studio-landing/
- Ready-to-use agent handoff: https://meetreference.com/v/editorial-architecture-studio-landing/agent.txt
- Exact prompt as plain text: https://meetreference.com/v/editorial-architecture-studio-landing/prompt.txt
- Authorship: Not stated
- Made with: Aura
- Model: Gemini 3.1 Pro
- Built with: WebGL, Iconify
- Style: Landing pages; editorial, serif, architecture, furniture, grid lines, image reveal, webgl, minimal
- Shared by @MengTo in X, Feb 20, 2026: https://x.com/MengTo/status/2024761123049001103
- Prompt fidelity: Partial. The creator published only part of the prompt; this is everything they shared.

## Before you start

Guidance from Reference, separate from the creator's instructions.

1. Read the reference and inspect the project, installed libraries, and available agent skills before writing code. Reuse suitable tools already present.
2. Prefer the creator-reported libraries and skills when they fit the task. Explain what useful additions help with, and install missing project dependencies or relevant skills from official sources when the environment and the user's existing permissions allow it. Respect the project's package manager and setup rules; do not ask again for routine setup already authorized.
3. Distinguish tools used by the creator from your own recommendations. A listed tool is not automatically required, and an empty tools or requirements list means the setup is unknown, not that nothing is needed.
4. Ask concise questions when missing inputs or choices materially affect the result: paid services, credentials, the user's assets, or a different production approach. Use existing answers and permissions; continue independent work while waiting.
5. If a useful library, skill, or service cannot be installed or used, explain an available alternative and its expected effect on quality, features, or effort. Get the user's choice before a material compromise; otherwise state the fallback and continue. Never silently simplify the result or claim to have used a tool you did not use.

Requirements reported by the source: A full-page capture of a reference site to start from; Aura's prompt builder, or your own starting brief (the creator's wasn't published); Your own photos to replace the generated ones.

## Recreating this website

These are the creator's published instructions, unedited.

To adapt it: Edit the company list in "Use Iconify Simple Icons for company logos (Nasa, SpaceX, ...)" for your own logo strip, and keep "Change texts, names, numbers." at the end so the copy isn't lifted from your reference site. The two WebGL prompts work as add-ons to any page.

## Prompts

### 1. Detail prompt

```text
Use Iconify Solar Duotone Bold icons. For the site logo, use Iconify Solar Linear, plus lettermark using text with tracking-tighter. Use Iconify Simple Icons for company logos (Nasa, SpaceX, Uber, Visa, Grab, bose, Discover, dji, Nikon, craftsman, sony) 64x64 instead of text logos. Use <iconify-icon> instead of full SVG code. For avatars, testimonials, use headshot photos instead of placeholder letters. Add vertical container-size lines. Add 01 02 03 number details. Add a 1px border beam animation around the pill-shaped button on hover. Add a vertical text clip slide down animation letter by letter. Add sonar animation and decorations. Add a subtle flashlight effect on hover/mouse position to both background and border of the cards. Animate marquee in an infinite loop with alpha mask slowly. Change texts, names, numbers.
```

### 2. WebGL image reveal

```text
Add 4-column clip animate sliding down for all the images in the page using webgl
```

### 3. WebGL scroll columns

```text
Full-screen image sliced into 4 vertical columns. On scroll, columns move at staggered speeds—outer columns lag, inner race ahead—with motion blur trails. Snap to alignment when scroll stops.
```

## What it looks like

Written by Reference from the video frames, not by the creator.

Four light, calm landing pages shown in Aura's editor canvas: a furniture brand, a sage-green architecture studio, a dark architecture studio, and a plant-based food brand.

- Color: Warm off-white and sage green, charcoal for the dark studio, deep green for the food brand; photos of oak, concrete, teal walls, timber houses, and green hills.
- Type: Large serif headlines on the architecture and food pages ("Construct Your Masterpiece", "Nourish Your Spirit from the Inside Out"), a thin sans-serif on the furniture page ("Engineered for Rest"), small sans-serif body text, and spaced uppercase labels.
- Framing: 4:3. Each page fills a window on a grey-green canvas, with the next page peeking in at the right edge and a small "1440 × 1024 Desktop" tag at top left. In several frames a photo breaks into stepped vertical strips as it slides in.
- Structure: The furniture hero with a photo collage and a dark "Precision Engineering" section, the sage architecture page (hero image, logo strip, Vanguardis intro, "Construct Your Masterpiece", a metrics table), the dark studio's "Crafted with intent" project grid, and the food brand's hero and "Curated Menus" section.

Storyboard, nine frames spread across the video: https://meetreference.com/media/editorial-architecture-studio-landing/storyboard.webp

- Frame 1 at 1.8s: https://meetreference.com/media/editorial-architecture-studio-landing/f1.webp
- Frame 2 at 5.3s: https://meetreference.com/media/editorial-architecture-studio-landing/f2.webp
- Frame 3 at 8.8s: https://meetreference.com/media/editorial-architecture-studio-landing/f3.webp
- Frame 4 at 12.3s: https://meetreference.com/media/editorial-architecture-studio-landing/f4.webp
- Frame 5 at 15.9s: https://meetreference.com/media/editorial-architecture-studio-landing/f5.webp
- Frame 6 at 19.4s: https://meetreference.com/media/editorial-architecture-studio-landing/f6.webp
- Frame 7 at 22.9s: https://meetreference.com/media/editorial-architecture-studio-landing/f7.webp
- Frame 8 at 26.4s: https://meetreference.com/media/editorial-architecture-studio-landing/f8.webp
- Frame 9 at 29.9s: https://meetreference.com/media/editorial-architecture-studio-landing/f9.webp

## How it was made, per the creator

- One-shot: no
- Notes: Made on aura.build, the AI site builder the creator founded. The method: capture a reference site from hero to footer (for example with the Arc browser), turn it into HTML with Aura's prompt builder, then add the detail prompt and the two WebGL animation prompts published here. The reference captures and the builder's starting brief weren't published. The creator says it took about five small iterations, mostly on images, font pairings, and animations; they swapped the generated images by hand, used ASCII art from an app of their own, and used no skills.

> G3.1 is very good at webgl animations, so sprinkle some creative animations
> (@MengTo)

## Links

- Visit site: https://architecture-studio.aura.build/
- Watch: https://x.com/MengTo/status/2024761123049001103
- Original post: https://x.com/MengTo/status/2024761123049001103
- Reply with the prompts: https://x.com/MengTo/status/2024780143546216465
- Furniture template: https://luxury-furniture.aura.build
- Dark architecture template: https://nexus-architecture.aura.build
- Plant-based food template: https://plant-based-wellness.aura.build