Contexto Histórico

Representa a estética de estúdios de motion design e 3D, com múltiplas seções de vídeo, marquee banners e transições cinematográficas que demonstram capacidade técnica.

Especificações Técnicas

Cores

Primárias

#000000

#FFFFFF

#A6A4FF

#EAEAEA

Secundárias

#000000

#6B7280

Efeitos

VÍDEO: Dois vídeos distintos: (1) Hero: showreel cinematográfico de motion design 3D com cenas de animações, renders e efeitos visuais em alta qualidade sobre fundo preto. Full-width (w-full h-auto object-cover) com overlays de texto animados via Framer Motion. (2) Shipping: demonstração de produto 3D em formato quadrado (800x800px), mostrando um objeto ou cena 3D rotacionando ou em animação, sobre fundo cinza claro (#EAEAEA) com cantos arredondados. | EFEITOS CSS: Múltiplas seções com vídeos (hero full-width + shipping 800x800px), marquee banner infinito CSS translateX 20s linear infinite em fundo lavanda #A6A4FF com texto preto, navbar 3 colunas de links empilhados e ícone ticket SVG, hero com vídeo full-width e overlays de texto absolutos animados com Framer Motion fade+slide, seção shipping fundo cinza #EAEAEA cantos arredondados inferiores 40px, Inter font com brightness-0 invert no logo

Light/Dark

✓ Full / ✓ Full

CSS

font-family: 'Inter', background: #000000 / #EAEAEA, video: w-full h-auto object-cover, animation: marquee translateX(0) to translateX(-50%) 20s linear infinite, border-radius: 0 0 40px 40px, Framer Motion: fade+slide 0.8s, filter: brightness(0) invert(1), gap: 60px marquee

Variáveis

--bg-hero: #000000, --bg-shipping: #EAEAEA, --color-lavender: #A6A4FF, --text-primary: #FFFFFF, --text-dark: #000000, --font-primary: 'Inter', --marquee-speed: 20s, --shipping-radius: 40px, --video-size: 800px

Checklist

☐ Fundo preto com múltiplos vídeos, ☐ Hero vídeo full-width overlays animados, ☐ Marquee banner lavanda infinito, ☐ Navbar 3 colunas + ticket SVG, ☐ Seção shipping cinza cantos 40px, ☐ Vídeo 800x800 shipping, ☐ Framer Motion fade+slide, ☐ Inter font logo invertido, ☐ Responsivo

DESIGN.md

Design System: Framelix 3D Studios

1. Visual Theme & Atmosphere

Estilo Framelix 3D Studios com múltiplos vídeos, marquee banner lavanda e animações cinematográficas. Ideal para estúdios 3D, agências de motion e produtoras de vídeo. Representa a estética de estúdios de motion design e 3D, com múltiplas seções de vídeo, marquee banners e transições cinematográficas que demonstram capacidade técnica.

Density: 5/10 — Balanced
Variance: 7/10 — Dynamic
Motion: 8/10 — Cinematic

2. Color Palette & Roles

Preto Puro (#000000) — Dark surface, primary background
Branco (#FFFFFF) — Light surface, card backgrounds
Lavanda Acento (#A6A4FF) — Supporting palette color
Cinza Claro (#EAEAEA) — Secondary text, borders, muted elements
Preto Texto (#000000) — Deep contrast surface
Cinza Muted (#6B7280) — Secondary text, borders, muted elements
Preto Botão (#000000) — Deep contrast surface
Branco Muted (rgba(255,255,255,0.6)) — Secondary surface

3. Typography Rules

Display / Hero: Inter — Weight 700, tight tracking, used for headline impact
Body: Inter — Weight 400, 16px/1.6 line-height, max 72ch per line
UI Labels / Captions: Inter — 0.875rem, weight 500, slight letter-spacing
Monospace: JetBrains Mono — Used for code, metadata, and technical values

Scale:

Hero: clamp(2.5rem, 5vw, 4rem)
H1: 2.25rem
H2: 1.5rem
Body: 1rem / 1.6
Small: 0.875rem

4. Component Stylings

Primary Button: Sharp edges (0px) shape. Accent color fill. Hover: 8% darken + subtle lift shadow. Active: -1px translate tactile press. Font weight 600. No outer glows.
Secondary / Ghost Button: Outline variant. 1.5px border in muted color. Text in primary color. Hover: subtle background fill.
Cards: Sharp edges (0px) corners. Surface background. Subtle shadow (0 2px 12px rgba(0,0,0,0.06)). 1px border stroke.
Inputs: Label above input. 1px border stroke. Focus ring: 2px accent color offset 2px. Error text below in semantic red. No floating labels.
Navigation: Primary surface background. Active item: accent color indicator. Font weight 500 when active.
Skeletons: Shimmer animation matching component dimensions. No circular spinners.
Empty States: Icon-based composition with descriptive text and action button.

5. Layout Principles

Grid: CSS Grid primary. Max-width containment: 1280px centered with 1.5rem side padding.
Spacing rhythm: Balanced. Base unit: 0.5rem (8px).
Section vertical gaps: clamp(4rem, 8vw, 8rem).
Hero layout: Asymmetric composition.
Feature sections: Asymmetric grid with varied card sizes. No 3-equal-columns.
Mobile collapse: All multi-column layouts collapse below 768px. No horizontal overflow.
z-index contract: base (0) / sticky-nav (100) / overlay (200) / modal (300) / toast (500).

6. Motion & Interaction

Physics: Spring — stiffness 120, damping 20. Confident, weighted transitions.
Entry animations: Fade + translate-Y (16px → 0) over 540ms ease-out. Staggered cascades for lists: 120ms between items.
Hover states: Scale(1.03) + shadow lift over 200ms.
Page transitions: Fade + slide (300ms).
Performance: Only transform and opacity animated. No layout-triggering properties.

7. Anti-Patterns (Banned)

No emojis in UI — use icon system only (Lucide, Heroicons)
No pure black (#000000) — use off-black or charcoal variants
No oversaturated accent colors (saturation cap: 80%)
No 3-column equal-width feature layouts — use zig-zag or asymmetric grid
No h-screen — use min-h-[100dvh]
No AI copywriting clichés: "Elevate", "Seamless", "Unleash", "Next-Gen"
No broken external image links — use picsum.photos or inline SVG
No generic lorem ipsum in demos

Prompt para AI

Design a cinematic 3D studio page with pure black background. Multiple video sections: hero full-width with absolute text overlays animated Framer Motion. Marquee banner lavender #A6A4FF, black text, infinite CSS translateX 20s. Navbar 3 columns stacked links and ticket SVG icon. Shipping section light grey #EAEAEA, rounded bottom corners 40px, centered 800x800 video. Inter font. Buy Now and Explore buttons.

Relacionados

Arte & Ilustracao

Framelix 3D Studios