Synthwave AI Chat Interface with Dynamic Glow Orbs

Loading…

Synthwave AI Chat Interface with Dynamic Glow Orbs | GoSnippets

Source Code

1
2<section class="gs-stage">
3  <div class="gs-orb gs-orb-1" aria-hidden="true"></div>
4  <div class="gs-orb gs-orb-2" aria-hidden="true"></div>
5  <div class="gs-grid-overlay" aria-hidden="true"></div>
6  <div class="gs-card">
7    <div class="gs-card-inner">
8      <h2 class="gs-header">AI Chat Interface</h2>
9      <div class="gs-chat-box">
10        <div class="gs-chat-stream" id="gs-chat-stream">
11          <div class="gs-message sender">
12            <svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
13              <path d="M12 20.25V3.75" stroke="#FF6B35"></path>
14              <path d="M19.25 6.75L12 3.75L4.75 6.75" stroke="#FF6B35"></path>
15            </svg>
16            <p>Hi there! How can I assist you today?</p>
17          </div>
18          <div class="gs-message receiver">
19            <p>I'm looking for insights into the new product features.</p>
20            <svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
21              <path d="M12 20.25V3.75" stroke="#FF6B35"></path>
22              <path d="M19.25 17.25L12 20.25L4.75 17.25" stroke="#FF6B35"></path>
23            </svg>
24          </div>
25        </div>
26        <div class="gs-chat-input">
27          
28          <button class="btn-send">
29            <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
30              <path d="M3 18V7.5a2.5 2.5 0 115 0M21 18V7.5a2.5 2.5 0 10-5 0M7 18V9.529a2.5 2.5 0 013 0V18" stroke="#FF6B35"></path>
31            </svg>
32          </button>
33        </div>
34      </div>
35    </div>
36  </div>
37</section>

Synthwave AI Chat Interface with Dynamic Glow Orbs

Source Code

More Other snippets

Comments(0)