v1 · 44 components · live

The parts.

Every drop-in in the MobDial system, organized by purpose. Hover CODE to reveal the snippet. COPY grabs it. Live demos on the left of each card.

01Backgrounds

6 components · atmosphere

bg-cosmosfull-page space backdrop · stars · nebula · planet

<link rel="stylesheet" href="components/bg-cosmos.css">
<div class="md-cosmos">
  <div class="md-cosmos__nebula"></div>
  <div class="md-cosmos__stars md-cosmos__stars--far"></div>
  <div class="md-cosmos__stars md-cosmos__stars--mid"></div>
  <div class="md-cosmos__stars md-cosmos__stars--near"></div>
  <div class="md-cosmos__planet"></div>
</div>

grid-beamcult-ui inspired · beam sweep on grid

<div class="grid-beam">
  <div class="grid-beam__grid"></div>
  <div class="grid-beam__beam"></div>
</div>

aurora-heroconic-gradient spinning aurora

Aurora hero.

<section class="aurora">
  <h1>Headline <em>here</em></h1>
</section>

galaxyOGL WebGL shader · mouse repulsion

▸ load OGL · render shader

// npm i ogl
<script src="https://unpkg.com/ogl/dist/ogl.umd.js"></script>
<script src="components/galaxy.js" defer></script>
<div data-galaxy class="galaxy" data-hue="140"></div>

02Buttons

3 components

cosmic-buttonanimated conic-gradient ring

Launch →

<a class="cosmic-btn" href="#">
  <span class="cosmic-btn__halo"></span>
  <span class="cosmic-btn__inner">Launch</span>
</a>

border-beam-buttonproperty-driven spinning border

<button class="bb-btn">
  <span class="bb-btn__beam"></span>
  <span class="bb-btn__inner">Outline</span>
</button>

03Inputs

5 components

neon-checkboxparticles · rings · sparks on check · 4 tones

<label class="neon-checkbox" data-tone="info">
  <input type="checkbox">
  // box · glow · borders · check · particles · rings · sparks
</label>

chat-inputglass border · auto-grow · send button

<div class="container_chat_bot">...</div>

04Text effects

3 components · 10+ variants

special-text10 variants · sx-* classes

ShimmerGradient textNeon flickerGlitch chroma

<span class="sx sx-shimmer">Shimmer</span>
<span class="sx sx-gradient">Gradient</span>
<span class="sx sx-neon">Neon</span>
<span class="sx sx-glitch" data-text="Glitch">Glitch</span>

typewritertyped text · cycling list

Operator grade.

<span class="typewriter"
  data-texts='["one","two","three"]'></span>
// pair with typewriter.js

05Display blocks

10 components

spotlight-cardcursor-tracked radial highlight

Hover me

The spotlight follows your cursor.

<div class="spotlight" data-spotlight>
  <h3>Title</h3>
  <p>Description</p>
</div>

bannersannouncement · alert · success/warn/err

<div class="banner">
  <span class="pill">NEW</span>
  <span class="msg">Message</span>
</div>

icon-marqueedual-row scrolling logo cloud

<div class="im im--dark">
  <div class="im-row im-row--l">...rows</div>
</div>

06Utility

6 components

spinner-neonconic-gradient ring · 3 sizes · determinate

<div class="spinner-neon" data-size="md">
  <div class="spinner1"></div>
</div>

07Effects

4 components · canvas-based

confettibrand-palette canvas burst

<button data-confetti data-confetti-pieces="160">Send</button>

// or programmatic
window.mdConfetti({ x: 0.5, y: 0.5 })

money-burstbills + coins · "deal won" moment

<button data-money-burst>Deal won</button>

window.mdMoneyBurst({ origin: el })