Loading video…
All breakouts
8.5App DemoStory Open hook
Hook
HOVER EXPANDING LOGIN
@code_candy
18.1K followers · usually 31.0K views a post
Views
247.5K
Likes
15.0K
Comments
117
Shares
1.5K
Why it worked
The video demonstrates a visually appealing and interactive UI element that is relevant to web developers and designers. The use of a clean, modern aesthetic and the direct display of the underlying code likely resonated with the target audience, driving engagement.
Summary
This video showcases a "hover expanding login" UI element created with code. It demonstrates the initial collapsed state of the login button and then expands to reveal input fields for username and password, along with sign-in, forgot password, and sign-up options.
Structure
- 1Show initial login button
- 2Expand to reveal login form
- 3Show input fields and buttons
- 4Show code editor
Product placement
The video displays a UI element called "HOVER EXPANDING LOGIN" which is likely a component or template offered by Code Candy Land, as indicated by the creator's bio link and the CSS code shown.
On-screen text
HOVER EXPANDING LOGIN
CodeCandy.css
/*
* A simple conic gradient on a rotating square */
.box {
canvas {
position: absolute;
width: 170px;
height: 170px;
translate: -50% -50%;
background: conic-gradient(
#ff0000 0deg 30deg,
#ff8c00 30deg 60deg,
#ffe500 60deg 90deg,
#00ff00 90deg 120deg,
#00ffff 120deg 150deg,
#0000ff 150deg 180deg,
#8a2be2 180deg 210deg,
#ff00ff 210deg 240deg,
#ff0080 240deg 270deg,
#ff0000 270deg 300deg,
#ff8c00 300deg 330deg,
#ffe500 330deg 360deg
);
filter: blur(12px) drop-shadow(0 0 12px #35eaff);
animation: neon-rotate 5s linear infinite;
}
}
@keyframes neon-rotate {
to {
transform: rotate(1turn);
}
}
More from @code_candy
Their other posts in the index, biggest breakout first.
