Skip to content

Syntax Reveal

A copy-paste code & terminal component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.

Code & TerminalHTMLCSSany framework
1import React2function App() {3  return <div/>4}

Copy into your project

HTML
<!-- Syntax Reveal — code lines fade-slide in one by one -->
<pre class="nuda-syn">
  <code>
    <span class="nuda-syn__line" style="--d: 0s"><i>1</i><span class="nuda-syn__a">import</span> <span class="nuda-syn__b">React</span></span>
    <span class="nuda-syn__line" style="--d: .15s"><i>2</i><span class="nuda-syn__a">function</span> <span class="nuda-syn__c">App</span>() {</span>
    <span class="nuda-syn__line" style="--d: .3s"><i>3</i>  return &lt;<span class="nuda-syn__d">div</span>/&gt;</span>
    <span class="nuda-syn__line" style="--d: .45s"><i>4</i>}</span>
  </code>
</pre>
CSS
/* Syntax Reveal
   Lines fade-slide in with a stagger driven by the inline --d.
   Customize: --syn-bg, token colors. */

.nuda-syn {
  --syn-bg: #0a0a0a;
  margin: 0;
  padding: 12px 12px 12px 0;
  background: var(--syn-bg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  font: 500 0.85rem ui-monospace, monospace;
  color: #fafafa;
  width: 100%;
  max-width: 480px;
  overflow: hidden;
  line-height: 1.6;
}

.nuda-syn code {
  display: flex;
  flex-direction: column;
}

.nuda-syn__line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
  opacity: 0;
  transform: translateX(-8px);
  animation: nuda-syn-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) var(--d, 0s) forwards;
}

.nuda-syn__line i {
  display: inline-flex;
  justify-content: flex-end;
  width: 22px;
  color: #63636e;
  font-style: normal;
  font-size: 0.75rem;
  flex-shrink: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  padding-right: 6px;
}

.nuda-syn__a { color: #a78bfa; }
.nuda-syn__b { color: #fbbf24; }
.nuda-syn__c { color: #e4ff54; }
.nuda-syn__d { color: #38bdf8; }

@keyframes nuda-syn-in {
  to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-syn__line { animation: none; opacity: 1; transform: none; }
}

How to use Syntax Reveal

Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.

Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.

More code & terminal components

← Browse all NudaUI components