Hand-Drawn Retro Radio Group

This Hand-Drawn Retro Radio Group injects personality into standard forms with a nostalgic, sketchbook aesthetic. It combines a “neo-brutalist” shadow style with subtle animations - like text jitter and a bouncing selection dot - to mimic the imperfection of hand-drawn art. The background features a CSS-generated paper texture and scanline effect, making it ideal for indie game interfaces, creative blogs, or retro-themed landing pages.

Core Technique

The unique “messy” look is achieved through layering CSS gradients and keyframe animations:

1. Paper & Scanlines: The .radio-group uses ::after and ::before pseudo-elements with repeating-linear-gradient. One creates the static noise (paper texture), while the other creates moving horizontal lines (scanlines) using the scanline animation.
2. Hard Shadows: The component avoids soft blurs. Instead, it uses box-shadow: 4px 4px 0 #000 to create sharp, hard contrasts typical of comic book or brutalist styles.
3. Jitter Animation: To sell the “hand-drawn” feeling, the .radio:hover .radio-label applies a jitter keyframe. This rapidly rotates the text between -1deg and 1deg, creating a nervous, sketchy energy.

Customization

The visual style relies on specific hex colors and shadow offsets. You can modernize the look by changing the primary accent color or adjusting the animation intensity.

/* Change the primary accent color (Red -> Blue) */
.radio-dot, 
.radio:hover .radio-label {
  background: #007bff; /* for dot */
  color: #007bff;      /* for text */
}

.radio input:checked + .radio-visual {
  border-color: #007bff;
  background: #e6f2ff; /* Light blue tint */
}

/* Tweak the jitter intensity */
@keyframes jitter {
  from { transform: rotate(-2deg) translateX(-2px); } /* More extreme */
  to   { transform: rotate(2deg) translateX(2px); }
}

Tips

1. Accessibility (Focus Indicators): The current implementation hides the default radio input (opacity: 0). While mouse interaction works, keyboard navigation (Tab/Arrows) is invisible because there is no :focus-visible style defined for the custom visual elements. You must add focus styles for accessibility.

/* Accessibility Fix: Visible Focus Ring */
.radio input:focus-visible + .radio-visual {
  outline: 2px dashed #000;
  outline-offset: 4px;
}

2. Performance: The scanline animation runs infinitely on the main container. While mostly performant, large gradients can paint-heavy. If using this on mobile devices, consider wrapping the animation in a media query to disable it on smaller screens or if the user prefers reduced motion.