Design for AIFoco en la esquina
Foco en la esquina: tarjeta en CSS. Copia las reglas, o el prompt que reproduce el resultado.
Spotlight
A radial highlight grows from the corner on hover, no pointer tracking needed.
CSS
.card-089 {
position: relative;
width: 280px;
padding: 24px;
background: #0a0a0a;
border: 1px solid #262626;
border-radius: 16px;
overflow: hidden;
font-family: system-ui,sans-serif;
color: #fafafa;
isolation: isolate
}
.card-089::before {
content: "";
position: absolute;
width: 320px;
height: 320px;
left: -160px;
top: -160px;
border-radius: 50%;
background: radial-gradient(circle,rgba(56,189,248,.35),transparent 60%);
opacity: 0;
transform: scale(.5);
transition: opacity .4s,transform .6s cubic-bezier(.2,.8,.2,1);
z-index: -1
}
.card-089:hover::before {
opacity: 1;
transform: scale(1.3)
}
.card-089:hover {
border-color: #0ea5e9
}
.card-089 h3 {
margin: 0 0 6px;
font-size: 18px
}
.card-089 p {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: #a3a3a3
}
HTML
<article class="card-089">
<h3>Spotlight</h3>
<p>A radial highlight grows from the corner on hover, no pointer tracking needed.</p>
</article>Prompt
Construye una tarjeta casi negra de 280px (#0a0a0a, borde 1px #262626, radio 16px, padding 24px, overflow hidden, isolation isolate). Un brillo radial circular de 320px (rgba(56,189,248,.35) a transparente al 60%) va anclado en la esquina superior izquierda detrás del contenido, oculto con opacidad 0 y escala .5; en hover aparece y escala a 1.3 durante 600ms con una curva con rebote mientras el borde pasa a azul cielo #0ea5e9. Título blanco 18px, texto 14px #a3a3a3.