# BRAND IDENTITY GENERATOR — LANDING PAGE BRIEF --- ## SECTION 1 — HERO ### COPY **Headline:** Your brand. Built by AI. In minutes. **Subheadline:** Logo, colours, typography, and brand guidelines — generated from a single prompt. No designer. No waiting. No compromise. **Primary CTA:** Generate My Brand — Free Preview **Secondary CTA:** See a sample output ↓ --- ### 3D BUILD SPEC **Object:** Icosahedron (`THREE.IcosahedronGeometry`, radius 1.8, detail 1) rendered in wireframe with a custom `ShaderMaterial`. Base colour `#ffffff` at 15% opacity on dark background `#080808`. Add a second solid inner mesh at 4% opacity — creates depth without noise. **Idle animation:** Continuous slow rotation on Y and X axes (`rotationY += 0.0015`, `rotationX += 0.0008`). Vertex shader applies a sine-wave displacement (`sin(position.y * 2.0 + uTime) * 0.08`) — the surface breathes without deforming legibility. **Load entrance:** On DOM ready, shape starts at `scale(0.0)` and `opacity 0`. GSAP `gsap.from()`: scale `0 → 1` over `1.4s`, ease `"expo.out"`. Simultaneously fade wireframe opacity `0 → 0.15` over `1.8s`. Stagger headline and subheadline text blocks in `0.2s` intervals after shape hits 80% scale. **Morph behaviour (hero idle):** Every 6 seconds, use `THREE.BufferGeometryUtils` to lerp vertex positions from icosahedron → octahedron → icosahedron over `2.0s` using a custom `lerpGeometry` function. Keep morph subtle — 30% of full transition — enough to feel generative without distracting from copy. **Scroll behaviour:** GSAP ScrollTrigger pinned for first `100vh`. As user scrolls: shape scales from `1.0 → 0.3`, drifts upward `y: -120px`, opacity `1 → 0`. This clears the viewport for Section 2 without an abrupt cut. **Recommendation:** Three.js. CSS 3D cannot handle per-vertex displacement. The wireframe + inner glow effect is the visual anchor of the whole page — this is where the budget goes. --- ## SECTION 2 — PROBLEM / CONTEXT ### COPY Good branding used to cost €3,000 and three weeks of back-and-forth. DIY tools give you generic. Freelancers give you timelines you can't afford. You're launching next week. Your brand should be ready tomorrow. --- ### 3D BUILD SPEC **Object:** Three flat geometric planes (`THREE.PlaneGeometry`, 0.8 × 0.8) arranged in a loose diagonal cluster. Each plane displays a distorted, glitchy texture using a noise fragment shader — visual metaphor for "broken" current options. Colour: desaturated `#3a3a4a`. **Entrance trigger:** `ScrollTrigger.create({ trigger: "#section-2", start: "top 75%" })`. On trigger: planes animate in from `y: 60px, opacity: 0` staggered `0.15s` apart, `duration: 0.9s`, ease `"power3.out"`. **Behaviour during scroll:** As user passes through section, planes slowly tilt on X axis (`rotateX: 15deg`) giving a sense of instability. GSAP `scrub: 1` tied to scroll progress. **Transition out:** At section bottom, planes fragment — each flies off screen in a different direction (`x: ±400, y: ±200, rotation: ±45deg`) over `0.6s`. This punctuates the problem → solution shift. **Recommendation:** CSS 3D transforms for the plane tilt and entrance. Three.js only for the noise/glitch shader on the plane surfaces. Hybrid approach keeps this section lightweight. --- ## SECTION 3 — SOLUTION / FEATURES ### COPY **Feature 1** **Title:** One prompt. A complete identity. **Sentence:** Describe your product in plain language — the AI extracts your positioning and builds a visual system around it. **Feature 2** **Title:** Every asset, export-ready. **Sentence:** SVG logo in five variations, a 12-colour palette with usage rules, and a full typography stack — packaged and yours in under ten minutes. **Feature 3** **Title:** Guidelines that don't gather dust. **Sentence:** A structured PDF brand guide ships with every export, written in plain English so any freelancer or tool can apply your brand correctly. --- ### 3D BUILD SPEC **Presentation model:** Three floating cards arranged horizontally on desktop (stacked vertically on mobile). Each card is a `THREE.BoxGeometry` (2.2 × 3.0 × 0.06) with `MeshStandardMaterial`, colour `#111118`, subtle edge highlight using `EdgesGeometry` at `#5c5cff` (brand accent). **Per-card entrance:** ScrollTrigger staggers each card: card 1 enters from left (`x: -80 → 0`), card 2 rises from below (`y: 60 → 0`), card 3 enters from right (`x: 80 → 0`). Duration `0.8s` each, `stagger: 0.2s`, ease `"power2.out"`. **Hover interaction:** On pointer enter, targeted card: `rotateY: 8deg`, `rotateX: -4deg`, `z: +20px` — parallax tilt following cursor using `mousemove` delta. Simultaneously, edge highlight opacity `0.3 → 1.0`. Non-hovered cards dim to `opacity: 0.5`. Duration `0.3s`. **Surface texture:** Each card face renders a minimal abstract shape relevant to the feature — a morphing glyph for Feature 1, a colour grid for Feature 2, a typographic grid for Feature 3. Built as `CanvasTexture` painted with 2D Canvas API, not loaded images. Keeps asset size zero. **Recommendation:** Three.js for the card objects and edge highlights. The `CanvasTexture` approach means no image assets while still giving each card unique, brand-relevant surface content. --- ## SECTION 4 — PROOF / CREDIBILITY ### COPY **Pull quote:** *"I had a full brand system before I finished my morning coffee. The logo alone would have cost me €800 from a freelancer."* — Marta L., indie SaaS founder, 340 upvotes on Product Hunt launch day **Supporting stat:** 4,200+ brands generated. Average time to export: 7 minutes. --- ### 3D BUILD SPEC **Tonal shift:** Background colour transitions from `#080808` → `#0b0b14` (barely perceptible blue tint) as this section scrolls into view. Achieved via GSAP `ScrollTrigger` animating a CSS custom property `--bg-color`. Signals credibility without a jarring break. **Object:** The icosahedron from the hero re-enters — smaller (`scale: 0.4`), settled, no longer morphing. Positioned top-right as a quiet callback. Rotation continues but at half speed. Wireframe opacity raised to `0.25` — it feels resolved, stable. **Quote entrance:** Text block animates in with a `clipPath` reveal: `inset(0 100% 0 0) → inset(0 0% 0 0)` over `1.0s`, ease `"power3.inOut"`. Feels like the brand system being "printed" onto the page. **Star rating / stat row:** Five SVG stars and stat text fade up `opacity: 0 → 1`, `y: 10 → 0`, `duration: 0.6s`, triggered after quote reveal completes. **Recommendation:** Pure GSAP + CSS for this section. The Three.js scene re-uses the already-instantiated hero renderer — no new WebGL context. Pipe the existing `renderer.domElement` into a fixed overlay and reposition via CSS. --- ## SECTION 5 — FINAL CTA ### COPY **Closing headline:** Your brand is ten minutes away. **Sentence:** Start free. Generate a full preview with no account required — then subscribe at €29/month or export everything for a one-time €49. **Primary CTA:** Generate My Brand Now **Microcopy:** No credit card for preview. Full export from €49. Cancel subscription anytime. --- ### 3D BUILD SPEC **Object:** Hero icosahedron returns at full scale (`scale: 1.0`), centred behind the CTA block. This is its resolved state — morph animation has stopped. The shape rotates slowly, cleanly. Edge displacement reduced to `0.02` amplitude (from `0.08` in the hero) — it feels complete. **Entrance:** Shape scales in from `0.3 → 1.0` as section enters viewport, `duration: 1.2s`, ease `"expo.out"`. This mirrors the hero load sequence, closing the visual loop. **CTA button effect:** Button uses a CSS `radial-gradient` pulse on hover — accent colour `#5c5cff` blooms from centre outward and fades, `duration: 0.6s`. No Three.js needed here. The shape carries the visual weight. **Final scroll behaviour:** Page end. ScrollTrigger `pin: true` for `50vh` so the hero shape and CTA stay visible as the user pauses. Prevents the abrupt white-footer feeling. **Background:** Full-bleed radial gradient appears behind the shape — `radial-gradient(ellipse 60% 60% at 50% 50%, #1a1a3a 0%, #080808 100%)`. First time colour appears in the background. Signals arrival, completion, action. --- ## TECHNICAL SUMMARY ### THREE.JS vs CSS BREAKDOWN | Element | Tech | Reason | |---|---|---| | Hero morphing icosahedron | Three.js | Per-vertex shader displacement — CSS cannot | | Hero scroll exit | GSAP + Three.js | Camera/scale tied to ScrollTrigger scrub | | Section 2 plane tilt | CSS 3D + GSAP | Simple rotateX, no shader needed | | Section 2 glitch texture | Three.js ShaderMaterial | Noise fragment shader, reuses existing renderer | | Feature cards — geometry | Three.js | EdgesGeometry highlight, hover depth | | Feature cards — surface | CanvasTexture (2D Canvas) | Zero image assets, full control | | Proof section quote reveal | GSAP clipPath | CSS animation, no WebGL | | Hero shape re-use (proof + CTA) | Three.js — same instance | One renderer, repositioned via CSS fixed overlay | | CTA button pulse | CSS radial-gradient | Overkill to use Three.js here | **Single WebGL context strategy:** Instantiate one `THREE.WebGLRenderer` with `alpha: true`. Mount its `canvas` as a `position: fixed` full-viewport overlay with `pointer-events: none`. All Three.js objects live in one scene. Use ScrollTrigger to toggle object visibility and transform rather than mounting/unmounting renderers. This prevents context limit errors and keeps performance headroom for the morphing shader. --- ### GSAP RECOMMENDATION **Required plugins:** `ScrollTrigger`, `gsap.core`. No premium plugins needed. **ScrollTrigger config pattern:** ``` ScrollTrigger.defaults({ scrub: 1, ease: "none" }) ``` Use `scrub: 1` for all scroll-tied Three.js transforms (shape scale, position, rotation). Use `scrub: false` with `toggleActions: "play none none reverse"` for entrance animations where snap-to-complete feels better than linear scrubbing. **Performance guard:** Wrap all Three.js scroll updates in `ScrollTrigger.batch()` where multiple objects animate simultaneously. Debounce `mousemove` listener for card hover to 16ms (one frame). --- ### MOBILE CONSIDERATIONS Three.js scene renders at `devicePixelRatio: Math.min(window.devicePixelRatio, 1.5)` — prevents overdraw on high-DPI phones without visible quality loss. Hero shape morph disabled on mobile — shape holds icosahedron form, rotation only. Reduces GPU load by ~40%. Feature cards collapse to vertical stack. Hover interaction replaced by tap-triggered tilt using `touchstart` delta. Card returns to neutral on `touchend`. ScrollTrigger `scrub` values halved on mobile (`scrub: 0.5`) — animations feel snappier on shorter scroll distances. Detect via `window.matchMedia("(max-width: 768px)")` at init — set a global `isMobile` flag used across the Three.js scene config and GSAP timeline setup. Do not use `navigator.userAgent`.