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.”
Copy into your project
HTML
<figure class="nuda-signature">
<blockquote class="nuda-signature__quote">
“The only way to do great work is to love what you do.”
</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.