Cinematic Search / Prompt Bar

jitesh208
Jan 17, 2026 5
Live Preview

Live Editor

<div class="hero">
  <div class="command">
    <span class="text">
      Let’s make <span class="glow">a miracle</span>
    </span>
    <span class="caret"></span>
  </div>

  <div class="actions">
    <img src="https://i.pravatar.cc/40?img=11" />
    <div class="icon">📎</div>
    <div class="icon">🌐</div>
    <div class="search">Search</div>
  </div>
</div>
body{
  margin:0;
  height:100vh;
  background:
    radial-gradient(circle at top left,#2b2f38,#0b0e14 60%);
  display:grid;
  place-items:center;
  font-family:system-ui, -apple-system, BlinkMacSystemFont;
}

/* Container */
.hero{
  width:320px;
}

/* Command bar */
.command{
  position:relative;
  padding:22px 28px;
  border-radius:26px;
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(18px);
  color:#fff;
  font-size:18px;
  letter-spacing:.4px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    0 40px 80px rgba(0,0,0,.5);
  overflow:hidden;
}

/* Glow reveal */
.glow{
  position:relative;
  color:#fff;
}

.glow::after{
  content:"";
  position:absolute;
  inset:-20px;
  background:radial-gradient(circle at left,
    rgba(255,160,120,.9),
    transparent 60%);
  filter:blur(30px);
  animation:moveGlow 4s ease-in-out infinite;
  z-index:-1;
}

/* Caret */
.caret{
  display:inline-block;
  width:3px;
  height:32px;
  background:#fff;
  margin-left:6px;
  animation:blink 1s steps(2) infinite;
  vertical-align:-4px;
}

/* Bottom actions */
.actions{
  margin-top:20px;
  display:flex;
  gap:14px;
  align-items:center;
}

.actions img{
  width:40px;
  height:40px;
  border-radius:50%;
}

.icon, .search{
  padding:10px 16px;
  border-radius:20px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
  color:#bbb;
}

.search{
  color:#888;
}

/* Animations */
@keyframes blink{
  50%{opacity:0}
}

@keyframes moveGlow{
  0%{transform:translateX(-60%)}
  50%{transform:translateX(0)}
  100%{transform:translateX(60%)}
}
Categories

Cinematic Search / Prompt Bar

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
