Design for AICorner spotlight
Corner spotlight: a CSS card. Copy the rules, or the prompt that rebuilds it.
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
Build a 280px near-black card (#0a0a0a, 1px #262626 border, 16px radius, 24px padding, overflow hidden, isolation isolate). A 320px circular radial glow (rgba(56,189,248,.35) to transparent at 60%) is anchored at the top-left corner behind the content, hidden at opacity 0 and scale .5; on hover it fades in and scales to 1.3 over 600ms with a springy curve while the border turns sky blue #0ea5e9. 18px white title, 14px #a3a3a3 text.