# Thoughts Frontend — Frutiger Aero Redesign

**Date:** 2026-05-16  
**Scope:** `thoughts-frontend` only  
**Approach:** Component-by-component redesign (B) — apply existing FA utilities purposefully, add interaction moments

---

## Summary

The thoughts frontend already has the Frutiger Aero foundation (font, CSS utilities, background image, gradients) but almost no components use it. Cards are plain shadcn white. The header is text-only. The landing page is a single minimal card. This redesign applies the aesthetic throughout and adds a layer of subtle, unexpected delight moments modelled on the existing confetti+sound interaction.

**Vibe:** "Calm surface, surprise inside." Tasteful Frutiger Aero — not maximalist, not flat. One or two playful moments per interaction, short animations (150–450ms), never in the way.

---

## Design Decisions

### 1. Header

**Current:** Plain text "Thoughts" + nav links + flat buttons.

**Proposed:**
- Full glass/blur treatment: `backdrop-filter: blur(16px)`, white highlight border, `box-shadow` with inset top highlight
- Logo: glossy rounded-square pill (border-radius: 50% 50% 50% 8px) with 💭 emoji, blue gradient fill, gloss sweep pseudo-element
- Logo text: "Thoughts" with white text-shadow
- Nav links: subtle opacity treatment, white text-shadow
- Search: pill-shaped with translucent background
- Login/Register: rounded pill buttons — Login is ghost-glass, Register is glossy blue gradient

### 2. Landing Page

**Current:** Single centered glass card, h1 "Welcome to Thoughts", two flat buttons.

**Proposed:**
- Full-screen Aero sky background visible (already provided by `background.avif` + body rule)
- Three ambient CSS orbs (blurred radial gradients, `position: absolute`, no images) float in the background
- Hero card: deeper glass (`rgba(255,255,255,0.28)` + `backdrop-filter: blur(20px)`), larger border-radius (20px), inset top border highlight, gloss sweep pseudo-element covers top 55%
- Heading: larger (text-5xl is fine), stronger text-shadow
- CTA buttons: glossy gradient pills — Login is blue, Register is green, both with top-half specular highlight pseudo-element
- Fediverse badge: small pill below buttons ("Works with Mastodon, Pixelfed & more" + green dot)

### 3. Thought Cards

**Current:** Standard shadcn `<Card>` — white, 8px radius, flat border, grey avatar circle, flat Reply ghost button.

**Proposed:**
- Body: `rgba(255,255,255,0.72)` + `backdrop-filter: blur(12px)`, 16px border-radius, white highlight border
- Gloss sweep: `::before` pseudo covering top 52%, `rgba(255,255,255,0.5) → transparent`
- Avatar: gradient fill (blue→teal) with initial letter fallback, `box-shadow: 0 0 0 2px white, 0 0 0 3.5px rgba(59,130,246,0.45)` glow ring
- Hover: `transform: translateY(-3px)` + deeper blue-tinted shadow — CSS transition, no JS
- Reply button: blue-tinted pill (`rgba(37,99,235,0.08)` bg, matching border) instead of flat ghost
- Hashtags in content: colored `text-primary` inline
- Reply inline form: slides in with `slideDown` keyframe animation (opacity + translateY + max-height), styled as translucent panel

### 4. Sidebar Widgets (PopularTags, TopFriends, UsersCount)

All three get the same glass panel treatment as cards.

**PopularTags:**
- Widget title gets a glossy gradient icon badge (blue, 22px rounded-square)
- Tag pills: `rgba(37,99,235,0.08)` bg, branded border, hover scales to 1.05
- Trending tags (top 2 by count): 🔥 prefix + red tint variant

**TopFriends:**
- Widget title: green gradient icon badge
- Avatars: gradient fill with initial letter + glow ring (same pattern as thought cards)
- Handle shown beneath display name (`@username` — local users only, no full fediverse instance suffix needed)
- "following" badge per entry: green-tinted pill

