Hand-Drawn Card Showcase

A showcase application that demonstrates both the Ballpoint Pen Card and Marker Pen Card components in different themes and configurations.

Features

  • Interactive live demo of both card styles side-by-side
  • Theme switcher with Light, Dark, and Pastel themes
  • Global controls for card dimensions
  • Individual controls for each card's specific parameters
  • Responsive design for various screen sizes

Card Types Demonstrated

Ballpoint Pen Card

  • Fine line style with waviness adjustments
  • Controlled by stroke width and waviness parameters
  • Simulates the look of a ballpoint pen drawing

Marker Pen Card

  • Variable thickness borders with sine wave patterns
  • Controlled by min/max thickness and wave frequency
  • Simulates the look of a marker pen drawing

Controls

Global Controls

  • Card Width: Adjust the width of both cards simultaneously
  • Card Height: Adjust the height of both cards simultaneously

Ballpoint Pen Controls

  • Stroke Width: Adjust the thickness of the pen line
  • Waviness: Adjust how much the line wavers for a hand-drawn look

Marker Pen Controls

  • Min Thickness: Set the minimum border thickness
  • Max Thickness: Set the maximum border thickness
  • Number of Waves: Control how many thickness waves appear around the border

Themes

  • Light: Clean design with white cards and dark strokes
  • Dark: Deep blue background with vivid accent colors
  • Pastel: Soft colors with gentle contrasts

Usage

This showcase imports and demonstrates the cards created by:

You can use this showcase to explore the different possible styles and configurations for these hand-drawn card components.