// 22K hi-fi — design tokens + reusable primitives.
// Cinematic dark-dominant. Helvetica for type. Warm-gold accent used sparingly.
// Architectural / real-estate cinematography stills — quiet, elegant, light-driven.
// Real stills extracted from the 22K production deck (Gafisa & Tegra projects).
const STILLS = {
hero: "assets/img/hero.jpg", // Gafisa Tom — golden-hour skyline silhouette
dir: "assets/img/dir-grandthai.jpg", // Tegra Grandthai — pergola walkway
cap: "assets/img/cap-singular.jpg", // Tegra Singular — façade
deliverables: [
"assets/img/ent-1.jpg", // Filme & lançamento
"assets/img/ent-2.jpg?v=2", // Captação técnica · drone
"assets/img/ent-3.jpg?v=2", // Vendas & sociais · corretores
],
};
// 6 use cases — real 22K work (Gafisa & Tegra), stills from the deck.
const PROJECTS = [
{
slug: "tom", client: "GAFISA", title: "Tom", year: "2024", kind: "Filme de evento",
image: "assets/img/pf-gafisa-tom.jpg?v=2", local: "Orla carioca · Rio de Janeiro",
vimeo: { id: 1199263586, h: "bf87c8aac9" },
desc: "Viralizado como o empreendimento mais caro do Brasil, TOM exigia uma comunicação à altura de sua singularidade na orla carioca. Nossa proposta foi retratar uma sofisticação menos óbvia, conectando exclusividade aos prazeres mais simples da vida à beira-mar: o pé na água, o nascer do sol, o tempo para leitura, o contato com a natureza e a prática de esportes como surf e corrida.\n\nMuito antes do termo quiet luxury se tornar tendência, o filme já caminhava nessa direção, através de uma fotografia naturalista, luz orgânica, respiros visuais e um olhar delicado e misterioso sobre a rotina. Com uma estética minimalista e contemplativa, buscamos criar uma sofisticação proporcional ao empreendimento, sem excessos, apenas através da atmosfera, do tempo e da sensibilidade visual."
},
{
slug: "canto-mar", client: "GAFISA", title: "Canto Mar", year: "2023", kind: "Filme + drone",
image: "assets/img/pf-gafisa-cantomar.jpg?v=2", local: "Entre Ipanema e Copacabana",
vimeo: { id: 1199247097 },
desc: "Construído literalmente entre Ipanema e Copacabana, o Canto Mar tinha na própria localização seu maior ativo narrativo. Através de imagens aéreas, drones e grafismos integrados à montagem, transformamos essa característica única em linguagem visual clara e sofisticada.\n\nImagens da vizinhança foram incorporadas para traduzir o ritmo, o frisson e a atmosfera cultural da região. Com uma estética baseada em colagens, respiros visuais, paspatur e uma montagem contemporânea, desenvolvemos um filme com apelo nacional e internacional, capaz de conectar arquitetura, cidade e estilo de vida."
},
{
slug: "grand-thai", client: "TEGRA", title: "Grand Thai", year: "2025", kind: "Filme de lançamento",
image: "assets/img/pf-tegra-grandthai.jpg?v=3", local: "São Paulo",
vimeo: { id: 1199252213, h: "f4ad10db46" },
desc: "Inspirado nos grandes resorts da Tailândia, o Grand Thai foi desenvolvido a partir de uma linguagem visual voltada à imersão e à atmosfera sensorial do projeto. As entrevistas foram construídas com uma ambientação alinhada aos key visuals do empreendimento, explorando tons quentes, respiros visuais e uma estética contemplativa.\n\nA montagem mistura imagens captadas, imagens de acervo, VFX e elementos em A.I., criando uma narrativa fluida capaz de transportar o espectador para dentro do universo do empreendimento. Conduzidas com linguagem documental, as entrevistas revelam de forma leve e humana o processo criativo de arquitetos, engenheiros e profissionais envolvidos no projeto. O filme foi desenvolvido tanto em sua versão full quanto em formatos de 30 segundos para TV, mantendo consistência estética e narrativa em diferentes entregas."
},
{
slug: "rio-open", client: "TEGRA", title: "Rio Open", year: "2026", kind: "Ativação de marca",
image: "assets/img/pf-tegra-rioopen.jpg?v=2", local: "Rio de Janeiro",
vimeo: { id: 1199265366, h: "5378d5ecb8" },
desc: "\"As grandes conquistas começam em casa.\" Em um momento em que o tênis passou a ocupar um lugar central nos empreendimentos de alto padrão, a parceria entre Tegra e Rio Open surgiu de forma natural. O desafio do filme era unir dois universos: o produto imobiliário e o universo das quadras dentro de uma única narrativa.\n\nCom linguagem cinematográfica e um aspecto de ficção, o filme se inicia quase como um thriller silencioso, criando tensão e curiosidade durante o break do torneio. Aos poucos, a narrativa revela algo simples e cotidiano: a rotina de uma família que vive o tênis de forma orgânica, integrada ao estilo de vida proporcionado pelo empreendimento. Através de uma fotografia elegante, respiros visuais e uma construção narrativa inesperada, transformamos um filme imobiliário em uma experiência com atmosfera de cinema."
},
{
slug: "singular", client: "TEGRA", title: "Singular", year: "2025", kind: "Filme de lançamento",
image: "assets/img/pf-tegra-singular.jpg?v=2", local: "São Paulo",
vimeo: { id: 1199252211, h: "c31c91889f" },
desc: "Inspirado no legado paisagístico Burle Marx, o filme de SINGULAR foi construído a partir da ideia de traduzir sensibilidade, forma e sofisticação em linguagem audiovisual. Tivemos acesso especial ao escritório Burle Marx para registrar parte do processo criativo dos renomados paisagistas envolvidos no projeto, aproximando o público da essência conceitual do empreendimento.\n\nCom linguagem documental, entrevistamos arquitetos, engenheiros, designers e profissionais da incorporadora para revelar, de dentro para fora, o pensamento, o cuidado e a curadoria por trás de cada detalhe. Através de uma montagem elegante, repleta de respiros visuais e atmosfera contemplativa, o filme busca transmitir não apenas qualidade e bom gosto, mas também o coração criativo que sustenta o projeto."
},
{
slug: "taman", client: "NEW VIEW", title: "Taman", year: "2023", kind: "Filme institucional",
image: "assets/img/pf-tegra-taman.jpg?v=2", local: "Flamengo · Rio de Janeiro",
vimeo: { id: 1199259582, h: "a6cc0b56e9" },
desc: "TAMAN é um projeto que flerta com a ficção para retratar o estilo de vida único da região do Flamengo. Através de cenas encenadas com atores, exploramos momentos cotidianos que fazem parte da vida local: a corrida pela manhã, o mergulho no verão, os domingos em família e a relação constante entre cidade, natureza e bem-estar.\n\nNa montagem, essas cenas se misturam a entrevistas conduzidas em linguagem documental com os profissionais responsáveis pelo empreendimento, criando uma narrativa mais humana, próxima e emocional. O resultado é um filme que transforma arquitetura em experiência e aproxima o público da atmosfera real do projeto."
},
{
slug: "costa-niemeyer", client: "CALÇADA", title: "Costa Niemeyer", year: "2025", kind: "Filme de lançamento",
image: "assets/img/pf-costa-niemeyer.jpg",
hero: "assets/usecases/costa-niemeyer/1.jpg",
local: "Av. Niemeyer · Rio de Janeiro",
vimeo: { id: 1197512736, h: "46ce49ac8e" },
gallery: [
"assets/usecases/costa-niemeyer/g/1.jpg", "assets/usecases/costa-niemeyer/g/2.jpg",
"assets/usecases/costa-niemeyer/g/3.jpg", "assets/usecases/costa-niemeyer/g/4.jpg",
"assets/usecases/costa-niemeyer/g/5.jpg", "assets/usecases/costa-niemeyer/g/6.jpg",
"assets/usecases/costa-niemeyer/g/7.jpg", "assets/usecases/costa-niemeyer/g/8.jpg",
"assets/usecases/costa-niemeyer/g/9.jpg", "assets/usecases/costa-niemeyer/g/10.jpg"
],
desc: "COSTA NIEMEYER parte do encontro entre dois ritmos da cidade: a tranquilidade da paisagem da Avenida Niemeyer e a energia do Leblon, a poucos minutos de distância. Inspirado por destinos costeiros de referência ao redor do mundo, o filme apresenta uma proposta de moradia descomplicada, onde conforto, localização e qualidade de vida se tornam os principais diferenciais do empreendimento.\n\nPara traduzir esse conceito, combinamos imagens aéreas da região, entrevistas com os idealizadores, locução e recursos visuais que integram perspectivas arquitetônicas, inteligência artificial e motion design. A construção narrativa valoriza tanto o entorno quanto a arquitetura do projeto, transformando seus atributos em uma experiência visual clara, desejável e contemporânea."
},
{
slug: "chateau-jardin", client: "TEGRA", title: "Château Jardin", year: "2025", kind: "Filme de lançamento",
image: "assets/img/pf-chateau-jardin.jpg", local: "Cidade Jardim · São Paulo", vimeo: { id: 1197510743, h: "41de1e1eb7" },
desc: "CHÂTEAU JARDIN foi concebido para traduzir uma arquitetura de inspiração clássica sob um olhar contemporâneo. Guiado pelo conceito \"inspirado no clássico, projetado para o futuro\", o filme apresenta o empreendimento como um endereço raro na Cidade Jardim, cercado por verde, infraestrutura e conexões estratégicas, onde sofisticação, bem-estar e permanência caminham lado a lado.\n\nA execução combina imagens geradas por inteligência artificial, perspectivas arquitetônicas em 3D e motion design refinado para construir um universo visual inspirado no l'art de vivre. Dos jardins franceses aos detalhes de acabamento, cada elemento foi pensado para materializar os atributos do projeto com elegância e precisão, transformando referências conceituais em uma narrativa visual capaz de despertar desejo e reforçar o posicionamento exclusivo do empreendimento."
},
{
slug: "riio", client: "TEGRA · EXTO", title: "Riio by Piero Lissoni", year: "2025", kind: "Filme de lançamento",
image: "assets/img/pf-riio.jpg", local: "Barra da Tijuca · Rio de Janeiro", vimeo: { id: 1197506708, h: "639de21e69" },
desc: "RIIO BY PIERO LISSONI nasce do encontro entre duas identidades marcantes: a elegância do design italiano e a vivacidade da paisagem carioca. Inspirado pela Costa Amalfitana e pela arquitetura contemporânea italiana, o filme apresenta o empreendimento como uma nova forma de viver na Barra da Tijuca — unindo sofisticação, lazer, segurança e uma relação privilegiada com a orla da Avenida Lúcio Costa.\n\nPara traduzir esse conceito, construímos uma narrativa que conecta Itália e Brasil através de uma travessia simbólica pelo oceano, guiada por locução em italiano e apoiada por imagens aéreas, materiais de arquivo com Piero Lissoni e cenas desenvolvidas com inteligência artificial. A combinação entre linguagem cinematográfica e visualização arquitetônica cria uma experiência aspiracional que reforça o caráter exclusivo do projeto e a singularidade de ocupar um dos últimos terrenos da avenida."
},
{
slug: "nova-vivere", client: "TEGRA", title: "Nova Vivere", year: "2025", kind: "Filme de lançamento",
image: "assets/img/pf-nova-vivere.jpg", local: "Lapa · Rio de Janeiro", vimeo: { id: 1199783152, h: "1831c61093" },
desc: "NOVA VIVERE parte da ideia de que grandes transformações urbanas começam pela forma como escolhemos viver. Inspirado por movimentos de ressignificação vistos em diferentes bairros ao redor do mundo, o filme apresenta o empreendimento como parte de um novo momento da Lapa — onde renovação urbana, infraestrutura e qualidade de vida abrem espaço para novas possibilidades de habitar a cidade.\n\nPara dar forma a esse conceito, desenvolvemos uma narrativa visual construída a partir de ilustrações que ganham vida e evoluem para perspectivas arquitetônicas através do uso de inteligência artificial. Essa transição entre traço e espaço transforma o próprio ato de projetar em linguagem, criando uma experiência visual que conecta transformação urbana e desejo de futuro."
},
];
const PLATFORMS = ["Gafisa", "Tegra"];
const AWARDS = [
{ name: "Master Imobiliário", year: "2024", note: "Marketing · Filme" },
{ name: "Top Imobiliário", year: "2024", note: "Lançamento Premium" },
{ name: "Casacor", year: "2025", note: "Documentário oficial" },
{ name: "Prêmio CAU/SP", year: "2024", note: "Filme de Arquitetura" },
];
const CLIENTS = ["Gafisa", "Tegra"];
const TESTIMONIALS = [
{
quote: "Para o mercado imobiliário, onde tudo parece igual, a 22K consegue fazer o mais difícil: criar alma, identidade e uma estética autoral que elevam qualquer projeto.",
name: "Ricardo Real",
role: "Diretor de Criação · Script",
},
{
quote: "Trabalhar com a 22K é sempre uma experiência especial. Além do extremo profissionalismo, há um olhar sensível, criativo e muito preciso para traduzir conceito arquitetônico em uma narrativa carregada de emoção. São sensacionais!",
name: "Feu",
role: "Feu Arquitetura",
},
{
quote: "A 22K tem sido um grande parceiro estratégico. É uma produtora que visa de forma rápida se adaptar aos custos, mas principalmente as soluções tecnológicas e visuais de nossos projetos.",
name: "Alexander Greif",
role: "Tegra Incorporadora",
},
{
quote: "O grande diferencial de trabalhar a 22K foi a parceria e o comprometimento em todas as etapas do projeto, sempre com agilidade e abertura para construir tudo junto com a gente. O resultado superou nossas expectativas e, sem dúvida, queremos repetir essa experiência em novos projetos.",
name: "Gabriel Matos",
role: "Calçada",
},
];
const DELIVERABLES = [
{
bucket: "Filme & lançamento",
note: "O filme hero do empreendimento.",
items: [
{ title: "Filme de lançamento", desc: "Filme institucional de 60s a 3min — conceito, decupagem, captação e finalização." },
{ title: "Tour assinado", desc: "Walkthrough cinematográfico do decorado ou unidade-modelo, em movimento contínuo." },
{ title: "Manifesto", desc: "Filme conceito que traduz o posicionamento do empreendimento em narrativa visual." },
],
},
{
bucket: "Captação técnica",
note: "Para apresentar arquitetura com precisão.",
items: [
{ title: "Drone", desc: "Imagens aéreas com pilotos ANAC, Inspire 3 e licenças de voo em zona urbana." },
{ title: "Filme de arquitetura",desc: "Documentação do projeto em parceria com o escritório — fachada, ambiência e detalhe." },
{ title: "Hyperlapse & timelapse", desc: "Registro da obra do solo ao habite-se ou da luz que muda durante o dia." },
],
},
{
bucket: "Vendas & sociais",
note: "Da força de vendas ao feed.",
items: [
{ title: "Filme p/ corretores", desc: "Conteúdo de venda direcionado a stand, plantão e canais B2B." },
{ title: "Cortes para social", desc: "Versões 9:16, 1:1 e 16:9 para Instagram, YouTube e mídia paga." },
{ title: "Tour 3D", desc: "Modelagem e animação 3D do empreendimento para fases de pré-lançamento.", soon: true },
],
},
];
// ── Token helpers (theme-aware via CSS vars set on root) ───────────────
const TOKENS = `
:root {
--paper: #F4F1EA;
--paper-2: #ECE7DC;
--ink: #0a0a0a;
--ink-2: #161616;
--ink-3: #1f1f1f;
--line: rgba(255, 255, 255, 0.08);
--line-strong: rgba(255, 255, 255, 0.18);
--text: #E8E2D3;
--text-mute: #8a8474;
--text-dim: #5a564d;
--accent: #B8893A;
--accent-soft: #cfa860;
}
[data-theme="light"] {
--line: rgba(0, 0, 0, 0.08);
--line-strong: rgba(0, 0, 0, 0.18);
--text: #0a0a0a;
--text-mute: #6f6a5d;
--text-dim: #a09b8c;
}
html, body { margin: 0; padding: 0; }
body {
background: var(--ink);
color: var(--text);
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-feature-settings: "ss01", "kern";
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
::selection { background: var(--accent); color: #0a0a0a; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.06em; text-transform: uppercase; font-size: 11px; }
/* progressive image reveal */
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.reveal { animation: fadeUp .8s cubic-bezier(.2,.7,.2,1) both; }
/* Marquee for client wall on hover-stop */
@keyframes scrollX { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Subtle film-grain noise */
.grain::before {
content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: .12;
background-image: url("data:image/svg+xml;utf8,");
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
/* ── Responsive ─────────────────────────────────────────── */
html, body { overflow-x: hidden; max-width: 100%; }
img, video, iframe { max-width: 100%; }
@media (max-width: 860px) {
.r-sec { padding-top: 110px !important; padding-bottom: 110px !important; padding-left: 22px !important; padding-right: 22px !important; }
.r-padx { padding-left: 20px !important; padding-right: 20px !important; }
.r-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
.r-grid-logos { grid-template-columns: repeat(3, 1fr) !important; row-gap: 34px !important; }
.r-fullw { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; }
.r-hide-sm { display: none !important; }
.r-stack { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
.r-header { padding-left: 20px !important; padding-right: 20px !important; }
.r-hero-cta { left: 20px !important; right: 20px !important; bottom: 64px !important; justify-content: flex-start !important; flex-wrap: wrap !important; gap: 14px !important; }
}
@media (max-width: 520px) {
.r-grid-logos { grid-template-columns: repeat(2, 1fr) !important; }
.r-sec { padding-top: 76px !important; padding-bottom: 76px !important; padding-left: 16px !important; padding-right: 16px !important; }
}
`;
// ── 22K wordmark — recreated from the supplied SVG, color-driven ──────
function Wordmark22K({ size = 28, color = "currentColor", style }) {
const h = size;
const w = (351.35 / 112.98) * h;
return (
);
}
// ── Section index — small monospace label in a section's gutter ───────
function SectionIndex({ num, label, accent = false }) {
return (
({num}){label}
);
}
// ── Buttons ────────────────────────────────────────────────────────────
function PrimaryBtn({ children, onClick, dark = true, style }) {
return (
);
}
function GhostBtn({ children, dark = true, style }) {
return (
);
}
// ── Client wordmarks (real 22K clients) ───────────────────────────────
// Clean monochrome renditions in the site's type system. Swap with the
// brands' official SVGs (assets/img) whenever those are available.
function GafisaLogo({ height = 22, color = "currentColor", style }) {
return (
);
}
function TegraLogo({ height = 22, color = "currentColor", style }) {
return (
);
}
const CLIENT_LOGOS = [
{ name: "Gafisa", Logo: GafisaLogo },
{ name: "Tegra", Logo: TegraLogo },
];
Object.assign(window, {
STILLS, PROJECTS, PLATFORMS, AWARDS, CLIENTS, TESTIMONIALS, DELIVERABLES,
TOKENS, Wordmark22K, SectionIndex, PrimaryBtn, GhostBtn,
GafisaLogo, TegraLogo, CLIENT_LOGOS,
});