Skip to content

Author Signature Reveal

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

Quotes & TestimonialsHTMLCSSany framework
“The only way to do great work is to love what you do.”
Alex Quinn, CEO

Copy into your project

HTML
<figure class="nuda-signature">
  <blockquote class="nuda-signature__quote">
    &ldquo;The only way to do great work is to love what you do.&rdquo;
  </blockquote>
  <svg class="nuda-signature__svg" viewBox="0 0 220 60" aria-label="Signature">
    <path class="nuda-signature__path"
      d="M10 40 C 20 10, 35 50, 50 30 S 80 10, 95 35 S 130 55, 150 25 S 190 10, 210 35"
      fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
  </svg>
  <figcaption class="nuda-signature__name">Alex Quinn, CEO</figcaption>
</figure>
CSS
/* Author Signature Reveal
   Handwritten signature draws itself in beneath the quote. */

.nuda-signature {
  max-width: 380px;
  padding: 1.5rem;
  margin: 0;
  background: #0c0c10;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  color: #fafafa;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.nuda-signature__quote {
  margin: 0 0 1rem;
  font-size: 1rem;
  line-height: 1.55;
  font-style: italic;
  color: #fafafa;
}

.nuda-signature__svg {
  display: block;
  width: 160px;
  height: 44px;
  color: #e4ff54;
  margin-bottom: 0.5rem;
}

.nuda-signature__path {
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  animation: nuda-sign-draw 2.4s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.2s;
}

@keyframes nuda-sign-draw {
  to { stroke-dashoffset: 0; }
}

.nuda-signature__name {
  font-size: 0.75rem;
  color: #63636e;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .nuda-signature__path {
    animation: none;
    stroke-dashoffset: 0;
  }
}

How to use Author Signature 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 quotes & testimonials components

← Browse all NudaUI components