**UsersCount → Community widget:**
- Widget title: purple gradient icon badge, renamed "Community"
- Single glossy stat cell: user count with gradient number text (`background-clip: text`, blue→teal) + "members" label
- No new API data required — uses existing `getUsersCount` endpoint only

### 5. Interaction Moments

**Follow button:**
- On click: canvas-based particle burst (14 particles, random angles, brand colors)
- Button transitions: blue gradient → green gradient, label "+ Follow" → "✓ Following"
- Particles: 400ms lifetime, gravity applied

**Delete thought:**
- On confirm: card plays `shake` keyframe (450ms, ±4px horizontal + slight rotation)
- After shake: `fadeout` keyframe (scale 0.9 + translateY 8px + opacity 0), 300ms
- Card removed from DOM after animation

**Reply form:**
- `slideDown` animation: opacity 0→1, translateY -8px→0, max-height 0→120px, 220ms ease-out
- Form is styled as translucent panel matching card footer background

**Loading skeletons:**
- Shimmer gradient updated to use blue/teal palette: `rgba(96,165,250,0.15) → rgba(96,165,250,0.35) → rgba(96,165,250,0.15)`
- Avatar skeleton: circular, same shimmer

**Empty states:**
- Replace plain string with a structured component: floating emoji (CSS `float` keyframe, 2.8s loop), title, subtitle, optional CTA button
- Variants per context: 💭 feed empty, 🔍 search no results, 🏷 no tags, 👥 no users
- CTA is a glossy blue pill button where relevant (e.g. "Discover people ✨" on empty feed)

**Post thought (existing):**
- Keep confetti + sound as-is — it already nails the vibe

---

## Responsive Behaviour

- All glass effects degrade gracefully: `backdrop-filter` not supported → `background-opacity` fallback already handled by the rgba values
- Cards: full-width on mobile, no sidebar (existing layout already handles this with `hidden lg:block`)
- Header: search pill collapses on small screens (existing behaviour kept)
- Landing orbs are static (no animation) — no motion concern
- Empty state floating emoji: `animation: none` on `prefers-reduced-motion`
- Skeleton shimmer: `prefers-reduced-motion` → static grey instead of animated
- Card hover lift: `transition: none` on `prefers-reduced-motion`

---

## Files Affected

| File | Change |
|------|--------|
| `app/globals.css` | Add `slideDown`, `shake`, `fadeout`, `float`, `shimmer-aero` keyframes; add `.empty-state`, `.widget-icon`, `.orb` utility classes |
| `app/layout.tsx` | No change |
| `app/page.tsx` | LandingPage: add orbs, deeper glass card, fediverse badge, glossy buttons |
| `components/header.tsx` | Add logo bubble, glass treatment, pill buttons |
| `components/thought-card.tsx` | Glass body, gradient avatar, hover lift, pill reply button, hashtag color |
| `components/thought-form.tsx` | Slide-in animation wrapper when used as reply form |
| `components/thought-thread.tsx` | Pass through animation class |
| `components/popular-tags.tsx` | Glass widget, icon badge, branded tag pills, trending variant |
| `components/top-friends.tsx` | Glass widget, icon badge, gradient avatars, handle + following badge |
| `components/users-count.tsx` | Rename to Community widget, 2-col grid, gradient number text |
| `components/user-avatar.tsx` | Add gradient fallback + glow ring variant |
| `components/empty-state.tsx` | Full redesign: floating emoji, copy, optional CTA |
| `components/loading-skeleton.tsx` | Aero shimmer palette, respects prefers-reduced-motion |
| `components/follow-button.tsx` | Canvas particle burst on follow/unfollow |
| `components/ui/button.tsx` | Add `glossy` variant (pill shape, gradient, gloss pseudo) |
| `components/ui/card.tsx` | Add `glass` variant (frosted, gloss sweep) |
| `components/ui/badge.tsx` | Add `branded` and `trending` variants |

---

## Out of Scope

- Dark mode improvements (existing dark mode kept as-is, no new dark-mode-specific FA treatment)
- Shared component library / cross-project unification
- New features (likes, bookmarks, etc.)
- Portfolio or movies-diary projects