evandro/portifolio-evandrodevbr
1
0 Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

perf(movimento): uma transição, 3D leve e vídeo certo por aparelho

Browse Source 
Passagens com fade e 32 px, cena anterior termina em opacidade 0, sem visibility nem clip-path. 3D do hero como fundo ambiente, sob demanda e desligado em toque, aparelho fraco, saveData e movimento reduzido. Lenis fora do toque e salto direto em âncoras distantes. Vitrine só de clientes, até 3 capítulos, fixa só no desktop e carrossel no celular; vídeo só do projeto em cena com preload metadata. Rótulos mono a partir de 12 px e limão só no contato.
This commit is contained in:
Evandro Fonseca Junior committed 2026-10-14 03:32:23 -03:00
1 parent 8d07b8c6bb
commit c9a0b80656
48 files changed
+7210 -1241
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/components/showcase/showcase.css
+247 -124
View File
@@ -1,7 +1,9 @@
/*
* Vitrine dos projetos: moldura de navegador, capa dos cards, celular, vitrine animada (.ds-reel) e vídeo
* ampliado (.ds-lb). Tudo pensado para a seção escura de Projetos: cantos retos, rótulos em mono, lima como
* única cor de ação e a cor do site de cada projeto (--accent) só no brilho ao redor do vídeo.
* Vitrine dos projetos: moldura de navegador, capa dos cards, celular, vitrine animada (.ds-reel), lista de
* projetos (.ds-reel-list) e vídeo ampliado (.ds-lb). Tudo pensado para a seção escura de Projetos: cantos
* retos, rótulos curtos em mono (12 px no mínimo), texto de botão em sans 15 px, lima só em detalhes (nenhum
* botão preenchido de lima aqui: isso é da ação de contato) e a cor do site de cada projeto (--accent) só no
* brilho ao redor do vídeo. Nenhum efeito (grão, partículas, escurecimento) fica por cima das telas.
*/
/* ─────────────────────────── Moldura de navegador ─────────────────────────── */
@@ -50,9 +52,10 @@
margin-inline: auto;
padding: 0 9px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.04em;
color: rgba(255, 255, 255, 0.6);
font-size: 12px;
line-height: 1;
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.68);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
@@ -81,8 +84,7 @@
}
.ds-bframe-url {
height: 18px;
font-size: 9px;
height: 20px;
}
}
@@ -175,14 +177,14 @@
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 28px;
padding: 0 10px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink);
background: var(--slash);
min-height: 36px;
padding: 0 12px;
font-family: var(--font-display);
font-size: 15px;
font-weight: 500;
color: #fff;
background: rgba(10, 10, 10, 0.82);
border: 1px solid rgba(255, 255, 255, 0.4);
opacity: 0;
transform: translateY(6px);
transition:
@@ -281,7 +283,8 @@
border-radius: 24px;
background: #0a0a0a center top / cover no-repeat;
& > video {
& > video,
& > img {
position: absolute;
inset: 0;
display: block;
@@ -350,11 +353,11 @@
gap: 10px;
min-height: 44px;
padding: 0 14px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.06em;
font-family: var(--font-display);
font-size: 15px;
font-weight: 500;
white-space: nowrap;
color: rgba(255, 255, 255, 0.66);
color: rgba(255, 255, 255, 0.72);
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.12);
cursor: pointer;
@@ -378,8 +381,8 @@
&[aria-current="true"] {
color: #fff;
border-color: rgba(204, 255, 0, 0.55);
background: rgba(204, 255, 0, 0.07);
border-color: rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.08);
}
}
}
@@ -391,8 +394,8 @@
gap: 6px 10px;
margin-bottom: var(--sp-5);
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--slash);
}
@@ -409,7 +412,13 @@
}
.ds-reel-num {
font-family: var(--font-mono);
font-size: 12px;
color: var(--slash);
&::before {
content: attr(data-n);
}
}
.ds-reel-name {
@@ -432,13 +441,15 @@
padding: 0 12px;
border: 0;
background: transparent;
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
font-family: var(--font-display);
font-size: 15px;
line-height: 1.25;
color: rgba(255, 255, 255, 0.66);
text-align: left;
& span {
font-family: var(--font-mono);
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
}
@@ -526,13 +537,13 @@
display: flex;
align-items: center;
justify-content: center;
/* só opacidade: quem não está em cena já é inert (sem foco, sem clique, fora da busca) e aria-hidden */
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(14px);
transition:
opacity 0.5s ease,
transform 0.6s var(--ease-out),
visibility 0s linear 0.5s;
transform 0.6s var(--ease-out);
&[data-state="before"] {
transform: translateY(-14px);
@@ -540,9 +551,8 @@
&[data-state="active"] {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
transition-delay: 0s;
}
}
@@ -610,46 +620,6 @@
min-width: 88px;
}
/* celular: o celular é o aparelho principal (o notebook some) e a legenda ocupa a largura toda */
@media (max-width: 639px) {
.ds-reel-grid {
/* respiro para o botão fixo de preferências de analytics, que ocupa o canto de baixo */
padding-bottom: 68px;
}
.ds-reel-layer {
align-items: stretch;
}
.ds-reel-set {
--caption-h: 12.5rem;
width: min(100cqw, 460px);
height: 100%;
margin-inline: auto;
justify-content: space-between;
}
.ds-reel-devices {
flex: 1 1 0;
min-height: 0;
display: flex;
justify-content: center;
}
.ds-reel-laptop {
display: none;
}
.ds-reel-phone {
position: relative;
inset: auto;
width: auto;
min-width: 0;
height: 100%;
max-width: 100%;
}
}
.ds-reel-caption {
flex: none;
display: grid;
@@ -692,8 +662,8 @@
.ds-reel-chapter-count {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
font-size: 12px;
letter-spacing: 0.06em;
color: var(--slash);
}
@@ -718,25 +688,71 @@
}
}
/* Ver case e Ampliar vídeo em contorno; Abrir site é link de texto. Nada em lima: o preenchido é do contato. */
.ds-reel-actions {
display: flex;
flex-wrap: wrap;
gap: var(--sp-3);
align-items: center;
gap: var(--sp-2) var(--sp-3);
margin-top: var(--sp-2);
& .ds-link.ds-link-muted {
padding: 8px 16px;
color: #fff;
border-color: rgba(255, 255, 255, 0.38);
background: transparent;
}
@media (hover: hover) {
& .ds-link.ds-link-muted:hover {
border-color: #fff;
box-shadow: none;
}
}
& .ds-link.ds-link-text {
color: rgba(255, 255, 255, 0.84);
}
}
.ds-reel-actions .ds-link-muted {
border-color: rgba(255, 255, 255, 0.18);
color: #fff;
.ds-reel-expand {
cursor: pointer;
& svg {
flex: none;
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 1.6;
}
}
/* tela baixa (celular deitado, janela de desktop curta): a vitrine não cabe, e os cards já mostram os vídeos */
/* tela baixa (celular deitado, janela de desktop curta): a vitrine fixa não cabe, e a lista de projetos entra no lugar */
@media (max-height: 560px) {
.ds-reel {
display: none;
}
}
/* antes de o navegador montar a página, só onde a vitrine fixa vai existir: o bloco reservado aparece e a lista
(que o servidor entregou, com o texto e os links) fica escondida; sem JavaScript, a lista é quem aparece */
.ds-reel-placeholder {
display: none;
}
@media (min-width: 768px) and (min-height: 561px) and (
prefers-reduced-motion: no-preference
) and (scripting: enabled) {
.ds-reel-placeholder {
display: block;
}
.ds-reel-list[data-pending] {
display: none;
}
}
/* desktop com pouca altura: a lista de projetos e os trechos têm de caber na altura do pin */
@media (min-width: 1024px) and (max-height: 700px) {
.ds-reel-hint {
@@ -765,32 +781,125 @@
}
}
/* celular: o subtítulo sai para o aparelho ter mais tela, e o contador "02/05" já faz o papel dos tiques */
@media (max-width: 639px) {
.ds-reel-sub,
.ds-reel-ticks {
display: none;
}
}
/* celular baixo demais: o aparelho ficaria uma cápsula ilegível */
@media (max-width: 639px) and (max-height: 600px) {
.ds-reel {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.ds-reel {
display: none;
}
}
/* sem JavaScript a vitrine nunca monta: o espaço reservado por ela some */
@media (scripting: none) {
.ds-reel-placeholder {
/* ─────────────────────────── Lista de projetos ─────────────────────────── */
/*
* Sem rolagem presa: celular, movimento reduzido e janelas baixas. No celular é um carrossel por toque
* (rolagem horizontal com encaixe; o card seguinte aparece pela borda); acima de 768 px, uma grade.
*/
.ds-reel-list {
margin-top: var(--sp-10);
}
.ds-reel-items {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
gap: var(--sp-8) var(--sp-6);
list-style: none;
}
.ds-reel-item {
--accent: var(--slash);
display: flex;
flex-direction: column;
gap: var(--sp-5);
min-width: 0;
}
.ds-reel-item-media {
position: relative;
isolation: isolate;
&::before {
content: "";
position: absolute;
inset: -4% 0;
z-index: -1;
background: radial-gradient(
55% 60% at 50% 50%,
color-mix(in srgb, var(--accent) 36%, transparent),
transparent 72%
);
filter: blur(36px);
opacity: 0.4;
pointer-events: none;
}
}
.ds-reel-item-screen {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: #0a0a0a;
& > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
}
.ds-reel-item-phone {
width: min(62%, 240px);
margin-inline: auto;
}
@media (max-width: 767px) {
.ds-reel-list {
margin-top: var(--sp-8);
}
.ds-reel-items {
display: flex;
gap: var(--sp-4);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--sp-5);
scrollbar-width: none;
/* o card seguinte aparece pela borda: é o convite para deslizar */
margin-inline: calc(var(--sp-5) * -1);
padding: 2px var(--sp-5) var(--sp-4);
}
.ds-reel-items::-webkit-scrollbar {
display: none;
}
.ds-reel-item {
flex: 0 0 min(82%, 340px);
scroll-snap-align: start;
padding: var(--sp-5) var(--sp-4);
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* um cartão mais baixo: sem subtítulo a legenda cabe e o celular da moldura ganha espaço */
.ds-reel-item .ds-reel-sub {
-webkit-line-clamp: 3;
}
}
/* sem JavaScript o carrossel vira lista vertical: nada fica escondido atrás de uma rolagem lateral */
@media (scripting: none) {
.ds-reel-items {
display: grid;
overflow: visible;
margin-inline: 0;
padding: 0;
}
.ds-reel-item {
flex: none;
}
}
/* ─────────────────────────── Vídeo ampliado ─────────────────────────── */
@@ -870,8 +979,8 @@ html.ds-lb-open {
.ds-lb-count {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
font-size: 12px;
letter-spacing: 0.08em;
color: var(--slash);
}
@@ -893,11 +1002,10 @@ html.ds-lb-open {
& button {
min-height: 44px;
padding: 0 16px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
font-family: var(--font-display);
font-size: 15px;
font-weight: 500;
color: rgba(255, 255, 255, 0.72);
background: transparent;
border: 0;
cursor: pointer;
@@ -905,9 +1013,11 @@ html.ds-lb-open {
background 0.2s ease,
color 0.2s ease;
/* a versão escolhida: fundo claro e sublinhado em lima (a lima só marca, não preenche o botão) */
&[aria-pressed="true"] {
color: var(--ink);
background: var(--slash);
color: #fff;
background: rgba(255, 255, 255, 0.12);
box-shadow: inset 0 -2px 0 var(--slash);
}
&:focus-visible {
@@ -1007,13 +1117,19 @@ html.ds-lb-open {
width: 44px;
height: 44px;
padding: 0;
color: var(--ink);
background: var(--slash);
border: 0;
color: #fff;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.5);
cursor: pointer;
@media (hover: hover) {
&:hover {
border-color: #fff;
}
}
&:focus-visible {
outline: 2px solid #fff;
outline: 2px solid var(--slash);
outline-offset: 2px;
}
@@ -1028,7 +1144,7 @@ html.ds-lb-open {
flex: none;
min-width: 72px;
font-family: var(--font-mono);
font-size: 11px;
font-size: 12px;
font-variant-numeric: tabular-nums;
color: rgba(255, 255, 255, 0.7);
}
@@ -1085,14 +1201,12 @@ html.ds-lb-open {
list-style: none;
& button {
min-height: 36px;
padding: 0 12px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
min-height: 40px;
padding: 0 14px;
font-family: var(--font-display);
font-size: 15px;
white-space: nowrap;
color: rgba(255, 255, 255, 0.7);
color: rgba(255, 255, 255, 0.76);
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.14);
cursor: pointer;
@@ -1101,6 +1215,8 @@ html.ds-lb-open {
border-color 0.2s ease;
& span {
font-family: var(--font-mono);
font-size: 12px;
color: var(--slash);
}
@@ -1113,7 +1229,7 @@ html.ds-lb-open {
&[aria-current="true"] {
color: #fff;
border-color: var(--slash);
border-color: rgba(255, 255, 255, 0.7);
}
&:focus-visible {
@@ -1132,11 +1248,18 @@ html.ds-lb-open {
.ds-lb-links {
display: flex;
flex-wrap: wrap;
gap: var(--sp-3);
align-items: center;
gap: var(--sp-2) var(--sp-3);
& .ds-link-muted {
& .ds-link.ds-link-muted {
padding: 8px 16px;
color: #fff;
border-color: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.38);
background: transparent;
}
& .ds-link.ds-link-text {
color: rgba(255, 255, 255, 0.84);
}
}