Letter Components

Physical letter aesthetics with MotherDuck brutalist style 🦆

Flat Letter (Default)

🦆

Dear Future Me

Written on November 9, 2025

I’m writing this letter to remind you of where you were today. Remember the excitement of building something new, the challenges you faced, and the dreams you’re chasing right now.

By the time you read this, I hope you’ve made progress on your goals. Whether you succeeded or learned from setbacks, I hope you’re proud of the journey.

Keep pushing forward. Keep being kind to yourself. Keep dreaming big.

With love from the past,
— You

Accent Color Variants

🦆

Blue Accent

December 2025

This letter uses the duck-blue accent color from the MotherDuck palette. Notice the thin accent bar at the top and the duck stamp.

🦆

Teal Accent

January 2026

The teal accent brings a fresh, vibrant feel to the letter while maintaining the brutalist aesthetic.

🦆

Lavender Accent

February 2026

Lavender creates a softer, more contemplative mood perfect for personal reflections.

🦆

Peach Accent

March 2026

The warm peach accent adds a friendly, approachable touch to your future letters.

Sealed Envelope Variant

🦆

SENT

🦆

Open Letter Variant (Interactive)

Click the envelope to flip between sealed and open states

Surprise! ✨

To be opened on New Year’s Day 2026

This is a special letter that was sealed and waiting for just the right moment. You clicked to open it, and here we are!

The interactive envelope creates a delightful experience for letters that are scheduled to be opened at specific future dates.

Sealed with care on November 9, 2025 🦆

Minimal Variant (No Stamp)

Clean & Minimal

For a more subtle look

Sometimes you want a cleaner look without the decorative stamp. This variant maintains all the brutalist charm while keeping things simple.

The lined paper effect and hard shadows still give it that physical letter feeling.

Features

🎨 Three Variants

Flat, Sealed, and Open (interactive) variants for different use cases

🌈 Six Accent Colors

Yellow, Blue, Teal, Lavender, Peach, and Lime from MotherDuck palette

📮 Optional Stamp

Toggle the decorative duck stamp for clean or playful looks

💫 Hover Effects

Smooth translation effects on hover following brutalist shadow pattern

📝 Lined Paper

Subtle lined background effect creates authentic letter feeling

🔧 Composable

Header, Title, Date, Content, and Footer components for flexibility

Usage Example

import {
  Letter,
  LetterHeader,
  LetterTitle,
  LetterDate,
  LetterContent,
  LetterFooter
} from "@/components/ui/letter"

<Letter variant="flat" accentColor="yellow" showStamp>
  <LetterHeader>
    <LetterTitle>Dear Future Me</LetterTitle>
    <LetterDate>November 9, 2025</LetterDate>
  </LetterHeader>

  <LetterContent>
    <p>Your letter content goes here...</p>
  </LetterContent>

  <LetterFooter>
    <p>— Past You</p>
  </LetterFooter>
</Letter>