← Recovered from Drive · Templates hub

Visual library · Hero

Your hero pattern notes, as written, with the screenshots they refer to. Screenshots over 5 MB (hero/3, body/5-2, body/5-5) and the other parallax frames are only in Drive.

1.png
2.png
4-1.png
4-2.png
6.png
10.png
a.png

Hero — Visual Pattern Library

a

Reference set for hero sections. Each entry pairs a screenshot in this folder with the design rule it teaches. The build engine reads these as "use this when" triggers, not as templates to copy verbatim. Match the pattern to the client's audience and price point — never lift the layout wholesale.

hero/1.png — Warm Product Hero

1

Reference: Target — bowl-lift stand mixer

A single hero product shot inside a warm, lived-in environment with shallow depth of field. The product is metallic and reflective — it does the shining, the room stays soft and blurred behind it. A large translucent arc/circle mask sweeps behind the product to create depth and frame it. Copy sits in a frosted, warm-tinted panel to one side; CTA is a solid dark button with sharp corners. Carousel arrows and dots sit unobtrusively at the edge.

Deploy when: the product is physical and craftsmanship sells it — appliances, homeware, artisan goods. The tension that makes this work is rustic plus tech: wood and warmth in the scene, clean lines and a precise reflective product on top. Reads premium but approachable, never cold.

hero/2.png — Information-Dense Bento Hero

2

Reference: Colgate

The hero carries a lot at once and still reads calm. A large bold headline anchors one side; the other holds toggle pills, a short paragraph, and a CTA. Below sits a bento row of unequal tiles — a big lifestyle image card, a product card, and a dark interactive card. What holds it together: one consistent corner radius, a tight palette (light gray / white / one brand red), and disciplined spacing. Density never becomes clutter.

Deploy when: the brand has multiple things to surface up front — products, a quiz or tool, social proof — and a single-message hero would waste the fold. Mass-market consumer brands. The bento makes a busy hero feel organized and scannable instead of crowded.

hero/3.png — Text-Breaking Editorial Hero

a

Reference: Vogue — Fashion Week

A cut-out human subject stands in the foreground and physically pierces an oversized headline behind them — three depth layers: environment at the back, giant type in the middle, subject in front. A glassmorphic info panel docks to one side with copy and a related product image; a rounded image-card with copy sits on the other. Circular arrow buttons, a notched nav with the logo centered.

Deploy when: the work is aspirational and has a human or hero subject — fashion, events, launches, talent. The layered scale is a high-impact wow moment (good for Gen-Z audiences); the flanking panels carry detail without breaking the cinematic center. The subject can be a video instead of a still.

hero/4.png + hero/4_.png — Liquid-Mask Multi-Panel Hero

a

Reference: Mulberry — leather bag

Two frames of the same pattern (4.png light/full, 4_.png darker crop). The page is carved by organic wavy white cutouts — the nav pill, the headline, the product card, and the side rail of stacked image cards are each set into liquid-edged shapes rather than hard rectangles. Three or more media zones, each capable of holding a short video. Thin trailing lines (the bag's chain) cross the product field for motion. Logo sits top-left, type and buttons balanced against the imagery.

Deploy when: tactile and sensory products — fashion, leather goods, beauty — where several short product videos beat one. The wavy dividers make a multi-media hero feel fluid and designed instead of gridded and templated.

hero/6.png — Editorial Serif Hero with Inline Video-Pill

6

Reference: Vesperde — luxury curtains

Calm and editorial. An oversized serif headline owns the upper area and carries the whole page on its own. A single small pill-shaped element sits inline at the top right — it reads as an image but it's a looping video, the one quiet hit of motion. A short copy block and a soft pill CTA sit beside it. One large hero image follows with subtle hotspot markers; a kinetic serif marquee runs along the bottom. Cream palette, faint column grid lines.

Deploy when: the industry is visually unglamorous — drapes, blinds, flooring, insurance, professional services. Serif elegance plus one restrained motion pill makes a "boring" category feel genuinely high-end. Restraint is the whole point — do not add more motion.

hero/a.png — Product-Dashboard Hero

a

Reference: DGTSWAP — crypto exchange

A three-part split. One side: a bold sans headline, a social-proof avatar stack, a two-tone gradient CTA and a ghost CTA. Center: a 3D iridescent centerpiece object. Other side: a stacked column of live-data cards — price tiles, a colored stat card, a thumbnail, a line chart — deliberately varied in size and accent color. Ambient colored background.

Deploy when: the product is data-driven — fintech, SaaS, crypto, dashboards. This hero shows the product working (real numbers, real charts) inside the fold. The size and color variety is what keeps a numbers-heavy hero feeling fun and human rather than corporate.

hero/10.png — Dual-Video Hero

1

Reference: VFX / 3D motion agency

Two tall rounded video cards sit side by side and fill the hero — the motion does all the talking. Each card carries small pill labels (format tags, client logos). Type stays deliberately small, black, ultra-bold, and high-contrast, pushed to the bottom margins so it never competes with the footage. Sticky transparent nav, one red CTA pill. Light background so the video cards dominate.

Deploy when: the work itself is the proof — agencies, production studios, VFX, motion portfolios. Let the video carry the impact; keeping type small and restrained makes the footage hit harder, not softer.

Cross-pattern principles (apply to every hero above)

a