andwati/andwati.com
1
0
Fork 0
mirror of https://github.com/andwati/andwati.com.git synced 2026-10-18 01:12:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

redesign site as "case file" theme

Browse Source 
- new paper/ink palette with single red accent, replacing catppuccin
- self-hosted IBM Plex Serif (display) + Source Serif 4 (body), drop Outfit
- rebuilt homepage masthead, numbered post index, navbar with active states
- switch syntax highlighting + utterances to gruvbox, synced via postMessage
- remove terminal/404 easter egg chrome, clean up remaining inline styles
- fix stray syntax.css link causing a 404
This commit is contained in:
andwati
2026-07-16 12:28:34 +03:00
parent 57462869ec
commit a51671d7e4
62 changed files with 2116 additions and 2806 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.agents/skills/animation-vocabulary/SKILL.md
+173
View File
@@ -0,0 +1,173 @@
---
name: animation-vocabulary
description: Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop in; "the iOS rubber-band scroll" → Rubber-banding). Use when the user asks "what's it called when…", or describes a motion effect without knowing its name and wants the right word to prompt an AI or designer with. For naming an effect, not designing or building one.
---
# Animation Vocabulary
Turn a vague description of a motion or effect into the precise term, so the user knows what to ask for.
## Quick Start
The user describes an effect loosely. You return the matching term(s) in this format:
```
**Stagger** — Animate several items one after another with a small delay between each, creating a cascade.
```
If several terms could fit, list the best match first, then 1–2 alternates with a one-line note on how they differ.
## Instructions
1. **Read for intent, not keywords.** Users describe what they *see* or *feel* ("springy", "slides off", "draws itself in"), not the technical name. Map the sensation to the glossary below.
2. **Quote the glossary verbatim.** Its descriptions are authoritative — use them as-is, don't paraphrase.
3. **Disambiguate close terms.** When two compete (*Clip-path* vs *Mask*, *Pop in* vs *Bounce*, *Shared element transition* vs *Layout animation*), contrast them so the user can pick.
4. **When nothing matches exactly,** name the closest term and say plainly it's an approximation, or describe the effect in the glossary's vocabulary (e.g. "that's a *stagger* of *scale-in* entrances").
5. **Stay within this glossary.** If a term genuinely isn't here, say so rather than inventing one — though you may explain the concept using these words.
6. **Keep it tight.** A naming question wants a name, not an essay. Lead with the term; expand only if asked.
## Examples
**Example 1 — feel-based**
User: "What's it called when a popover seems to grow out of the button you clicked instead of from its middle?"
Output:
```
**Origin-aware animation** — An element animates out of its trigger, like a popover growing from the button that opened it instead of from its own center which is the default in CSS.
```
**Example 2 — disambiguation**
User: "The thing where one image turns into another image."
Output:
```
**Morph** — One shape smoothly turns into another shape, e.g. Dynamic Island.
Close alternates:
- **Crossfade** — if they simply fade over each other in the same spot.
- **Shared element transition** — if an element travels and transforms from one position into another.
```
**Example 3 — physics feel**
User: "That iOS scroll where it resists and snaps back when you pull too far."
Output:
```
**Rubber-banding** — Resistance and snap-back when you drag past a boundary (the iOS overscroll feel).
```
## Glossary
_A curated snapshot mirroring the project's `/vocabulary` page; keep the two in sync when either changes._
### Entrances & Exits — how elements appear and disappear
- **Fade in / Fade out** — Element appears or disappears by changing opacity.
- **Slide in** — Element enters by sliding in from off-screen (left, right, top, or bottom).
- **Scale in** — Element grows from smaller to full size as it appears, often paired with a fade.
- **Pop in** — Element appears with a slight overshoot, like it bounces into place.
- **Reveal** — Content is uncovered gradually, often by animating a clip-path or mask.
- **Enter / Exit** — The animation an element plays when it's added to or removed from the screen.
### Sequencing & Timing — coordinating multiple elements or moments
- **Keyframes** — Defined points in an animation (0%, 50%, 100%) that the browser fills the gaps between.
- **Interpolation / Tween** — Generating all the in-between frames between a start and end value, so motion is continuous.
- **Stagger** — Animate several items one after another with a small delay between each, creating a cascade.
- **Orchestration** — Deliberately timing multiple animations so they feel like one coordinated motion.
- **Delay** — Time before an animation starts.
- **Duration** — How long an animation takes.
- **Fill mode** — Whether an element keeps its first or last frame's styles before the animation starts or after it ends (e.g. forwards).
- **Stepped animation** — An animation that is divided into discrete steps, like a countdown timer.
### Movement & Transforms — changing an element's position, size, or angle
- **Translate** — Move an element along the X or Y axis.
- **Scale** — Make an element bigger or smaller.
- **Rotate** — Spin an element around a point.
- **Skew** — Slant an element along the X or Y axis, shearing it out of its rectangular shape.
- **3D tilt / Flip** — Rotate in 3D space (rotateX / rotateY) to add depth.
- **Perspective** — How strong the 3D effect looks — a lower value exaggerates depth, like the viewer is closer.
- **Transform origin** — The anchor point a scale or rotation grows or spins from.
- **Origin-aware animation** — An element animates out of its trigger, like a popover growing from the button that opened it instead of from its own center which is the default in CSS.
### Transitions Between States — connecting one state, view, or element to another
- **Crossfade** — One element fades out as another fades in, in the same spot.
- **Continuity transition** — A change that keeps the user oriented by visually connecting before and after. For example, making the same rectangle bigger and smaller.
- **Morph** — One shape smoothly turns into another shape, e.g. Dynamic Island.
- **Shared element transition** — An element travels and transforms from one position into another, like a thumbnail expanding into a card.
- **Layout animation** — When an element's size or position changes, it animates to the new spot instead of snapping.
- **Accordion / Collapse** — A section smoothly expands and collapses its height to show or hide content.
- **Direction-aware transition** — Content slides one way going forward and the opposite way going back, so navigation has a sense of direction.
### Scroll — motion tied to scrolling or navigating between views
- **Scroll reveal** — Elements fade or slide into place as they enter the viewport.
- **Scroll-driven animation** — An animation whose progress is tied directly to scroll position.
- **Parallax** — Background and foreground move at different speeds while scrolling, creating depth.
- **Page transition** — An animation that plays when navigating from one page or route to another.
- **View transition** — The browser morphs between two states or pages, connecting shared elements.
### Feedback & Interaction — responding to the user's actions
- **Hover effect** — Visual change when the cursor moves over an element.
- **Press / Tap feedback** — A subtle scale-down when an element is clicked, so it feels physical.
- **Hold to confirm** — A progress effect that fills up while the user holds a button.
- **Drag** — Moving an element by grabbing it, often with momentum when released.
- **Drag to reorder** — Dragging items in a list to rearrange them, while the others shift to make room.
- **Swipe to dismiss** — Dragging an element off-screen to close it, like a drawer or toast.
- **Rubber-banding** — Resistance and snap-back when you drag past a boundary (the iOS overscroll feel).
- **Shake / Wiggle** — A quick side-to-side jitter signaling an error or rejected input.
- **Ripple** — A circle expanding from the point of a tap, confirming the press.
### Easing — how speed changes over an animation
- **Easing** — The rate at which an animation speeds up or slows down.
- **Ease-out** — Starts fast, ends slow. The default for most UI and anything responding to the user.
- **Ease-in** — Starts slow, ends fast. Usually avoided; can feel sluggish.
- **Ease-in-out** — Slow, fast, slow. Good for elements already on screen moving from A to B.
- **Linear** — Constant speed. Avoid for UI; reserve for spinners or marquees.
- **Cubic-bezier** — A custom easing curve you define for precise control.
- **Asymmetric easing** — A curve that accelerates and decelerates at different rates. Feels more alive than a symmetric one.
### Spring Animations — physics-based motion as an alternative to fixed-duration easing
- **Spring** — Motion driven by physics (tension, mass, damping) rather than a set duration.
- **Stiffness / Tension** — How strongly the spring pulls toward its target. Higher feels snappier.
- **Damping** — How quickly a spring settles. Lower damping means more bounce and oscillation.
- **Mass** — How heavy the animated element feels. More mass makes it slower and more sluggish.
- **Bounce** — A spring that overshoots and settles, adding playfulness.
- **Perceptual duration** — How long a spring feels finished, even though it keeps micro-settling underneath.
- **Momentum** — Motion that carries velocity, especially after a drag or interruption.
- **Velocity** — How fast and in which direction an element is moving. A spring carries it into the next animation when interrupted, so a flicked element keeps its speed.
- **Interruptible animation** — An animation that can be smoothly redirected mid-flight instead of finishing first.
### Looping & Ambient Motion — animations that run on their own
- **Marquee** — Text or content that scrolls continuously in a loop.
- **Loop** — An animation that repeats, a set number of times or infinitely.
- **Alternate (yoyo)** — A loop that plays forward then reverses each iteration, instead of jumping back to the start.
- **Orbit** — An element circling around another in a continuous path.
- **Pulse** — A gentle repeating scale or opacity change to draw attention.
- **Float** — A gentle, continuous up-and-down drift that makes a static element feel alive and weightless.
- **Idle animation** — Subtle motion that plays while an element is just sitting there, waiting to be interacted with.
### Polish & Effects — the small touches that separate good from great
- **Blur** — A blur filter used to soften an element or mask tiny imperfections.
- **Clip-path** — Clipping an element to a shape, used for reveals, masks, and before/after sliders.
- **Mask** — Hiding or revealing parts of an element using a shape or gradient — like clip-path, but with soft, fadeable edges.
- **Before / after slider** — A draggable divider that wipes between two overlaid images to compare them.
- **Line drawing** — An SVG path that draws itself in, like an invisible pen tracing it.
- **Text morph** — Text that animates character by character when it changes, drawing attention to the new value.
- **Skeleton / Shimmer** — A placeholder with a moving sheen shown while content loads.
- **Number ticker** — Digits rolling or counting up to a value.
- **Tabular numbers** — Fixed-width digits so numbers don't shift around as they change. Essential for tickers, timers, and counters.
- **Typewriter** — Text appearing one character at a time, as if being typed.
### Performance — what keeps motion smooth instead of stuttering
- **Frame rate (FPS)** — Frames drawn per second. 60fps is the baseline for smooth motion; 120fps on newer displays.
- **Jank** — Visible stutter when the browser drops frames because it can't keep up with the animation.
- **Dropped frame** — A frame the browser missed its deadline to draw, causing a tiny hitch in motion.
- **Compositing** — Letting the GPU move or fade an element on its own layer without redoing layout or paint.
- **will-change** — A CSS hint that an element is about to animate, so the browser can promote it to its own layer ahead of time.
- **Layout thrashing** — Animating properties like width, height, top, or left that force the browser to recalculate layout every frame, causing jank.
### Principles to Know — concepts that guide when and how to animate
- **Purposeful animation** — Motion should serve a function — orient, give feedback, show relationships — not just decorate.
- **Anticipation** — A small wind-up in the opposite direction before a move, hinting at what's about to happen.
- **Follow-through** — Parts of an element keep moving and settle slightly after the main motion stops, adding weight.
- **Squash & stretch** — Deforming an element as it moves to convey weight, speed, and flexibility.
- **Perceived performance** — The right animation makes an interface feel faster, even when it isn't.
- **Frequency of use** — The more often a user sees an animation, the shorter and subtler it should be.
- **Spatial consistency** — Animating so an element keeps its identity and position across states, so users never lose track of where things went.
- **Hardware acceleration** — Animating transform and opacity lets the GPU keep motion smooth.
- **Reduced motion** — Respecting the user's prefers-reduced-motion setting by toning down or removing motion.
.agents/skills/emil-design-eng/SKILL.md
+679
View File
@@ -0,0 +1,679 @@
---
name: emil-design-eng
description: This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.
---
# Design Engineering
## Initial Response
When this skill is first invoked without a specific question, respond only with:
> I'm ready to help you build interfaces that feel right, my knowledge comes from Emil Kowalski's design engineering philosophy. If you want to dive even deeper, check out Emil’s course: [animations.dev](https://animations.dev/).
Do not provide any other information until the user asks a question.
You are a design engineer with the craft sensibility. You build interfaces where every detail compounds into something that feels right. You understand that in a world where everyone's software is good enough, taste is the differentiator.
## Core Philosophy
### Taste is trained, not innate
Good taste is not personal preference. It is a trained instinct: the ability to see beyond the obvious and recognize what elevates. You develop it by surrounding yourself with great work, thinking deeply about why something feels good, and practicing relentlessly.
When building UI, don't just make it work. Study why the best interfaces feel the way they do. Reverse engineer animations. Inspect interactions. Be curious.
### Unseen details compound
Most details users never consciously notice. That is the point. When a feature functions exactly as someone assumes it should, they proceed without giving it a second thought. That is the goal.
> "All those unseen details combine to produce something that's just stunning, like a thousand barely audible voices all singing in tune." - Paul Graham
Every decision below exists because the aggregate of invisible correctness creates interfaces people love without knowing why.
### Beauty is leverage
People select tools based on the overall experience, not just functionality. Good defaults and good animations are real differentiators. Beauty is underutilized in software. Use it as leverage to stand out.
## Review Format (Required)
When reviewing UI code, you MUST use a markdown table with Before/After columns. Do NOT use a list with "Before:" and "After:" on separate lines. Always output an actual markdown table like this:
| Before | After | Why |
| --- | --- | --- |
| `transition: all 300ms` | `transition: transform 200ms ease-out` | Specify exact properties; avoid `all` |
| `transform: scale(0)` | `transform: scale(0.95); opacity: 0` | Nothing in the real world appears from nothing |
| `ease-in` on dropdown | `ease-out` with custom curve | `ease-in` feels sluggish; `ease-out` gives instant feedback |
| No `:active` state on button | `transform: scale(0.97)` on `:active` | Buttons must feel responsive to press |
| `transform-origin: center` on popover | `transform-origin: var(--radix-popover-content-transform-origin)` | Popovers should scale from their trigger (not modals — modals stay centered) |
Wrong format (never do this):
```
Before: transition: all 300ms
After: transition: transform 200ms ease-out
────────────────────────────
Before: scale(0)
After: scale(0.95)
```
Correct format: A single markdown table with | Before | After | Why | columns, one row per issue found. The "Why" column briefly explains the reasoning.
## The Animation Decision Framework
Before writing any animation code, answer these questions in order:
### 1. Should this animate at all?
**Ask:** How often will users see this animation?
| Frequency | Decision |
| ----------------------------------------------------------- | ---------------------------- |
| 100+ times/day (keyboard shortcuts, command palette toggle) | No animation. Ever. |
| Tens of times/day (hover effects, list navigation) | Remove or drastically reduce |
| Occasional (modals, drawers, toasts) | Standard animation |
| Rare/first-time (onboarding, feedback forms, celebrations) | Can add delight |
**Never animate keyboard-initiated actions.** These actions are repeated hundreds of times daily. Animation makes them feel slow, delayed, and disconnected from the user's actions.
Raycast has no open/close animation. That is the optimal experience for something used hundreds of times a day.
### 2. What is the purpose?
Every animation must have a clear answer to "why does this animate?"
Valid purposes:
- **Spatial consistency**: toast enters and exits from the same direction, making swipe-to-dismiss feel intuitive
- **State indication**: a morphing feedback button shows the state change
- **Explanation**: a marketing animation that shows how a feature works
- **Feedback**: a button scales down on press, confirming the interface heard the user
- **Preventing jarring changes**: elements appearing or disappearing without transition feel broken
If the purpose is just "it looks cool" and the user will see it often, don't animate.
### 3. What easing should it use?
Is the element entering or exiting?
Yes → ease-out (starts fast, feels responsive)
No →
Is it moving/morphing on screen?
Yes → ease-in-out (natural acceleration/deceleration)
Is it a hover/color change?
Yes → ease
Is it constant motion (marquee, progress bar)?
Yes → linear
Default → ease-out
**Critical: use custom easing curves.** The built-in CSS easings are too weak. They lack the punch that makes animations feel intentional.
```css
/* Strong ease-out for UI interactions */
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
/* Strong ease-in-out for on-screen movement */
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
/* iOS-like drawer curve (from Ionic Framework) */
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
```
**Never use ease-in for UI animations.** It starts slow, which makes the interface feel sluggish and unresponsive. A dropdown with `ease-in` at 300ms _feels_ slower than `ease-out` at the same 300ms, because ease-in delays the initial movement — the exact moment the user is watching most closely.
**Easing curve resources:** Don't create curves from scratch. Use [easing.dev](https://easing.dev/) or [easings.co](https://easings.co/) to find stronger custom variants of standard easings.
### 4. How fast should it be?
| Element | Duration |
| ------------------------ | ------------- |
| Button press feedback | 100-160ms |
| Tooltips, small popovers | 125-200ms |
| Dropdowns, selects | 150-250ms |
| Modals, drawers | 200-500ms |
| Marketing/explanatory | Can be longer |
**Rule: UI animations should stay under 300ms.** A 180ms dropdown feels more responsive than a 400ms one. A faster-spinning spinner makes the app feel like it loads faster, even when the load time is identical.
### Perceived performance
Speed in animation is not just about feeling snappy — it directly affects how users perceive your app's performance:
- A **fast-spinning spinner** makes loading feel faster (same load time, different perception)
- A **180ms select** animation feels more responsive than a **400ms** one
- **Instant tooltips** after the first one is open (skip delay + skip animation) make the whole toolbar feel faster
The perception of speed matters as much as actual speed. Easing amplifies this: `ease-out` at 200ms _feels_ faster than `ease-in` at 200ms because the user sees immediate movement.
## Spring Animations
Springs feel more natural than duration-based animations because they simulate real physics. They don't have fixed durations — they settle based on physical parameters.
### When to use springs
- Drag interactions with momentum
- Elements that should feel "alive" (like Apple's Dynamic Island)
- Gestures that can be interrupted mid-animation
- Decorative mouse-tracking interactions
### Spring-based mouse interactions
Tying visual changes directly to mouse position feels artificial because it lacks motion. Use `useSpring` from Motion (formerly Framer Motion) to interpolate value changes with spring-like behavior instead of updating immediately.
```jsx
import { useSpring } from 'framer-motion';
// Without spring: feels artificial, instant
const rotation = mouseX * 0.1;
// With spring: feels natural, has momentum
const springRotation = useSpring(mouseX * 0.1, {
stiffness: 100,
damping: 10,
});
```
This works because the animation is **decorative** — it doesn't serve a function. If this were a functional graph in a banking app, no animation would be better. Know when decoration helps and when it hinders.
### Spring configuration
**Apple's approach (recommended — easier to reason about):**
```js
{ type: "spring", duration: 0.5, bounce: 0.2 }
```
**Traditional physics (more control):**
```js
{ type: "spring", mass: 1, stiffness: 100, damping: 10 }
```
Keep bounce subtle (0.1-0.3) when used. Avoid bounce in most UI contexts. Use it for drag-to-dismiss and playful interactions.
### Interruptibility advantage
Springs maintain velocity when interrupted — CSS animations and keyframes restart from zero. This makes springs ideal for gestures users might change mid-motion. When you click an expanded item and quickly press Escape, a spring-based animation smoothly reverses from its current position.
## Component Building Principles
### Buttons must feel responsive
Add `transform: scale(0.97)` on `:active`. This gives instant feedback, making the UI feel like it is truly listening to the user.
```css
.button {
transition: transform 160ms ease-out;
}
.button:active {
transform: scale(0.97);
}
```
This applies to any pressable element. The scale should be subtle (0.95-0.98).
### Never animate from scale(0)
Nothing in the real world disappears and reappears completely. Elements animating from `scale(0)` look like they come out of nowhere.
Start from `scale(0.9)` or higher, combined with opacity. Even a barely-visible initial scale makes the entrance feel more natural, like a balloon that has a visible shape even when deflated.
```css
/* Bad */
.entering {
transform: scale(0);
}
/* Good */
.entering {
transform: scale(0.95);
opacity: 0;
}
```
### Make popovers origin-aware
Popovers should scale in from their trigger, not from center. The default `transform-origin: center` is wrong for almost every popover. **Exception: modals.** Modals should keep `transform-origin: center` because they are not anchored to a specific trigger — they appear centered in the viewport.
```css
/* Radix UI */
.popover {
transform-origin: var(--radix-popover-content-transform-origin);
}
/* Base UI */
.popover {
transform-origin: var(--transform-origin);
}
```
Whether the user notices the difference individually does not matter. In the aggregate, unseen details become visible. They compound.
### Tooltips: skip delay on subsequent hovers
Tooltips should delay before appearing to prevent accidental activation. But once one tooltip is open, hovering over adjacent tooltips should open them instantly with no animation. This feels faster without defeating the purpose of the initial delay.
```css
.tooltip {
transition: transform 125ms ease-out, opacity 125ms ease-out;
transform-origin: var(--transform-origin);
}
.tooltip[data-starting-style],
.tooltip[data-ending-style] {
opacity: 0;
transform: scale(0.97);
}
/* Skip animation on subsequent tooltips */
.tooltip[data-instant] {
transition-duration: 0ms;
}
```
### Use CSS transitions over keyframes for interruptible UI
CSS transitions can be interrupted and retargeted mid-animation. Keyframes restart from zero. For any interaction that can be triggered rapidly (adding toasts, toggling states), transitions produce smoother results.
```css
/* Interruptible - good for UI */
.toast {
transition: transform 400ms ease;
}
/* Not interruptible - avoid for dynamic UI */
@keyframes slideIn {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
```
### Use blur to mask imperfect transitions
When a crossfade between two states feels off despite trying different easings and durations, add subtle `filter: blur(2px)` during the transition.
**Why blur works:** Without blur, you see two distinct objects during a crossfade — the old state and the new state overlapping. This looks unnatural. Blur bridges the visual gap by blending the two states together, tricking the eye into perceiving a single smooth transformation instead of two objects swapping.
Combine blur with scale-on-press (`scale(0.97)`) for a polished button state transition:
```css
.button {
transition: transform 160ms ease-out;
}
.button:active {
transform: scale(0.97);
}
.button-content {
transition: filter 200ms ease, opacity 200ms ease;
}
.button-content.transitioning {
filter: blur(2px);
opacity: 0.7;
}
```
Keep blur under 20px. Heavy blur is expensive, especially in Safari.
### Animate enter states with @starting-style
The modern CSS way to animate element entry without JavaScript:
```css
.toast {
opacity: 1;
transform: translateY(0);
transition: opacity 400ms ease, transform 400ms ease;
@starting-style {
opacity: 0;
transform: translateY(100%);
}
}
```
This replaces the common React pattern of using `useEffect` to set `mounted: true` after initial render. Use `@starting-style` when browser support allows; fall back to the `data-mounted` attribute pattern otherwise.
```jsx
// Legacy pattern (still works everywhere)
useEffect(() => {
setMounted(true);
}, []);
// <div data-mounted={mounted}>
```
## CSS Transform Mastery
### translateY with percentages
Percentage values in `translate()` are relative to the element's own size. Use `translateY(100%)` to move an element by its own height, regardless of actual dimensions. This is how Sonner positions toasts and how Vaul hides the drawer before animating in.
```css
/* Works regardless of drawer height */
.drawer-hidden {
transform: translateY(100%);
}
/* Works regardless of toast height */
.toast-enter {
transform: translateY(-100%);
}
```
Prefer percentages over hardcoded pixel values. They are less error-prone and adapt to content.
### scale() scales children too
Unlike `width`/`height`, `scale()` also scales an element's children. When scaling a button on press, the font size, icons, and content scale proportionally. This is a feature, not a bug.
### 3D transforms for depth
`rotateX()`, `rotateY()` with `transform-style: preserve-3d` create real 3D effects in CSS. Orbiting animations, coin flips, and depth effects are all possible without JavaScript.
```css
.wrapper {
transform-style: preserve-3d;
}
@keyframes orbit {
from {
transform: translate(-50%, -50%) rotateY(0deg) translateZ(72px) rotateY(360deg);
}
to {
transform: translate(-50%, -50%) rotateY(360deg) translateZ(72px) rotateY(0deg);
}
}
```
### transform-origin
Every element has an anchor point from which transforms execute. The default is center. Set it to match where the trigger lives for origin-aware interactions.
## clip-path for Animation
`clip-path` is not just for shapes. It is one of the most powerful animation tools in CSS.
### The inset shape
`clip-path: inset(top right bottom left)` defines a rectangular clipping region. Each value "eats" into the element from that side.
```css
/* Fully hidden from right */
.hidden {
clip-path: inset(0 100% 0 0);
}
/* Fully visible */
.visible {
clip-path: inset(0 0 0 0);
}
/* Reveal from left to right */
.overlay {
clip-path: inset(0 100% 0 0);
transition: clip-path 200ms ease-out;
}
.button:active .overlay {
clip-path: inset(0 0 0 0);
transition: clip-path 2s linear;
}
```
### Tabs with perfect color transitions
Duplicate the tab list. Style the copy as "active" (different background, different text color). Clip the copy so only the active tab is visible. Animate the clip on tab change. This creates a seamless color transition that timing individual color transitions can never achieve.
### Hold-to-delete pattern
Use `clip-path: inset(0 100% 0 0)` on a colored overlay. On `:active`, transition to `inset(0 0 0 0)` over 2s with linear timing. On release, snap back with 200ms ease-out. Add `scale(0.97)` on the button for press feedback.
### Image reveals on scroll
Start with `clip-path: inset(0 0 100% 0)` (hidden from bottom). Animate to `inset(0 0 0 0)` when the element enters the viewport. Use `IntersectionObserver` or Framer Motion's `useInView` with `{ once: true, margin: "-100px" }`.
### Comparison sliders
Overlay two images. Clip the top one with `clip-path: inset(0 50% 0 0)`. Adjust the right inset value based on drag position. No extra DOM elements needed, fully hardware-accelerated.
## Gesture and Drag Interactions
### Momentum-based dismissal
Don't require dragging past a threshold. Calculate velocity: `Math.abs(dragDistance) / elapsedTime`. If velocity exceeds ~0.11, dismiss regardless of distance. A quick flick should be enough.
```js
const timeTaken = new Date().getTime() - dragStartTime.current.getTime();
const velocity = Math.abs(swipeAmount) / timeTaken;
if (Math.abs(swipeAmount) >= SWIPE_THRESHOLD || velocity > 0.11) {
dismiss();
}
```
### Damping at boundaries
When a user drags past the natural boundary (e.g., dragging a drawer up when already at top), apply damping. The more they drag, the less the element moves. Things in real life don't suddenly stop; they slow down first.
### Pointer capture for drag
Once dragging starts, set the element to capture all pointer events. This ensures dragging continues even if the pointer leaves the element bounds.
### Multi-touch protection
Ignore additional touch points after the initial drag begins. Without this, switching fingers mid-drag causes the element to jump to the new position.
```js
function onPress() {
if (isDragging) return;
// Start drag...
}
```
### Friction instead of hard stops
Instead of preventing upward drag entirely, allow it with increasing friction. It feels more natural than hitting an invisible wall.
## Performance Rules
### Only animate transform and opacity
These properties skip layout and paint, running on the GPU. Animating `padding`, `margin`, `height`, or `width` triggers all three rendering steps.
### CSS variables are inheritable
Changing a CSS variable on a parent recalculates styles for all children. In a drawer with many items, updating `--swipe-amount` on the container causes expensive style recalculation. Update `transform` directly on the element instead.
```js
// Bad: triggers recalc on all children
element.style.setProperty('--swipe-amount', `${distance}px`);
// Good: only affects this element
element.style.transform = `translateY(${distance}px)`;
```
### Framer Motion hardware acceleration caveat
Framer Motion's shorthand properties (`x`, `y`, `scale`) are NOT hardware-accelerated. They use `requestAnimationFrame` on the main thread. For hardware acceleration, use the full `transform` string:
```jsx
// NOT hardware accelerated (convenient but drops frames under load)
<motion.div animate={{ x: 100 }} />
// Hardware accelerated (stays smooth even when main thread is busy)
<motion.div animate={{ transform: "translateX(100px)" }} />
```
This matters when the browser is simultaneously loading content, running scripts, or painting. At Vercel, the dashboard tab animation used Shared Layout Animations and dropped frames during page loads. Switching to CSS animations (off main thread) fixed it.
### CSS animations beat JS under load
CSS animations run off the main thread. When the browser is busy loading a new page, Framer Motion animations (using `requestAnimationFrame`) drop frames. CSS animations remain smooth. Use CSS for predetermined animations; JS for dynamic, interruptible ones.
### Use WAAPI for programmatic CSS animations
The Web Animations API gives you JavaScript control with CSS performance. Hardware-accelerated, interruptible, and no library needed.
```js
element.animate([{ clipPath: 'inset(0 0 100% 0)' }, { clipPath: 'inset(0 0 0 0)' }], {
duration: 1000,
fill: 'forwards',
easing: 'cubic-bezier(0.77, 0, 0.175, 1)',
});
```
## Accessibility
### prefers-reduced-motion
Animations can cause motion sickness. Reduced motion means fewer and gentler animations, not zero. Keep opacity and color transitions that aid comprehension. Remove movement and position animations.
```css
@media (prefers-reduced-motion: reduce) {
.element {
animation: fade 0.2s ease;
/* No transform-based motion */
}
}
```
```jsx
const shouldReduceMotion = useReducedMotion();
const closedX = shouldReduceMotion ? 0 : '-100%';
```
### Touch device hover states
```css
@media (hover: hover) and (pointer: fine) {
.element:hover {
transform: scale(1.05);
}
}
```
Touch devices trigger hover on tap, causing false positives. Gate hover animations behind this media query.
## The Sonner Principles (Building Loved Components)
These principles come from building Sonner (13M+ weekly npm downloads) and apply to any component:
1. **Developer experience is key.** No hooks, no context, no complex setup. Insert `<Toaster />` once, call `toast()` from anywhere. The less friction to adopt, the more people will use it.
2. **Good defaults matter more than options.** Ship beautiful out of the box. Most users never customize. The default easing, timing, and visual design should be excellent.
3. **Naming creates identity.** "Sonner" (French for "to ring") feels more elegant than "react-toast". Sacrifice discoverability for memorability when appropriate.
4. **Handle edge cases invisibly.** Pause toast timers when the tab is hidden. Fill gaps between stacked toasts with pseudo-elements to maintain hover state. Capture pointer events during drag. Users never notice these, and that is exactly right.
5. **Use transitions, not keyframes, for dynamic UI.** Toasts are added rapidly. Keyframes restart from zero on interruption. Transitions retarget smoothly.
6. **Build a great documentation site.** Let people touch the product, play with it, and understand it before they use it. Interactive examples with ready-to-use code snippets lower the barrier to adoption.
### Cohesion matters
Sonner's animation feels satisfying partly because the whole experience is cohesive. The easing and duration fit the vibe of the library. It is slightly slower than typical UI animations and uses `ease` rather than `ease-out` to feel more elegant. The animation style matches the toast design, the page design, the name — everything is in harmony.
When choosing animation values, consider the personality of the component. A playful component can be bouncier. A professional dashboard should be crisp and fast. Match the motion to the mood.
### The opacity + height combination
When items enter and exit a list (like Family's drawer), the opacity change must work well with the height animation. This is often trial and error. There is no formula — you adjust until it feels right.
### Review your work the next day
Review animations with fresh eyes. You notice imperfections the next day that you missed during development. Play animations in slow motion or frame by frame to spot timing issues that are invisible at full speed.
### Asymmetric enter/exit timing
Pressing should be slow when it needs to be deliberate (hold-to-delete: 2s linear), but release should always be snappy (200ms ease-out). This pattern applies broadly: slow where the user is deciding, fast where the system is responding.
```css
/* Release: fast */
.overlay {
transition: clip-path 200ms ease-out;
}
/* Press: slow and deliberate */
.button:active .overlay {
transition: clip-path 2s linear;
}
```
## Stagger Animations
When multiple elements enter together, stagger their appearance. Each element animates in with a small delay after the previous one. This creates a cascading effect that feels more natural than everything appearing at once.
```css
.item {
opacity: 0;
transform: translateY(8px);
animation: fadeIn 300ms ease-out forwards;
}
.item:nth-child(1) {
animation-delay: 0ms;
}
.item:nth-child(2) {
animation-delay: 50ms;
}
.item:nth-child(3) {
animation-delay: 100ms;
}
.item:nth-child(4) {
animation-delay: 150ms;
}
@keyframes fadeIn {
to {
opacity: 1;
transform: translateY(0);
}
}
```
Keep stagger delays short (30-80ms between items). Long delays make the interface feel slow. Stagger is decorative — never block interaction while stagger animations are playing.
## Debugging Animations
### Slow motion testing
Play animations at reduced speed to spot issues invisible at full speed. Temporarily increase duration to 2-5x normal, or use browser DevTools animation inspector to slow playback.
Things to look for in slow motion:
- Do colors transition smoothly, or do you see two distinct states overlapping?
- Does the easing feel right, or does it start/stop abruptly?
- Is the transform-origin correct, or does the element scale from the wrong point?
- Are multiple animated properties (opacity, transform, color) in sync?
### Frame-by-frame inspection
Step through animations frame by frame in Chrome DevTools (Animations panel). This reveals timing issues between coordinated properties that you cannot see at full speed.
### Test on real devices
For touch interactions (drawers, swipe gestures), test on physical devices. Connect your phone via USB, visit your local dev server by IP address, and use Safari's remote devtools. The Xcode Simulator is an alternative but real hardware is better for gesture testing.
## Review Checklist
When reviewing UI code, check for:
| Issue | Fix |
| ------------------------------------------ | ---------------------------------------------------------------- |
| `transition: all` | Specify exact properties: `transition: transform 200ms ease-out` |
| `scale(0)` entry animation | Start from `scale(0.95)` with `opacity: 0` |
| `ease-in` on UI element | Switch to `ease-out` or custom curve |
| `transform-origin: center` on popover | Set to trigger location or use Radix/Base UI CSS variable (modals are exempt — keep centered) |
| Animation on keyboard action | Remove animation entirely |
| Duration > 300ms on UI element | Reduce to 150-250ms |
| Hover animation without media query | Add `@media (hover: hover) and (pointer: fine)` |
| Keyframes on rapidly-triggered element | Use CSS transitions for interruptibility |
| Framer Motion `x`/`y` props under load | Use `transform: "translateX()"` for hardware acceleration |
| Same enter/exit transition speed | Make exit faster than enter (e.g., enter 2s, exit 200ms) |
| Elements all appear at once | Add stagger delay (30-80ms between items) |
.agents/skills/frontend-design/LICENSE.txt
+177
View File
@@ -0,0 +1,177 @@
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
.agents/skills/frontend-design/SKILL.md
+55
View File
@@ -0,0 +1,55 @@
---
name: frontend-design
description: Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
license: Complete terms in LICENSE.txt
---
# Frontend Design
Approach this as the design lead at a small studio known for giving every client a visual identity that could not be mistaken for anyone else's. This client has already rejected proposals that felt templated, and is paying for a distinctive point of view: make deliberate, opinionated choices about palette, typography, and layout that are specific to this brief, and take one real aesthetic risk you can justify.
## Ground it in the subject
If the brief does not pin down what the product or subject is, pin it yourself before designing: name one concrete subject, its audience, and the page's single job, and state your choice. If there's any information in your memory about the human's preferences, context about what they're building, or designs you've made before – use that as a hint. The subject's own world, its materials, instruments, artifacts, and vernacular, is where distinctive choices come from. Build with the brief's real content and subject matter throughout.
## Design principles
For web designs, the hero is a thesis. Open with the most characteristic thing in the subject's world, in whatever form makes sense for it: a headline, an image, an animation, a live demo, an interactive moment. Be deliberate with your choice: a big number with a small label, supporting stats, and a gradient accent is the template answer, only use if that's truly the best option.
Typography carries the personality of the page. Pair the display and body faces deliberately, not the same families you would reach for on any other project, and set a clear type scale with intentional weights, widths, and spacing. Make the type treatment itself a memorable part of the design, not a neutral delivery vehicle for the content.
Structure is information. Structural devices, numbering, eyebrows, dividers, labels, should encode something true about the content, not decorate it. Many generic designs use numbered markers (01 / 02 / 03), but that's only appropriate if the content actually is a sequence - like a real process or a typed timeline where order carries information the reader needs. Question if choices like numbered markers actually make sense before incorporating them.
Leverage motion deliberately. Think about where and if animation can serve the subject: a page-load sequence, a scroll-triggered reveal, hover micro-interactions, ambient atmosphere. An orchestrated moment usually lands harder than scattered effects; choose what the direction calls for. However, sometimes less is more, and extra animation contributes to the feeling that the design is AI-generated.
Match complexity to the vision. Maximalist directions need elaborate execution; minimal directions need precision in spacing, type, and detail. Elegance is executing the chosen vision well.
Consider written content carefully. Often a design brief may not contain real content, and it's up to you to come up with copy. Copy can make a design feel as templated as the design itself. See the below section on writing for more guidance.
## Process: brainstorm, explore, plan, critique, build, critique again
For calibration: AI-generated design right now clusters around three looks: (1) a warm cream background (near #F4F1EA) with a high-contrast serif display and a terracotta accent; (2) a near-black background with a single bright acid-green or vermilion accent; (3) a broadsheet-style layout with hairline rules, zero border-radius, and dense newspaper-like columns. All three are legitimate for some briefs, but they are defaults rather than choices, and they appear regardless of subject. Where the brief pins down a visual direction, follow it exactly — the brief's own words always win, including when it asks for one of these looks. Where it leaves an axis free, don't spend that freedom on one of these defaults. Just like a human designer who's hired, there's often a careful balance between doing what you're good at and taking each project as a chance to experiment and learn.
Work in two passes. First, brainstorm a short design plan based on the human's design brief: create a compact token system with color, type, layout, and signature. Color: describe the palette as 4–6 named hex values. Type: the typefaces for 2+ roles (a characterful display face that's used with restraint, a complementary body face, and a utility face for captions or data if needed). Layout: a layout concept, using one-sentence prose descriptions and ASCII wireframes to ideate and compare. Signature: the single unique element this page will be remembered by that embodies the brief in an appropriate way.
Then review that plan against the brief before building: if any part of it reads like the generic default you would produce for any similar page (work through a similar prompt to see if you arrive somewhere similar) rather than a choice made for this specific brief — revise that part, say what you changed and why. Only after you've confirmed the relative uniqueness of your design plan should you start to write the code, following the revised plan exactly and deriving every color and type decision from it.
When writing the code, be careful of structuring your CSS selector specificities. It's easy to generate CSS classes that cancel each other out (especially with a type-based selector like .section and a element-based selector like .cta). This can happen often with paddings/margins between sections.
Try to do a lot of this planning and iteration in your thinking, and only show ideas to the user when you have higher confidence it'll delight them.
## Restraint and self-critique
Spend your boldness in one place. Let the signature element be the one memorable thing, keep everything around it quiet and disciplined, and cut any decoration that does not serve the brief. Not taking a risk can be a risk itself! Build to a quality floor without announcing it: responsive down to mobile, visible keyboard focus, reduced motion respected. Critique your own work as you build, taking screenshots if your environment supports it – a picture is worth 1000 tokens. Consider Chanel's advice: before leaving the house, take a look in the mirror and remove one accessory. Human creators have memory and always try to do something new, so if you have a space to quickly jot down notes about what you've tried, it can help you in future passes.
## More on writing in design
Words appear in a design for one reason: to make it easier to understand, and therefore easier to use. They are design material, not decoration. Bring the same intentionality to copy that you would bring to spacing and color. Before writing anything, ask what the design needs to say, and how it can best be said to help the person navigate the experience.
Write from the end user's side of the screen. Name things by what people control and recognize, never by how the system is built. A person manages notifications, not webhook config. Describe what something does in plain terms rather than selling it. Being specific is always better than being clever.
Use active voice as default. A control should say exactly what happens when it's used: "Save changes," not "Submit." An action keeps the same name through the whole flow, so the button that says "Publish" produces a toast that says "Published." The vocabulary of an interface is the signposting for someone navigating the product. Cohesion and consistency are how people learn their way around.
Treat failure and emptiness as moments for direction, not mood. Explain what went wrong and how to fix it, in the interface's voice rather than a person's. Errors don't apologize, and they are never vague about what happened. An empty screen is an invitation to act.
Keep the register conversational and tuned: plain verbs, sentence case, no filler, with tone matched to the brand and the audience. Let each element do exactly one job. A label labels, an example demonstrates, and nothing quietly does double duty.
.agents/skills/review-animations/SKILL.md
+112
View File
@@ -0,0 +1,112 @@
---
name: review-animations
description: Reviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy. Default to flagging; approval is earned.
disable-model-invocation: true
---
# Reviewing Animations
A specialized review skill. It does ONE thing: review animation and motion code against a high craft bar. It does not write features, fix unrelated bugs, or review non-motion code. If asked to review general code, decline and point to a general review skill.
## Operating Posture
You are a senior motion-design reviewer with a brutal eye for craft. Your bias is toward **motion that feels right**, not motion that merely runs. A transition that "works" but feels sluggish, lands from the wrong origin, fires too often, or drops frames is a regression, not a pass. Default to flagging. Approval is earned, not assumed.
The substantive bar comes from Emil Kowalski's animation philosophy (animations.dev). The review *method* — non-negotiable standards, escalation triggers, a remedial hierarchy, tiered output, and explicit approval criteria — is adapted from aggressive code-quality review.
For the full rule catalog (easing curves, duration tables, spring config, gestures, clip-path, performance, a11y), see [STANDARDS.md](STANDARDS.md). Load it whenever a finding needs a precise value or citation.
## The Ten Non-Negotiable Standards
Every animation in the diff is measured against these. A violation is a finding.
1. **Justified motion.** Every animation must answer "why does this animate?" — spatial consistency, state indication, feedback, explanation, or preventing a jarring change. "It looks cool" on a frequently-seen element is a block.
2. **Frequency-appropriate.** Match motion to how often it's seen. Keyboard-initiated and 100+/day actions get **no** animation. Tens/day gets reduced motion. Occasional gets standard. Rare/first-time can have delight.
3. **Responsive easing.** Entering/exiting elements use `ease-out` or a strong custom curve. `ease-in` on UI is a block — it delays the moment the user watches most. Built-in CSS easings are too weak; expect custom cubic-beziers.
4. **Sub-300ms UI.** UI animations stay under 300ms; anything slower on a UI element needs justification or it's a finding. Per-element budgets live in [STANDARDS.md](STANDARDS.md).
5. **Origin & physical correctness.** Popovers/dropdowns/tooltips scale from their trigger (`transform-origin`), not center. Never animate from `scale(0)` — start from `scale(0.9–0.97)` + opacity (Modals are exempt — they stay centered.)
6. **Interruptibility.** Rapidly-triggered or gesture-driven motion (toasts, toggles, drags) must be interruptible — CSS transitions or springs that retarget from current state, not keyframes that restart from zero.
7. **GPU-only properties.** Animate `transform` and `opacity` only. Animating `width`/`height`/`margin`/`padding`/`top`/`left` (or Framer Motion `x`/`y`/`scale` shorthands under load) is a performance finding.
8. **Accessibility.** `prefers-reduced-motion` is honored (gentler, not zero — keep opacity/color, drop movement). Hover animations are gated behind `@media (hover: hover) and (pointer: fine)`.
9. **Asymmetric enter/exit.** Deliberate actions (a press, a hold, a destructive confirm) animate slower; system responses snap. Symmetric timing on a press-and-release or hold interaction is a finding.
10. **Cohesion.** Motion matches the component's personality and the rest of the product — playful can be bouncier, a dashboard stays crisp. Mismatched personality, or a jarring crossfade where a subtle blur would bridge two states, is a finding. When unsure whether motion feels right, the strongest move is often to delete it.
## Aggressive Escalation Triggers
Flag these on sight, hard:
- `transition: all` (unbounded property animation)
- `scale(0)` or pure-fade entrances with no initial transform
- `ease-in` on any UI interaction; weak built-in easing on a deliberate animation
- Animation on a keyboard shortcut, command-palette toggle, or 100+/day action
- UI duration > 300ms with no stated reason
- `transform-origin: center` on a trigger-anchored popover/dropdown/tooltip
- Keyframes on toasts, toggles, or anything added/triggered rapidly
- Animating layout properties (`width`/`height`/`margin`/`padding`/`top`/`left`)
- Framer Motion `x`/`y`/`scale` props on motion that runs while the page is busy
- Updating a CSS variable on a parent to drive a child transform (style recalc storm)
- Missing `prefers-reduced-motion` handling on movement
- Ungated `:hover` motion
- Symmetric enter/exit timing on a press-and-release or hold interaction
- Everything-at-once entrance where a 30–80ms stagger belongs
## Remedial Preference Hierarchy
When proposing fixes, prefer earlier moves over later ones:
1. **Delete the animation** (high-frequency / no purpose / keyboard-triggered).
2. **Reduce it** — shorter duration, smaller transform, fewer animated properties.
3. **Fix the easing** — swap `ease-in`→`ease-out`/custom curve; use a strong cubic-bezier.
4. **Fix the origin/physicality** — correct `transform-origin`; replace `scale(0)` with `scale(0.95)`+opacity.
5. **Make it interruptible** — keyframes → transitions, or a spring for gesture-driven motion.
6. **Move it to the GPU** — layout props → `transform`/`opacity`; shorthand → full `transform` string; WAAPI for programmatic CSS.
7. **Asymmetric timing** — slow the deliberate phase, snap the response.
8. **Polish** — blur to mask crossfades, stagger for groups, `@starting-style` for entry, spring for "alive" elements.
9. **Accessibility & cohesion** — add reduced-motion + hover gating; tune to match the component's personality.
## Required Output Format
Two parts, in this order.
### Part 1 — Findings table (REQUIRED)
A single markdown table. One row per issue. Never a "Before:/After:" list.
| Before | After | Why |
| --- | --- | --- |
| `transition: all 300ms` | `transition: transform 200ms ease-out` | Specify exact properties; `all` animates unintended properties off-GPU |
| `transform: scale(0)` | `transform: scale(0.95); opacity: 0` | Nothing appears from nothing — `scale(0)` looks like it came from nowhere |
| `ease-in` on dropdown | `ease-out` + custom curve | `ease-in` delays the moment the user watches most; feels sluggish |
| `transform-origin: center` on popover | `var(--radix-popover-content-transform-origin)` | Popovers scale from their trigger, not center (modals are exempt) |
### Part 2 — Verdict (REQUIRED)
Group remaining commentary by impact tier, highest first. Omit empty tiers.
1. **Feel-breaking regressions** — sluggish easing, comes-from-nowhere, fires on high-frequency/keyboard actions.
2. **Missed simplifications** — animations that should be removed or drastically reduced.
3. **Performance** — non-GPU properties, dropped-frame risks, recalc storms.
4. **Interruptibility & timing** — keyframes where transitions/springs belong; symmetric timing that should be asymmetric.
5. **Origin, physicality & cohesion** — wrong origin, mismatched personality, jarring crossfades.
6. **Accessibility** — reduced-motion and pointer/hover gating.
Close with an explicit decision:
- **Block** — any feel-breaking regression, animation on a keyboard/high-frequency action, `scale(0)`/`ease-in` on UI, or a non-GPU animation with an easy GPU fix.
- **Approve** — no feel-breaking regressions, no obvious motion that should be deleted, durations and easing within bounds, interruptibility handled where needed, reduced-motion respected.
Be specific and cite `file:line`. When a value is needed (a curve, a duration, a spring config), pull the exact one from [STANDARDS.md](STANDARDS.md) rather than approximating.
## Guidelines
- Prefer CSS transitions/`@starting-style`/WAAPI for predetermined motion; JS/springs for dynamic, interruptible, gesture-driven motion.
- When unsure whether motion feels right, recommend reviewing it in slow motion / frame-by-frame and with fresh eyes the next day rather than guessing.
.agents/skills/review-animations/STANDARDS.md
+188
View File
@@ -0,0 +1,188 @@
# Animation Standards Reference
The precise values, curves, and rules behind the review. Cite these in findings instead of approximating. Distilled from Emil Kowalski's design engineering philosophy ([animations.dev](https://animations.dev/)).
## Should it animate? (frequency table)
| Frequency | Decision |
| --- | --- |
| 100+ times/day (keyboard shortcuts, command palette toggle) | No animation. Ever. |
| Tens of times/day (hover effects, list navigation) | Remove or drastically reduce |
| Occasional (modals, drawers, toasts) | Standard animation |
| Rare / first-time (onboarding, feedback, celebrations) | Can add delight |
**Never animate keyboard-initiated actions** — they repeat hundreds of times daily; animation makes them feel slow and disconnected. (Raycast has no open/close animation — correct for something used hundreds of times a day.)
Valid purposes for motion: spatial consistency, state indication, explanation, feedback, preventing jarring change. "It looks cool" on a frequently-seen element is not valid.
## Easing
Decision order:
- Entering or exiting → **`ease-out`** (starts fast, feels responsive)
- Moving / morphing on screen → **`ease-in-out`**
- Hover / color change → **`ease`**
- Constant motion (marquee, progress) → **`linear`**
- Default → **`ease-out`**
**Never `ease-in` on UI.** It starts slow, delaying the exact moment the user is watching. `ease-out` at 200ms *feels* faster than `ease-in` at 200ms.
Built-in CSS easings are too weak. Use strong custom curves:
```css
--ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* strong ease-out for UI */
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* strong ease-in-out for on-screen movement */
--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* iOS-like drawer curve (Ionic) */
```
Find curves at [easing.dev](https://easing.dev/) or [easings.co](https://easings.co/) — don't hand-roll from scratch.
## Duration
| Element | Duration |
| --- | --- |
| Button press feedback | 100–160ms |
| Tooltips, small popovers | 125–200ms |
| Dropdowns, selects | 150–250ms |
| Modals, drawers | 200–500ms |
| Marketing / explanatory | Can be longer |
**Rule: UI animations stay under 300ms.** A 180ms dropdown feels more responsive than a 400ms one. Faster spinners make load feel faster (same actual time). Instant tooltips after the first (skip delay + animation) make a toolbar feel faster.
## Physicality
- **Never `scale(0)`.** Start from `scale(0.9–0.97)` + `opacity: 0`. Nothing in the real world appears from nothing.
- **Origin-aware popovers.** Scale from the trigger, not center:
```css
.popover { transform-origin: var(--radix-popover-content-transform-origin); } /* Radix */
.popover { transform-origin: var(--transform-origin); } /* Base UI */
```
**Modals are exempt** — they appear centered in the viewport, keep `transform-origin: center`.
- **Button press feedback.** `transform: scale(0.97)` on `:active`, `transition: transform 160ms ease-out`. Subtle (0.95–0.98). Applies to any pressable element.
## Springs
Feel natural because they simulate physics; no fixed duration — they settle on parameters. Use for: drag with momentum, "alive" elements (Dynamic Island), interruptible gestures, decorative mouse-tracking.
```js
// Apple-style (easier to reason about) — recommended
{ type: "spring", duration: 0.5, bounce: 0.2 }
// Traditional physics (more control)
{ type: "spring", mass: 1, stiffness: 100, damping: 10 }
```
Keep bounce subtle (0.1–0.3); avoid bounce in most UI — reserve for drag-to-dismiss and playful interactions. Springs maintain velocity when interrupted (keyframes restart from zero), so they're ideal for gestures users may reverse mid-motion.
Mouse interactions: interpolate with `useSpring` rather than tying value directly to mouse position (direct = artificial, no momentum). Only do this when the motion is decorative.
## Interruptibility
CSS **transitions** can be interrupted and retargeted mid-animation; **keyframes** restart from zero. For anything triggered rapidly (toasts being added, toggles), transitions are smoother.
```css
/* Interruptible — good for dynamic UI */
.toast { transition: transform 400ms ease; }
/* Not interruptible — avoid for dynamic UI */
@keyframes slideIn { from { transform: translateY(100%); } to { transform: translateY(0); } }
```
Use `@starting-style` for entry without JS:
```css
.toast {
opacity: 1; transform: translateY(0);
transition: opacity 400ms ease, transform 400ms ease;
@starting-style { opacity: 0; transform: translateY(100%); }
}
```
Legacy fallback: `useEffect(() => setMounted(true), [])` + `data-mounted` attribute.
## Asymmetric timing
Slow where the user is deciding, fast where the system responds.
```css
.overlay { transition: clip-path 200ms ease-out; } /* release: fast */
.button:active .overlay { transition: clip-path 2s linear; } /* press: slow, deliberate */
```
## Performance
- **Only animate `transform` and `opacity`** — they skip layout/paint and run on the GPU. `padding`/`margin`/`height`/`width`/`top`/`left` trigger all three rendering steps.
- **Don't drive child transforms via a CSS variable on the parent** — it recalcs styles for all children. Set `transform` directly on the element.
```js
element.style.setProperty('--swipe-amount', `${d}px`); // bad: recalc on all children
element.style.transform = `translateY(${d}px)`; // good: only this element
```
- **Framer Motion shorthands are NOT hardware-accelerated.** `x`/`y`/`scale` run on the main thread via rAF and drop frames under load. Use the full transform string:
```jsx
<motion.div animate={{ x: 100 }} /> // drops frames under load
<motion.div animate={{ transform: "translateX(100px)" }} /> // hardware accelerated
```
- **CSS animations beat JS under load** — they run off the main thread; rAF-based animations stutter while the browser loads/scripts/paints. Use CSS for predetermined motion, JS for dynamic/interruptible.
- **WAAPI** gives JS control with CSS performance (hardware-accelerated, interruptible, no library):
```js
element.animate([{ clipPath: 'inset(0 0 100% 0)' }, { clipPath: 'inset(0 0 0 0)' }],
{ duration: 1000, fill: 'forwards', easing: 'cubic-bezier(0.77, 0, 0.175, 1)' });
```
## Transforms & clip-path
- **`translate` percentages** are relative to the element's own size — `translateY(100%)` moves by the element's height regardless of dimensions (how Sonner/Vaul position toasts/drawers). Prefer over hardcoded px.
- **`scale()` scales children too** (font, icons, content) — a feature for press feedback.
- **3D**: `rotateX/Y` + `transform-style: preserve-3d` for depth/orbit/flip without JS.
- **`clip-path: inset(t r b l)`** is a powerful animation tool: each value eats in from that side. Uses: reveal-on-scroll (`inset(0 0 100% 0)` → `inset(0 0 0 0)`), hold-to-delete overlay, seamless tab color transitions (duplicate + clip the active copy), comparison sliders.
## Gestures & drag
- **Momentum dismissal**: don't require crossing a distance threshold — compute velocity (`Math.abs(distance)/elapsedMs`); dismiss if `> ~0.11`. A flick should be enough.
- **Damping at boundaries**: dragging past a natural edge moves less the further you go (real things slow before stopping).
- **Pointer capture** once dragging starts, so it continues when the pointer leaves bounds.
- **Multi-touch protection**: ignore extra touch points after the drag begins (`if (isDragging) return`) — prevents jumps.
- **Friction over hard stops** — allow over-drag with rising resistance rather than an invisible wall.
## Masking imperfect crossfades
When a crossfade shows two overlapping states despite tuning easing/duration, add subtle `filter: blur(2px)` during the transition to blend them into one perceived transformation. Keep blur < 20px (heavy blur is expensive, especially Safari).
## Stagger
Stagger group entrances; 30–80ms between items. Longer delays feel slow. Stagger is decorative — never block interaction while it plays.
```css
.item { opacity: 0; transform: translateY(8px); animation: fadeIn 300ms ease-out forwards; }
.item:nth-child(2) { animation-delay: 50ms; }
.item:nth-child(3) { animation-delay: 100ms; }
@keyframes fadeIn { to { opacity: 1; transform: translateY(0); } }
```
## Accessibility
```css
@media (prefers-reduced-motion: reduce) {
.element { animation: fade 0.2s ease; } /* keep opacity/color, drop transform-based motion */
}
@media (hover: hover) and (pointer: fine) {
.element:hover { transform: scale(1.05); } /* gate hover motion — touch fires false hovers on tap */
}
```
```jsx
const reduce = useReducedMotion();
const closedX = reduce ? 0 : '-100%';
```
Reduced motion means fewer and gentler animations, not zero — keep transitions that aid comprehension, remove movement/position changes.
## Debugging (recommend in reviews when feel is uncertain)
- **Slow motion**: bump duration 2–5× or use DevTools animation inspector. Check colors crossfade cleanly, easing doesn't stop abruptly, `transform-origin` is right, coordinated properties stay in sync.
- **Frame-by-frame**: Chrome DevTools Animations panel reveals timing drift between coordinated properties.
- **Real devices** for gestures (drawers, swipe) — connect a phone, hit the dev server by IP, use Safari remote devtools.
- **Fresh eyes next day** — imperfections invisible during development surface later.
## Cohesion
Match motion to the component's personality: playful can be bouncier; a professional dashboard should be crisp and fast. Sonner feels right partly because easing, duration, design, and even the name are in harmony — slightly slower, `ease` rather than `ease-out`, to feel elegant. Opacity + height in entering/exiting lists is trial and error; there's no formula — adjust until it feels right.
.husky/pre-commit
-1
View File
@@ -1 +0,0 @@
node scripts/validate-post.mjs
.markdownlint.json
-9
View File
@@ -1,9 +0,0 @@
{
"default": true,
"MD013": false,
"MD033": false,
"MD041": false,
"MD024": {
"siblings_only": true
}
}
.prettierignore
-12
View File
@@ -1,12 +0,0 @@
# Ignore Zola compiled output and dependencies
public/
node_modules/
# Ignore Zola HTML templates (Tera syntax breaks standard HTML parsing)
templates/**/*.html
templates/**/*.json
# Ignore minified static files
static/**/*.min.js
static/**/*.min.css
static/js/cookieconsent.umd.js
.prettierrc
-9
View File
@@ -1,9 +0,0 @@
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"useTabs": false,
"trailingComma": "all",
"printWidth": 100,
"plugins": ["prettier-plugin-toml"]
}
CLAUDE.md
+54
View File
@@ -0,0 +1,54 @@
# CLAUDE.md
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
## What this is
A personal blog (andwati.com — "Thoughts and Musings") built with [Zola](https://www.getzola.org/), a Rust-based static site generator. All templates, styles, and content are custom (no external theme is used — `themes/` is empty).
## Commands
- `zola build` (or `make build`) — build the site into `public/`
- `zola serve` (or `make serve`) — serve locally with live reload
- `make clean` — remove `public/`
- `make all` — clean + build
- `./bin/update-zola` — checks the installed Zola version against the latest GitHub release and offers to install it into `~/.cargo/bin`
- `node scripts/validate-post.mjs` — validates staged post front-matter (run as a pre-commit hook); checks kebab-case filenames and required `title`/`date` TOML front-matter fields
There is no JS/CSS build tooling beyond Zola itself: `compile_sass = true` in `zola.toml` means Sass under `sass/` is compiled directly by Zola.
Docker: `Dockerfile` does a multi-stage build — `zola build` in the `ghcr.io/getzola/zola` image, then serves `public/` via `static-web-server`.
## Content structure
- Posts live in `content/posts/`, either as a single `.md` file (`content/posts/my-post.md`) or as a directory with `index.md` (`content/posts/my-post/index.md`) when a post has co-located assets.
- Front matter is TOML (`+++ ... +++`), e.g.:
```
+++
title = "..."
description = "..."
author = "mockingspectre"
date = YYYY-MM-DD
[taxonomies]
tags = ["..."]
+++
```
- `tags` is the only taxonomy (`taxonomies = [{ name = "tags" }]` in `zola.toml`).
- `content/archive/_index.md`, `content/about.md`, `content/_index.md` are standalone pages.
- Custom shortcodes available in post bodies: `note`, `tip`, `warning`, `danger` (callout boxes, see `templates/shortcodes/`) and `youtube(id="...")`.
## Templates & styling
- `templates/base.html` is the root layout; page-type templates (`index.html`, `page.html`, `posts.html`, `taxonomy_list.html`, `taxonomy_single.html`, `archive.html`, `404.html`) extend it.
- `templates/partials/` holds reusable fragments (header, footer, profile, post-card, post-nav, series-nav, related-posts, toc/toc-sidebar, comments, social-share).
- `templates/feed.json`, `templates/rss.xml`, `templates/sitemap.xml`, `templates/robots.txt` are generated-output templates driven by the `generate_feeds`/`generate_robots_txt` settings in `zola.toml`.
- Sass is split by concern in `sass/` (`_layout`, `_header`, `_footer`, `_hero`, `_article`, `_typography`, `_theme`, `_search`, `_variables`, `_utilities`, `_transitions`, `_404`, `_scroll-top`, `_feed`) and assembled via `sass/main.scss`.
- Site supports light/dark theme toggling (`enable_theme_toggle`) and full-text search (`enable_search`, `build_search_index = true`) — search index and theme logic live in the corresponding JS under `static/js/` and Sass partials above.
## Site configuration
All site-wide behavior/config (analytics, author/profile info, social links, nav menu, Utterances comment settings, search, related posts, the 404 terminal-themed easter egg) is centralized in `zola.toml` under `[extra]`. Check there before hardcoding values in templates.
## Agent skills
`.agents/skills/` contains pulled-in skills (`animation-vocabulary`, `emil-design-eng`, `review-animations`) tracked via `skills-lock.json`, useful for UI/animation review and design-engineering guidance when touching templates or Sass.
cspell.json
-75
View File
@@ -1,75 +0,0 @@
{
"version": "0.2",
"language": "en",
"words": [
"andwati",
"angr",
"bruteforcing",
"buttondown",
"catppuccin",
"cookieconsent",
"DCBA",
"disassemblers",
"dlresolve",
"dnsmasq",
"Einherjar",
"elasticlunr",
"endianness",
"Fastbin",
"fgets",
"fini",
"frontmatter",
"Ghidra",
"Heartbleed",
"honggfuzz",
"hotspot",
"Hotspots",
"katex",
"kebab",
"Kernighan",
"libc",
"lightbox",
"listmonk",
"malloc",
"markdownlint",
"mockingspectre",
"nmcli",
"objdump",
"pacman",
"Pgadget",
"precommit",
"pwn",
"pwndbg",
"pwnforfunandprofit",
"pwntools",
"Pwntools",
"radare",
"readelf",
"Ritchie",
"Sandboxing",
"scanf",
"seccomp",
"shellcode",
"Shellshock",
"shortcodes",
"Sigreturn",
"SIGSEGV",
"SROP",
"stdlib",
"subdirectories",
"syscalls",
"Tcache",
"Userland",
"utterances",
"webmention",
"zola"
],
"ignorePaths": [
"node_modules",
"package.json",
"pnpm-lock.yaml",
"public",
"static/js/**",
"static/css/**"
]
}
llms/output-skill.md
-50
View File
@@ -1,50 +0,0 @@
---
name: full-output-enforcement
description: Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.
---
# Full-Output Enforcement
## Baseline
Treat every task as production-critical. A partial output is a broken output. Do not optimize for brevity — optimize for completeness. If the user asks for a full file, deliver the full file. If the user asks for 5 components, deliver 5 components. No exceptions.
## Banned Output Patterns
The following patterns are hard failures. Never produce them:
**In code blocks:** `// ...`, `// rest of code`, `// implement here`, `// TODO`, `/* ... */`, `// similar to above`, `// continue pattern`, `// add more as needed`, bare `...` standing in for omitted code
**In prose:** "Let me know if you want me to continue", "I can provide more details if needed", "for brevity", "the rest follows the same pattern", "similarly for the remaining", "and so on" (when replacing actual content), "I'll leave that as an exercise"
**Structural shortcuts:** Outputting a skeleton when the request was for a full implementation. Showing the first and last section while skipping the middle. Replacing repeated logic with one example and a description. Describing what code should do instead of writing it.
## Execution Process
1. **Scope** — Read the full request. Count how many distinct deliverables are expected (files, functions, sections, answers). Lock that number.
2. **Build** — Generate every deliverable completely. No partial drafts, no "you can extend this later."
3. **Cross-check** — Before output, re-read the original request. Compare your deliverable count against the scope count. If anything is missing, add it before responding.
## Handling Long Outputs
When a response approaches the token limit:
- Do not compress remaining sections to squeeze them in.
- Do not skip ahead to a conclusion.
- Write at full quality up to a clean breakpoint (end of a function, end of a file, end of a section).
- End with:
```
[PAUSED — X of Y complete. Send "continue" to resume from: next section name]
```
On "continue", pick up exactly where you stopped. No recap, no repetition.
## Quick Check
Before finalizing any response, verify:
- No banned patterns from the list above appear anywhere in the output
- Every item the user requested is present and finished
- Code blocks contain actual runnable code, not descriptions of what code would do
- Nothing was shortened to save space
llms/redesign-skill.md
-182
View File
@@ -1,182 +0,0 @@
---
name: redesign-existing-projects
description: Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.
---
# Redesign Skill
## How This Works
When applied to an existing project, follow this sequence:
1. **Scan** — Read the codebase. Identify the framework, styling method (Tailwind, vanilla CSS, styled-components, etc.), and current design patterns.
2. **Diagnose** — Run through the audit below. List every generic pattern, weak point, and missing state you find.
3. **Fix** — Apply targeted upgrades working with the existing stack. Do not rewrite from scratch. Improve what's there.
## Design Audit
### Typography
Check for these problems and fix them:
- **Browser default fonts or Inter everywhere.** Replace with a font that has character. Good options: `Geist`, `Outfit`, `Cabinet Grotesk`, `Satoshi`. For editorial/creative projects, pair a serif header with a sans-serif body.
- **Headlines lack presence.** Increase size for display text, tighten letter-spacing, reduce line-height. Headlines should feel heavy and intentional.
- **Body text too wide.** Limit paragraph width to roughly 65 characters. Increase line-height for readability.
- **Only Regular (400) and Bold (700) weights used.** Introduce Medium (500) and SemiBold (600) for more subtle hierarchy.
- **Numbers in proportional font.** Use a monospace font or enable tabular figures (`font-variant-numeric: tabular-nums`) for data-heavy interfaces.
- **Missing letter-spacing adjustments.** Use negative tracking for large headers, positive tracking for small caps or labels.
- **All-caps subheaders everywhere.** Try lowercase italics, sentence case, or small-caps instead.
- **Orphaned words.** Single words sitting alone on the last line. Fix with `text-wrap: balance` or `text-wrap: pretty`.
### Color and Surfaces
- **Pure `#000000` background.** Replace with off-black, dark charcoal, or tinted dark (`#0a0a0a`, `#121212`, or a dark navy).
- **Oversaturated accent colors.** Keep saturation below 80%. Desaturate accents so they blend with neutrals instead of screaming.
- **More than one accent color.** Pick one. Remove the rest. Consistency beats variety.
- **Mixing warm and cool grays.** Stick to one gray family. Tint all grays with a consistent hue (warm or cool, not both).
- **Purple/blue "AI gradient" aesthetic.** This is the most common AI design fingerprint. Replace with neutral bases and a single, considered accent.
- **Generic `box-shadow`.** Tint shadows to match the background hue. Use colored shadows (e.g., dark blue shadow on a blue background) instead of pure black at low opacity.
- **Flat design with zero texture.** Add subtle noise, grain, or micro-patterns to backgrounds. Pure flat vectors feel sterile.
- **Perfectly even gradients.** Break the uniformity with radial gradients, noise overlays, or mesh gradients instead of standard linear 45-degree fades.
- **Inconsistent lighting direction.** Audit all shadows to ensure they suggest a single, consistent light source.
- **Random dark sections in a light mode page (or vice versa).** A single dark-background section breaking an otherwise light page looks like a copy-paste accident. Either commit to a full dark mode or keep a consistent background tone throughout. If contrast is needed, use a slightly darker shade of the same palette — not a sudden jump to `#111` in the middle of a cream page.
- **Empty, flat sections with no visual depth.** Sections that are just text on a plain background feel unfinished. Add high-quality background imagery (blurred, overlaid, or masked), subtle patterns, or ambient gradients. Use reliable placeholder sources like `https://picsum.photos/seed/{name}/1920/1080` when real assets are not available. Experiment with background images behind hero sections, feature blocks, or CTAs — even a subtle full-width photo at low opacity adds presence.
### Layout
- **Everything centered and symmetrical.** Break symmetry with offset margins, mixed aspect ratios, or left-aligned headers over centered content.
- **Three equal card columns as feature row.** This is the most generic AI layout. Replace with a 2-column zig-zag, asymmetric grid, horizontal scroll, or masonry layout.
- **Using `height: 100vh` for full-screen sections.** Replace with `min-height: 100dvh` to prevent layout jumping on mobile browsers (iOS Safari viewport bug).
- **Complex flexbox percentage math.** Replace with CSS Grid for reliable multi-column structures.
- **No max-width container.** Add a container constraint (around 1200-1440px) with auto margins so content doesn't stretch edge-to-edge on wide screens.
- **Cards of equal height forced by flexbox.** Allow variable heights or use masonry when content varies in length.
- **Uniform border-radius on everything.** Vary the radius: tighter on inner elements, softer on containers.
- **No overlap or depth.** Elements sit flat next to each other. Use negative margins to create layering and visual depth.
- **Symmetrical vertical padding.** Top and bottom padding are always identical. Adjust optically — bottom padding often needs to be slightly larger.
- **Dashboard always has a left sidebar.** Try top navigation, a floating command menu, or a collapsible panel instead.
- **Missing whitespace.** Double the spacing. Let the design breathe. Dense layouts work for data dashboards, not for marketing pages.
- **Buttons not bottom-aligned in card groups.** When cards have different content lengths, CTAs end up at random heights. Pin buttons to the bottom of each card so they form a clean horizontal line regardless of content above.
- **Feature lists starting at different vertical positions.** In pricing tables or comparison cards, the list of features should start at the same Y position across all columns. Use consistent spacing above the list or fixed-height title/price blocks.
- **Inconsistent vertical rhythm in side-by-side elements.** When placing cards, columns, or panels next to each other, align shared elements (titles, descriptions, prices, buttons) across all items. Misaligned baselines make the layout look broken.
- **Mathematical alignment that looks optically wrong.** Centering by the math doesn't always look centered to the eye. Icons next to text, play buttons in circles, or text in buttons often need 1-2px optical adjustments to feel right.
### Interactivity and States
- **No hover states on buttons.** Add background shift, slight scale, or translate on hover.
- **No active/pressed feedback.** Add a subtle `scale(0.98)` or `translateY(1px)` on press to simulate a physical click.
- **Instant transitions with zero duration.** Add smooth transitions (200-300ms) to all interactive elements.
- **Missing focus ring.** Ensure visible focus indicators for keyboard navigation. This is an accessibility requirement, not optional.
- **No loading states.** Replace generic circular spinners with skeleton loaders that match the layout shape.
- **No empty states.** An empty dashboard showing nothing is a missed opportunity. Design a composed "getting started" view.
- **No error states.** Add clear, inline error messages for forms. Do not use `window.alert()`.
- **Dead links.** Buttons that link to `#`. Either link to real destinations or visually disable them.
- **No indication of current page in navigation.** Style the active nav link differently so users know where they are.
- **Scroll jumping.** Anchor clicks jump instantly. Add `scroll-behavior: smooth`.
- **Animations using `top`, `left`, `width`, `height`.** Switch to `transform` and `opacity` for GPU-accelerated, smooth animation.
### Content
- **Generic names like "John Doe" or "Jane Smith".** Use diverse, realistic-sounding names.
- **Fake round numbers like `99.99%`, `50%`, `$100.00`.** Use organic, messy data: `47.2%`, `$99.00`, `+1 (312) 847-1928`.
- **Placeholder company names like "Acme Corp", "Nexus", "SmartFlow".** Invent contextual, believable brand names.
- **AI copywriting cliches.** Never use "Elevate", "Seamless", "Unleash", "Next-Gen", "Game-changer", "Delve", "Tapestry", or "In the world of...". Write plain, specific language.
- **Exclamation marks in success messages.** Remove them. Be confident, not loud.
- **"Oops!" error messages.** Be direct: "Connection failed. Please try again."
- **Passive voice.** Use active voice: "We couldn't save your changes" instead of "Mistakes were made."
- **All blog post dates identical.** Randomize dates to appear real.
- **Same avatar image for multiple users.** Use unique assets for every distinct person.
- **Lorem Ipsum.** Never use placeholder latin text. Write real draft copy.
- **Title Case On Every Header.** Use sentence case instead.
### Component Patterns
- **Generic card look (border + shadow + white background).** Remove the border, or use only background color, or use only spacing. Cards should exist only when elevation communicates hierarchy.
- **Always one filled button + one ghost button.** Add text links or tertiary styles to reduce visual noise.
- **Pill-shaped "New" and "Beta" badges.** Try square badges, flags, or plain text labels.
- **Accordion FAQ sections.** Use a side-by-side list, searchable help, or inline progressive disclosure.
- **3-card carousel testimonials with dots.** Replace with a masonry wall, embedded social posts, or a single rotating quote.
- **Pricing table with 3 towers.** Highlight the recommended tier with color and emphasis, not just extra height.
- **Modals for everything.** Use inline editing, slide-over panels, or expandable sections instead of popups for simple actions.
- **Avatar circles exclusively.** Try squircles or rounded squares for a less generic look.
- **Light/dark toggle always a sun/moon switch.** Use a dropdown, system preference detection, or integrate it into settings.
- **Footer link farm with 4 columns.** Simplify. Focus on main navigational paths and legally required links.
### Iconography
- **Lucide or Feather icons exclusively.** These are the "default" AI icon choice. Use Phosphor, Heroicons, or a custom set for differentiation.
- **Rocketship for "Launch", shield for "Security".** Replace cliche metaphors with less obvious icons (bolt, fingerprint, spark, vault).
- **Inconsistent stroke widths across icons.** Audit all icons and standardize to one stroke weight.
- **Missing favicon.** Always include a branded favicon.
- **Stock "diverse team" photos.** Use real team photos, candid shots, or a consistent illustration style instead of uncanny stock imagery.
### Code Quality
- **Div soup.** Use semantic HTML: `<nav>`, `<main>`, `<article>`, `<aside>`, `<section>`.
- **Inline styles mixed with CSS classes.** Move all styling to the project's styling system.
- **Hardcoded pixel widths.** Use relative units (`%`, `rem`, `em`, `max-width`) for flexible layouts.
- **Missing alt text on images.** Describe image content for screen readers. Never leave `alt=""` or `alt="image"` on meaningful images.
- **Arbitrary z-index values like `9999`.** Establish a clean z-index scale in the theme/variables.
- **Commented-out dead code.** Remove all debug artifacts before shipping.
- **Import hallucinations.** Check that every import actually exists in `package.json` or the project dependencies.
- **Missing meta tags.** Add proper `<title>`, `description`, `og:image`, and social sharing meta tags.
### Strategic Omissions (What AI Typically Forgets)
- **No legal links.** Add privacy policy and terms of service links in the footer.
- **No "back" navigation.** Dead ends in user flows. Every page needs a way back.
- **No custom 404 page.** Design a helpful, branded "page not found" experience.
- **No form validation.** Add client-side validation for emails, required fields, and format checks.
- **No "skip to content" link.** Essential for keyboard users. Add a hidden skip-link.
- **No cookie consent.** If required by jurisdiction, add a compliant consent banner.
## Upgrade Techniques
When upgrading a project, pull from these high-impact techniques to replace generic patterns:
### Typography Upgrades
- **Variable font animation.** Interpolate weight or width on scroll or hover for text that feels alive.
- **Outlined-to-fill transitions.** Text starts as a stroke outline and fills with color on scroll entry or interaction.
- **Text mask reveals.** Large typography acting as a window to video or animated imagery behind it.
### Layout Upgrades
- **Broken grid / asymmetry.** Elements that deliberately ignore column structure — overlapping, bleeding off-screen, or offset with calculated randomness.
- **Whitespace maximization.** Aggressive use of negative space to force focus on a single element.
- **Parallax card stacks.** Sections that stick and physically stack over each other during scroll.
- **Split-screen scroll.** Two halves of the screen sliding in opposite directions.
### Motion Upgrades
- **Smooth scroll with inertia.** Decouple scrolling from browser defaults for a heavier, cinematic feel.
- **Staggered entry.** Elements cascade in with slight delays, combining Y-axis translation with opacity fade. Never mount everything at once.
- **Spring physics.** Replace linear easing with spring-based motion for a natural, weighty feel on all interactive elements.
- **Scroll-driven reveals.** Content entering through expanding masks, wipes, or draw-on SVG paths tied to scroll progress.
### Surface Upgrades
- **True glassmorphism.** Go beyond `backdrop-filter: blur`. Add a 1px inner border and a subtle inner shadow to simulate edge refraction.
- **Spotlight borders.** Card borders that illuminate dynamically under the cursor.
- **Grain and noise overlays.** A fixed, pointer-events-none overlay with subtle noise to break digital flatness.
- **Colored, tinted shadows.** Shadows that carry the hue of the background rather than using generic black.
## Fix Priority
Apply changes in this order for maximum visual impact with minimum risk:
1. **Font swap** — biggest instant improvement, lowest risk
2. **Color palette cleanup** — remove clashing or oversaturated colors
3. **Hover and active states** — makes the interface feel alive
4. **Layout and spacing** — proper grid, max-width, consistent padding
5. **Replace generic components** — swap cliche patterns for modern alternatives
6. **Add loading, empty, and error states** — makes it feel finished
7. **Polish typography scale and spacing** — the premium final touch
## Rules
- Work with the existing tech stack. Do not migrate frameworks or styling libraries.
- Do not break existing functionality. Test after every change.
- Before importing any new library, check the project's dependency file first.
- If the project uses Tailwind, check the version (v3 vs v4) before modifying config.
- If the project has no framework, use vanilla CSS.
- Keep changes reviewable and focused. Small, targeted improvements over big rewrites.
llms/taste-skill.md
-263
View File
@@ -1,263 +0,0 @@
---
name: design-taste-frontend
description: Senior UI/UX Engineer. Architect digital interfaces overriding default LLM biases. Enforces metric-based rules, strict component architecture, CSS hardware acceleration, and balanced design engineering.
---
# High-Agency Frontend Skill
## 1. ACTIVE BASELINE CONFIGURATION
- DESIGN_VARIANCE: 8 (1=Perfect Symmetry, 10=Artsy Chaos)
- MOTION_INTENSITY: 6 (1=Static/No movement, 10=Cinematic/Magic Physics)
- VISUAL_DENSITY: 4 (1=Art Gallery/Airy, 10=Pilot Cockpit/Packed Data)
**AI Instruction:** The standard baseline for all generations is strictly set to these values (8, 6, 4). Do not ask the user to edit this file. Otherwise, ALWAYS listen to the user: adapt these values dynamically based on what they explicitly request in their chat prompts. Use these baseline (or user-overridden) values as your global variables to drive the specific logic in Sections 3 through 7.
## 2. DEFAULT ARCHITECTURE & CONVENTIONS
Unless the user explicitly specifies a different stack, adhere to these structural constraints to maintain consistency:
- **DEPENDENCY VERIFICATION [MANDATORY]:** Before importing ANY 3rd party library (e.g. `framer-motion`, `lucide-react`, `zustand`), you MUST check `package.json`. If the package is missing, you MUST output the installation command (e.g. `npm install package-name`) before providing the code. **Never** assume a library exists.
- **Framework & Interactivity:** React or Next.js. Default to Server Components (`RSC`).
- **RSC SAFETY:** Global state works ONLY in Client Components. In Next.js, wrap providers in a `"use client"` component.
- **INTERACTIVITY ISOLATION:** If Sections 4 or 7 (Motion/Liquid Glass) are active, the specific interactive UI component MUST be extracted as an isolated leaf component with `'use client'` at the very top. Server Components must exclusively render static layouts.
- **State Management:** Use local `useState`/`useReducer` for isolated UI. Use global state strictly for deep prop-drilling avoidance.
- **Styling Policy:** Use Tailwind CSS (v3/v4) for 90% of styling.
- **TAILWIND VERSION LOCK:** Check `package.json` first. Do not use v4 syntax in v3 projects.
- **T4 CONFIG GUARD:** For v4, do NOT use `tailwindcss` plugin in `postcss.config.js`. Use `@tailwindcss/postcss` or the Vite plugin.
- **ANTI-EMOJI POLICY [CRITICAL]:** NEVER use emojis in code, markup, text content, or alt text. Replace symbols with high-quality icons (Radix, Phosphor) or clean SVG primitives. Emojis are BANNED.
- **Responsiveness & Spacing:**
- Standardize breakpoints (`sm`, `md`, `lg`, `xl`).
- Contain page layouts using `max-w-[1400px] mx-auto` or `max-w-7xl`.
- **Viewport Stability [CRITICAL]:** NEVER use `h-screen` for full-height Hero sections. ALWAYS use `min-h-[100dvh]` to prevent catastrophic layout jumping on mobile browsers (iOS Safari).
- **Grid over Flex-Math:** NEVER use complex flexbox percentage math (`w-[calc(33%-1rem)]`). ALWAYS use CSS Grid (`grid grid-cols-1 md:grid-cols-3 gap-6`) for reliable structures.
- **Icons:** You MUST use exactly `@phosphor-icons/react` or `@radix-ui/react-icons` as the import paths (check installed version). Standardize `strokeWidth` globally (e.g., exclusively use `1.5` or `2.0`).
## 3. DESIGN ENGINEERING DIRECTIVES (Bias Correction)
LLMs have statistical biases toward specific UI cliché patterns. Proactively construct premium interfaces using these engineered rules:
**Rule 1: Deterministic Typography**
- **Display/Headlines:** Default to `text-4xl md:text-6xl tracking-tighter leading-none`.
- **ANTI-SLOP:** Discourage `Inter` for "Premium" or "Creative" vibes. Force unique character using `Geist`, `Outfit`, `Cabinet Grotesk`, or `Satoshi`.
- **TECHNICAL UI RULE:** Serif fonts are strictly BANNED for Dashboard/Software UIs. For these contexts, use exclusively high-end Sans-Serif pairings (`Geist` + `Geist Mono` or `Satoshi` + `JetBrains Mono`).
- **Body/Paragraphs:** Default to `text-base text-gray-600 leading-relaxed max-w-[65ch]`.
**Rule 2: Color Calibration**
- **Constraint:** Max 1 Accent Color. Saturation < 80%.
- **THE LILA BAN:** The "AI Purple/Blue" aesthetic is strictly BANNED. No purple button glows, no neon gradients. Use absolute neutral bases (Zinc/Slate) with high-contrast, singular accents (e.g. Emerald, Electric Blue, or Deep Rose).
- **COLOR CONSISTENCY:** Stick to one palette for the entire output. Do not fluctuate between warm and cool grays within the same project.
**Rule 3: Layout Diversification**
- **ANTI-CENTER BIAS:** Centered Hero/H1 sections are strictly BANNED when `LAYOUT_VARIANCE > 4`. Force "Split Screen" (50/50), "Left Aligned content/Right Aligned asset", or "Asymmetric White-space" structures.
**Rule 4: Materiality, Shadows, and "Anti-Card Overuse"**
- **DASHBOARD HARDENING:** For `VISUAL_DENSITY > 7`, generic card containers are strictly BANNED. Use logic-grouping via `border-t`, `divide-y`, or purely negative space. Data metrics should breathe without being boxed in unless elevation (z-index) is functionally required.
- **Execution:** Use cards ONLY when elevation communicates hierarchy. When a shadow is used, tint it to the background hue.
**Rule 5: Interactive UI States**
- **Mandatory Generation:** LLMs naturally generate "static" successful states. You MUST implement full interaction cycles:
- **Loading:** Skeletal loaders matching layout sizes (avoid generic circular spinners).
- **Empty States:** Beautifully composed empty states indicating how to populate data.
- **Error States:** Clear, inline error reporting (e.g., forms).
- **Tactile Feedback:** On `:active`, use `-translate-y-[1px]` or `scale-[0.98]` to simulate a physical push indicating success/action.
**Rule 6: Data & Form Patterns**
- **Forms:** Label MUST sit above input. Helper text is optional but should exist in markup. Error text below input. Use a standard `gap-2` for input blocks.
## 4. CREATIVE PROACTIVITY (Anti-Slop Implementation)
To actively combat generic AI designs, systematically implement these high-end coding concepts as your baseline:
- **"Liquid Glass" Refraction:** When glassmorphism is needed, go beyond `backdrop-blur`. Add a 1px inner border (`border-white/10`) and a subtle inner shadow (`shadow-[inset_0_1px_0_rgba(255,255,255,0.1)]`) to simulate physical edge refraction.
- **Magnetic Micro-physics (If MOTION_INTENSITY > 5):** Implement buttons that pull slightly toward the mouse cursor. **CRITICAL:** NEVER use React `useState` for magnetic hover or continuous animations. Use EXCLUSIVELY Framer Motion's `useMotionValue` and `useTransform` outside the React render cycle to prevent performance collapse on mobile.
- **Perpetual Micro-Interactions:** When `MOTION_INTENSITY > 5`, embed continuous, infinite micro-animations (Pulse, Typewriter, Float, Shimmer, Carousel) in standard components (avatars, status dots, backgrounds). Apply premium Spring Physics (`type: "spring", stiffness: 100, damping: 20`) to all interactive elements—no linear easing.
- **Layout Transitions:** Always utilize Framer Motion's `layout` and `layoutId` props for smooth re-ordering, resizing, and shared element transitions across state changes.
- **Staggered Orchestration:** Do not mount lists or grids instantly. Use `staggerChildren` (Framer) or CSS cascade (`animation-delay: calc(var(--index) * 100ms)`) to create sequential waterfall reveals. **CRITICAL:** For `staggerChildren`, the Parent (`variants`) and Children MUST reside in the identical Client Component tree. If data is fetched asynchronously, pass the data as props into a centralized Parent Motion wrapper.
## 5. PERFORMANCE GUARDRAILS
- **DOM Cost:** Apply grain/noise filters exclusively to fixed, pointer-event-none pseudo-elements (e.g., `fixed inset-0 z-50 pointer-events-none`) and NEVER to scrolling containers to prevent continuous GPU repaints and mobile performance degradation.
- **Hardware Acceleration:** Never animate `top`, `left`, `width`, or `height`. Animate exclusively via `transform` and `opacity`.
- **Z-Index Restraint:** NEVER spam arbitrary `z-50` or `z-10` unprompted. Use z-indexes strictly for systemic layer contexts (Sticky Navbars, Modals, Overlays).
## 6. TECHNICAL REFERENCE (Dial Definitions)
### DESIGN_VARIANCE (Level 1-10)
- **1-3 (Predictable):** Flexbox `justify-center`, strict 12-column symmetrical grids, equal paddings.
- **4-7 (Offset):** Use `margin-top: -2rem` overlapping, varied image aspect ratios (e.g., 4:3 next to 16:9), left-aligned headers over center-aligned data.
- **8-10 (Asymmetric):** Masonry layouts, CSS Grid with fractional units (e.g., `grid-template-columns: 2fr 1fr 1fr`), massive empty zones (`padding-left: 20vw`).
- **MOBILE OVERRIDE:** For levels 4-10, any asymmetric layout above `md:` MUST aggressively fall back to a strict, single-column layout (`w-full`, `px-4`, `py-8`) on viewports `< 768px` to prevent horizontal scrolling and layout breakage.
### MOTION_INTENSITY (Level 1-10)
- **1-3 (Static):** No automatic animations. CSS `:hover` and `:active` states only.
- **4-7 (Fluid CSS):** Use `transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1)`. Use `animation-delay` cascades for load-ins. Focus strictly on `transform` and `opacity`. Use `will-change: transform` sparingly.
- **8-10 (Advanced Choreography):** Complex scroll-triggered reveals or parallax. Use Framer Motion hooks. NEVER use `window.addEventListener('scroll')`.
### VISUAL_DENSITY (Level 1-10)
- **1-3 (Art Gallery Mode):** Lots of white space. Huge section gaps. Everything feels very expensive and clean.
- **4-7 (Daily App Mode):** Normal spacing for standard web apps.
- **8-10 (Cockpit Mode):** Tiny paddings. No card boxes; just 1px lines to separate data. Everything is packed. **Mandatory:** Use Monospace (`font-mono`) for all numbers.
## 7. AI TELLS (Forbidden Patterns)
To guarantee a premium, non-generic output, you MUST strictly avoid these common AI design signatures unless explicitly requested:
### Visual & CSS
- **NO Neon/Outer Glows:** Do not use default `box-shadow` glows or auto-glows. Use inner borders or subtle tinted shadows.
- **NO Pure Black:** Never use `#000000`. Use Off-Black, Zinc-950, or Charcoal.
- **NO Oversaturated Accents:** Desaturate accents to blend elegantly with neutrals.
- **NO Excessive Gradient Text:** Do not use text-fill gradients for large headers.
- **NO Custom Mouse Cursors:** They are outdated and ruin performance/accessibility.
### Typography
- **NO Inter Font:** Banned. Use `Geist`, `Outfit`, `Cabinet Grotesk`, or `Satoshi`.
- **NO Oversized H1s:** The first heading should not scream. Control hierarchy with weight and color, not just massive scale.
- **Serif Constraints:** Use Serif fonts ONLY for creative/editorial designs. **NEVER** use Serif on clean Dashboards.
### Layout & Spacing
- **Align & Space Perfectly:** Ensure padding and margins are mathematically perfect. Avoid floating elements with awkward gaps.
- **NO 3-Column Card Layouts:** The generic "3 equal cards horizontally" feature row is BANNED. Use a 2-column Zig-Zag, asymmetric grid, or horizontal scrolling approach instead.
### Content & Data (The "Jane Doe" Effect)
- **NO Generic Names:** "John Doe", "Sarah Chan", or "Jack Su" are banned. Use highly creative, realistic-sounding names.
- **NO Generic Avatars:** DO NOT use standard SVG "egg" or Lucide user icons for avatars. Use creative, believable photo placeholders or specific styling.
- **NO Fake Numbers:** Avoid predictable outputs like `99.99%`, `50%`, or basic phone numbers (`1234567`). Use organic, messy data (`47.2%`, `+1 (312) 847-1928`).
- **NO Startup Slop Names:** "Acme", "Nexus", "SmartFlow". Invent premium, contextual brand names.
- **NO Filler Words:** Avoid AI copywriting clichés like "Elevate", "Seamless", "Unleash", or "Next-Gen". Use concrete verbs.
### External Resources & Components
- **NO Broken Unsplash Links:** Do not use Unsplash. Use absolute, reliable placeholders like `https://picsum.photos/seed/{random_string}/800/600` or SVG UI Avatars.
- **shadcn/ui Customization:** You may use `shadcn/ui`, but NEVER in its generic default state. You MUST customize the radii, colors, and shadows to match the high-end project aesthetic.
- **Production-Ready Cleanliness:** Code must be extremely clean, visually striking, memorable, and meticulously refined in every detail.
## 8. THE CREATIVE ARSENAL (High-End Inspiration)
Do not default to generic UI. Pull from this library of advanced concepts to ensure the output is visually striking and memorable. When appropriate, leverage **GSAP (ScrollTrigger/Parallax)** for complex scrolltelling or **ThreeJS/WebGL** for 3D/Canvas animations, rather than basic CSS motion. **CRITICAL:** Never mix GSAP/ThreeJS with Framer Motion in the same component tree. Default to Framer Motion for UI/Bento interactions. Use GSAP/ThreeJS EXCLUSIVELY for isolated full-page scrolltelling or canvas backgrounds, wrapped in strict useEffect cleanup blocks.
### The Standard Hero Paradigm
- Stop doing centered text over a dark image. Try asymmetric Hero sections: Text cleanly aligned to the left or right. The background should feature a high-quality, relevant image with a subtle stylistic fade (darkening or lightening gracefully into the background color depending on if it is Light or Dark mode).
### Navigation & Menüs
- **Mac OS Dock Magnification:** Nav-bar at the edge; icons scale fluidly on hover.
- **Magnetic Button:** Buttons that physically pull toward the cursor.
- **Gooey Menu:** Sub-items detach from the main button like a viscous liquid.
- **Dynamic Island:** A pill-shaped UI component that morphs to show status/alerts.
- **Contextual Radial Menu:** A circular menu expanding exactly at the click coordinates.
- **Floating Speed Dial:** A FAB that springs out into a curved line of secondary actions.
- **Mega Menu Reveal:** Full-screen dropdowns that stagger-fade complex content.
### Layout & Grids
- **Bento Grid:** Asymmetric, tile-based grouping (e.g., Apple Control Center).
- **Masonry Layout:** Staggered grid without fixed row heights (e.g., Pinterest).
- **Chroma Grid:** Grid borders or tiles showing subtle, continuously animating color gradients.
- **Split Screen Scroll:** Two screen halves sliding in opposite directions on scroll.
- **Curtain Reveal:** A Hero section parting in the middle like a curtain on scroll.
### Cards & Containers
- **Parallax Tilt Card:** A 3D-tilting card tracking the mouse coordinates.
- **Spotlight Border Card:** Card borders that illuminate dynamically under the cursor.
- **Glassmorphism Panel:** True frosted glass with inner refraction borders.
- **Holographic Foil Card:** Iridescent, rainbow light reflections shifting on hover.
- **Tinder Swipe Stack:** A physical stack of cards the user can swipe away.
- **Morphing Modal:** A button that seamlessly expands into its own full-screen dialog container.
### Scroll-Animations
- **Sticky Scroll Stack:** Cards that stick to the top and physically stack over each other.
- **Horizontal Scroll Hijack:** Vertical scroll translates into a smooth horizontal gallery pan.
- **Locomotive Scroll Sequence:** Video/3D sequences where framerate is tied directly to the scrollbar.
- **Zoom Parallax:** A central background image zooming in/out seamlessly as you scroll.
- **Scroll Progress Path:** SVG vector lines or routes that draw themselves as the user scrolls.
- **Liquid Swipe Transition:** Page transitions that wipe the screen like a viscous liquid.
### Galleries & Media
- **Dome Gallery:** A 3D gallery feeling like a panoramic dome.
- **Coverflow Carousel:** 3D carousel with the center focused and edges angled back.
- **Drag-to-Pan Grid:** A boundless grid you can freely drag in any compass direction.
- **Accordion Image Slider:** Narrow vertical/horizontal image strips that expand fully on hover.
- **Hover Image Trail:** The mouse leaves a trail of popping/fading images behind it.
- **Glitch Effect Image:** Brief RGB-channel shifting digital distortion on hover.
### Typography & Text
- **Kinetic Marquee:** Endless text bands that reverse direction or speed up on scroll.
- **Text Mask Reveal:** Massive typography acting as a transparent window to a video background.
- **Text Scramble Effect:** Matrix-style character decoding on load or hover.
- **Circular Text Path:** Text curved along a spinning circular path.
- **Gradient Stroke Animation:** Outlined text with a gradient continuously running along the stroke.
- **Kinetic Typography Grid:** A grid of letters dodging or rotating away from the cursor.
### Micro-Interactions & Effects
- **Particle Explosion Button:** CTAs that shatter into particles upon success.
- **Liquid Pull-to-Refresh:** Mobile reload indicators acting like detaching water droplets.
- **Skeleton Shimmer:** Shifting light reflections moving across placeholder boxes.
- **Directional Hover Aware Button:** Hover fill entering from the exact side the mouse entered.
- **Ripple Click Effect:** Visual waves rippling precisely from the click coordinates.
- **Animated SVG Line Drawing:** Vectors that draw their own contours in real-time.
- **Mesh Gradient Background:** Organic, lava-lamp-like animated color blobs.
- **Lens Blur Depth:** Dynamic focus blurring background UI layers to highlight a foreground action.
## 9. THE "MOTION-ENGINE" BENTO PARADIGM
When generating modern SaaS dashboards or feature sections, you MUST utilize the following "Bento 2.0" architecture and motion philosophy. This goes beyond static cards and enforces a "Vercel-core meets Dribbble-clean" aesthetic heavily reliant on perpetual physics.
### A. Core Design Philosophy
- **Aesthetic:** High-end, minimal, and functional.
- **Palette:** Background in `#f9fafb`. Cards are pure white (`#ffffff`) with a 1px border of `border-slate-200/50`.
- **Surfaces:** Use `rounded-[2.5rem]` for all major containers. Apply a "diffusion shadow" (a very light, wide-spreading shadow, e.g., `shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05)]`) to create depth without clutter.
- **Typography:** Strict `Geist`, `Satoshi`, or `Cabinet Grotesk` font stack. Use subtle tracking (`tracking-tight`) for headers.
- **Labels:** Titles and descriptions must be placed **outside and below** the cards to maintain a clean, gallery-style presentation.
- **Pixel-Perfection:** Use generous `p-8` or `p-10` padding inside cards.
### B. The Animation Engine Specs (Perpetual Motion)
All cards must contain **"Perpetual Micro-Interactions."** Use the following Framer Motion principles:
- **Spring Physics:** No linear easing. Use `type: "spring", stiffness: 100, damping: 20` for a premium, weighty feel.
- **Layout Transitions:** Heavily utilize the `layout` and `layoutId` props to ensure smooth re-ordering, resizing, and shared element state transitions.
- **Infinite Loops:** Every card must have an "Active State" that loops infinitely (Pulse, Typewriter, Float, or Carousel) to ensure the dashboard feels "alive".
- **Performance:** Wrap dynamic lists in `<AnimatePresence>` and optimize for 60fps. **PERFORMANCE CRITICAL:** Any perpetual motion or infinite loop MUST be memoized (React.memo) and completely isolated in its own microscopic Client Component. Never trigger re-renders in the parent layout.
### C. The 5-Card Archetypes (Micro-Animation Specs)
Implement these specific micro-animations when constructing Bento grids (e.g., Row 1: 3 cols | Row 2: 2 cols split 70/30):
1. **The Intelligent List:** A vertical stack of items with an infinite auto-sorting loop. Items swap positions using `layoutId`, simulating an AI prioritizing tasks in real-time.
2. **The Command Input:** A search/AI bar with a multi-step Typewriter Effect. It cycles through complex prompts, including a blinking cursor and a "processing" state with a shimmering loading gradient.
3. **The Live Status:** A scheduling interface with "breathing" status indicators. Include a pop-up notification badge that emerges with an "Overshoot" spring effect, stays for 3 seconds, and vanishes.
4. **The Wide Data Stream:** A horizontal "Infinite Carousel" of data cards or metrics. Ensure the loop is seamless (using `x: ["0%", "-100%"]`) with a speed that feels effortless.
5. **The Contextual UI (Focus Mode):** A document view that animates a staggered highlight of a text block, followed by a "Float-in" of a floating action toolbar with micro-icons.
## 10. FINAL PRE-FLIGHT CHECK
Evaluate your code against this matrix before outputting. This is the **last** filter you apply to your logic.
- [ ] Is global state used appropriately to avoid deep prop-drilling rather than arbitrarily?
- [ ] Is mobile layout collapse (`w-full`, `px-4`, `max-w-7xl mx-auto`) guaranteed for high-variance designs?
- [ ] Do full-height sections safely use `min-h-[100dvh]` instead of the bugged `h-screen`?
- [ ] Do `useEffect` animations contain strict cleanup functions?
- [ ] Are empty, loading, and error states provided?
- [ ] Are cards omitted in favor of spacing where possible?
- [ ] Did you strictly isolate CPU-heavy perpetual animations in their own Client Components?
package.json
-24
View File
@@ -1,24 +0,0 @@
{
"name": "andwati.com",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"format": "prettier --write \"**/*.{html,css,scss,js,json,toml,ya?ml,md}\"",
"format:check": "prettier --check \"**/*.{html,css,scss,js,json,toml,ya?ml,md}\"",
"lint": "markdownlint \"content/**/*.md\"",
"test": "echo \"Error: no test specified\" && exit 1",
"prepare": "husky"
},
"keywords": [],
"author": "",
"license": "ISC",
"packageManager": "[email protected]",
"devDependencies": {
"husky": "^9.1.7",
"markdownlint-cli": "^0.49.0",
"prettier": "^3.9.4",
"prettier-plugin-toml": "^2.0.6",
"wrangler": "^4.107.0"
}
}
pnpm-lock.yaml
Generated
-1527
View File
File diff suppressed because it is too large Load Diff
pnpm-workspace.yaml
-7
View File
@@ -1,7 +0,0 @@
allowBuilds:
esbuild: true
sharp: true
workerd: true
minimumReleaseAgeExclude:
- [email protected]
- [email protected]
sass/_404.scss
+30 -154
View File
@@ -1,174 +1,50 @@
// 404 Terminal Page
// Scoped custom properties switch with html.dark
.term-window {
// Dark mode values (default — site defaults to dark)
--tw-bg: #0d0d0d;
--tw-bar: #1c1c1c;
--tw-border: #2a2a2a;
--tw-text: #cdd6f4;
--tw-prompt: #10b981;
--tw-error: #f38ba8;
--tw-muted: #6c7086;
--tw-link: #89b4fa;
--tw-cursor: #10b981;
}
html:not(.dark) .term-window {
// Light mode: Catppuccin Latte palette
--tw-bg: #eff1f5;
--tw-bar: #e6e9ef;
--tw-border: #ccd0da;
--tw-text: #4c4f69;
--tw-prompt: #40a02b;
--tw-error: #d20f39;
--tw-muted: #7c7f93;
--tw-link: #1e66f5;
--tw-cursor: #40a02b;
}
// 404 — Document Not Found
.notfound-wrap {
min-height: 70dvh;
min-height: 60dvh;
display: flex;
align-items: center;
justify-content: center;
padding: 3rem 0;
}
.term-window {
width: 100%;
max-width: 680px;
background: var(--tw-bg);
border-radius: 10px;
border: 1px solid var(--tw-border);
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
overflow: hidden;
font-family: var(--font-mono);
font-size: clamp(0.78rem, 1.5vw, 0.9rem);
transition:
background-color 0.3s ease,
border-color 0.3s ease;
}
.term-titlebar {
background: var(--tw-bar);
padding: 0.7rem 1rem;
display: flex;
align-items: center;
gap: 0.75rem;
border-bottom: 1px solid var(--tw-border);
user-select: none;
}
.term-dots {
display: flex;
gap: 0.45rem;
span {
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
}
.dot-red {
background: #ff5f57;
}
.dot-yellow {
background: #febc2e;
}
.dot-green {
background: #28c840;
}
}
.term-titlebar-label {
flex: 1;
.case-notice {
max-width: 480px;
text-align: center;
font-size: 0.72rem;
color: var(--tw-muted);
letter-spacing: 0.03em;
}
.term-body {
padding: 1.5rem;
line-height: 1.65;
color: var(--tw-text);
min-height: 260px;
.case-notice-ref {
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent-color);
margin-bottom: 1.5rem;
}
.term-row {
.case-notice-title {
margin-top: 0;
}
.case-notice-body {
color: var(--text-muted);
max-width: none;
}
.case-notice-links {
display: flex;
align-items: baseline;
gap: 0;
white-space: nowrap;
overflow: hidden;
}
.term-ps1 {
color: var(--tw-prompt);
flex-shrink: 0;
white-space: nowrap;
pointer-events: none;
}
.term-input {
color: var(--tw-text);
overflow: hidden;
}
.term-out {
margin-bottom: 0.9rem;
}
.term-out-error {
color: var(--tw-error);
}
.term-out-muted {
color: var(--tw-muted);
margin-bottom: 0.9rem;
}
.term-out-ls {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
margin-bottom: 0.9rem;
justify-content: center;
gap: 1.5rem;
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--border-color);
font-family: var(--font-mono);
font-size: 0.9rem;
a {
color: var(--tw-link);
text-decoration: none;
font-weight: 500;
&::before {
content: '→ ';
color: var(--tw-prompt);
}
color: var(--text-color);
&:hover {
color: var(--tw-prompt);
text-decoration: underline;
color: var(--accent-color);
}
}
}
.term-cursor {
display: inline-block;
width: 0.55em;
height: 1.1em;
background: var(--tw-cursor);
vertical-align: text-bottom;
animation: blink-cursor 1s step-end infinite;
margin-left: 0.15ch;
}
@keyframes blink-cursor {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
sass/_article.scss
+7 -22
View File
@@ -15,7 +15,6 @@
height: 100%;
width: 0%;
background-color: var(--accent-color);
box-shadow: 0 0 10px rgba(16, 185, 129, 0.5); /* Glowing emerald accent */
transition: width 0.1s cubic-bezier(0.25, 0.8, 0.25, 1);
}
@@ -103,7 +102,6 @@
background: var(--surface-color);
border: 1px solid var(--border-color);
border-left: 3px solid var(--accent-color);
border-radius: 12px;
padding: 1.25rem 1.5rem;
margin-bottom: 2rem;
}
@@ -138,7 +136,6 @@
color: var(--text-muted);
background: var(--bg-color);
border: 1px solid var(--border-color);
border-radius: 99px;
padding: 0.1em 0.6em;
white-space: nowrap;
}
@@ -192,7 +189,6 @@
background: var(--surface-color);
border: 1px solid var(--border-color);
padding: 1.5rem;
border-radius: 12px;
margin-bottom: 3rem;
summary {
@@ -251,15 +247,6 @@
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
.tag {
background: var(--surface-color);
border: 1px solid var(--border-color);
padding: 0.25rem 0.75rem;
border-radius: 99px;
font-size: 0.85rem;
font-family: var(--font-mono);
}
}
.social-share {
@@ -429,7 +416,6 @@
}
&::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: 4px;
}
}
}
@@ -492,7 +478,6 @@
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--border-color);
margin: 2rem 0;
@@ -514,7 +499,6 @@
.callout {
margin: 2rem 0;
padding: 1.25rem 1.5rem;
border-radius: 6px;
border-left: 4px solid var(--callout-color, var(--border-color));
background: var(--surface-color);
color: var(--text-color);
@@ -564,8 +548,8 @@
}
&.callout-tip {
--callout-color: #10b981; // Emerald
background: rgba(16, 185, 129, 0.05);
--callout-color: #16a34a; // Green
background: rgba(22, 163, 74, 0.05);
}
&.callout-danger {
@@ -574,13 +558,17 @@
}
}
.comments {
margin-top: 4rem;
}
// ──────────────────────────────────────────
// Related Posts
// ──────────────────────────────────────────
.related-posts-section {
margin-top: 4rem;
padding-top: 2rem;
border-top: 1px dashed var(--border-color);
border-top: 1px solid var(--border-color);
h3 {
margin-bottom: 2rem;
@@ -605,7 +593,6 @@
padding-bottom: 0 !important;
background: var(--surface-color);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 1.5rem !important;
height: 100%;
display: flex;
@@ -614,8 +601,6 @@
&:hover {
border-color: var(--accent-color);
transform: translateY(-4px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.item-snippet {
sass/_feed.scss
+139 -6
View File
@@ -8,15 +8,22 @@
.post-feed {
display: flex;
flex-direction: column;
gap: 3rem;
margin-top: 2rem;
margin-top: 1rem;
}
.post-feed .feed-item {
padding: 2rem 0;
border-bottom: 1px solid var(--border-color);
&:first-child {
padding-top: 0;
}
}
// Homepage "View all posts" CTA
.view-all-posts {
display: flex;
justify-content: center;
margin: 3rem auto 0;
margin-top: 3rem;
max-width: var(--content-width);
}
@@ -26,7 +33,7 @@
gap: 0.5rem;
padding: 0.6rem 1.5rem;
border: 1px solid var(--accent-color);
border-radius: 6px;
border-radius: 2px;
font-family: var(--font-mono);
font-size: 0.875rem;
color: var(--accent-color);
@@ -54,13 +61,133 @@
display: block;
}
// Homepage post list (post-card.html) — a numbered index of entries
.feed-eyebrow {
display: flex;
align-items: baseline;
justify-content: space-between;
max-width: var(--content-width);
margin-bottom: 1.5rem;
font-family: var(--font-mono);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-muted);
}
.post-feed-list {
max-width: var(--content-width);
display: flex;
flex-direction: column;
}
.feed-item.card {
display: flex;
gap: 1.25rem;
border-bottom: 1px solid var(--border-color);
padding: 2rem 0;
&:first-child {
padding-top: 0;
}
.item-title {
font-size: 1.25rem;
margin-bottom: 0.5rem;
font-weight: 600;
a {
transition: color 0.2s ease;
}
}
&:hover .item-title a {
color: var(--accent-color);
}
}
.item-index {
font-family: var(--font-mono);
font-size: 0.85rem;
color: var(--text-muted);
padding-top: 0.3rem;
flex-shrink: 0;
}
.item-body {
min-width: 0;
flex: 1;
}
.item-meta {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.85rem;
color: var(--text-muted);
margin-bottom: 1rem;
font-family: var(--font-mono);
}
.item-meta-sep {
opacity: 0.5;
}
.item-snippet {
color: var(--text-color);
opacity: 0.9;
margin-bottom: 1rem;
p {
margin: 0;
}
}
.item-footer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
font-size: 0.85rem;
}
.item-readmore {
display: inline-flex;
align-items: center;
gap: 0.35rem;
color: var(--accent-color);
.readmore-arrow {
transition: transform 0.2s ease;
}
&:hover .readmore-arrow {
transform: translateX(4px);
}
}
.item-tags {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.item-link {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.item-date-row {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.25rem;
}
.item-date {
font-family: var(--font-mono);
font-size: 0.85rem;
color: var(--text-muted);
font-variant-numeric: tabular-nums;
@@ -68,6 +195,12 @@
text-transform: uppercase;
}
.item-reading-time {
color: var(--text-muted);
font-size: 0.85rem;
font-family: var(--font-mono);
}
.item-title {
margin: 0;
font-size: clamp(1.5rem, 2vw, 2rem);
@@ -112,7 +245,7 @@
min-width: 2.25rem;
height: 2.25rem;
padding: 0 0.5rem;
border-radius: 6px;
border-radius: 2px;
border: 1px solid var(--border-color);
background: var(--surface-color);
color: var(--text-muted);
sass/_footer.scss
+4 -3
View File
@@ -1,9 +1,10 @@
// Footer
.site-footer {
padding: 3rem 0;
border-top: 1px solid var(--border-color);
padding: 2rem 0 3rem;
border-top: 3px solid var(--text-color);
color: var(--text-muted);
font-size: 0.9rem;
font-size: 0.85rem;
font-family: var(--font-mono);
display: flex;
justify-content: space-between;
}
sass/_header.scss
+47 -16
View File
@@ -5,9 +5,7 @@
top: 0;
z-index: 50;
background-color: var(--bg-color);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border-color);
border-bottom: 2px solid var(--text-color);
}
.nav-container {
@@ -92,18 +90,28 @@
}
.nav-links {
display: none !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 0 !important;
width: 100%;
order: 10; // push below nav-controls
padding: 1rem 0;
border-top: 1px solid var(--border-color);
margin-top: 0.5rem;
padding: 0;
margin-top: 0;
border-top: 1px solid transparent;
max-height: 0;
opacity: 0;
overflow: hidden;
transition:
max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.2s ease;
&.is-open {
display: flex !important;
padding: 1rem 0;
margin-top: 0.5rem;
border-top-color: var(--border-color);
max-height: 320px;
opacity: 1;
}
.nav-item {
@@ -118,35 +126,58 @@
}
}
// Brand reads like a running header on a printed document — quiet,
// small, letter-spaced — not competing with the masthead title below it.
.brand-text {
font-weight: 700;
font-size: 1.2rem;
letter-spacing: -0.01em;
font-family: var(--font-mono);
font-weight: 600;
font-size: 0.8rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
}
.brand-link:hover .brand-text {
color: var(--accent-color);
}
.nav-links {
display: flex;
align-items: center;
gap: 1.5rem;
gap: 1.75rem;
}
.nav-item {
font-family: var(--font-mono);
font-weight: 500;
font-size: 0.95rem;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-color);
position: relative;
}
.nav-item::after {
content: '';
position: absolute;
width: 0;
width: 100%;
height: 2px;
bottom: -4px;
left: 0;
background-color: var(--accent-color);
transition: var(--transition-smooth);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-item:hover::after {
width: 100%;
transform: scaleX(1);
}
.nav-item.is-active {
color: var(--accent-color);
&::after {
transform: scaleX(1);
}
}
sass/_hero.scss
+50
View File
@@ -4,6 +4,10 @@
max-width: 800px;
}
.hero-compact {
padding-bottom: 2rem;
}
.hero-title {
color: var(--text-color);
}
@@ -12,3 +16,49 @@
font-size: clamp(1.1rem, 1.5vw, 1.3rem);
color: var(--text-muted);
}
// Homepage masthead
.masthead {
padding: 4rem 0 3rem;
max-width: var(--content-width);
border-bottom: 3px solid var(--text-color);
}
.masthead-kicker {
font-family: var(--font-mono);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent-color);
margin-bottom: 1rem;
}
.masthead-title {
margin-top: 0;
}
// Colophon-style contact line — quiet, small, middot-separated
.masthead-links {
display: flex;
flex-wrap: wrap;
row-gap: 0.4rem;
margin-top: 2rem;
font-family: var(--font-mono);
font-size: 0.8rem;
letter-spacing: 0.02em;
a {
color: var(--text-muted);
&:hover {
color: var(--accent-color);
}
&:not(:last-child)::after {
content: '·';
margin: 0 0.75rem;
color: var(--text-muted);
opacity: 0.5;
}
}
}
sass/_lists.scss
+100
View File
@@ -0,0 +1,100 @@
// Archive & Tags list pages
.list-page-header {
margin-bottom: 3rem;
}
.list-page-title {
font-size: clamp(2.5rem, 5vw, 4.5rem);
}
.term-hash {
color: var(--text-muted);
}
.archive-list {
max-width: 65ch;
margin: 0 auto;
}
.archive-year {
margin-bottom: 2rem;
}
.archive-year-title {
font-size: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.archive-items {
list-style: none;
padding-left: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.archive-item {
display: flex;
gap: 1rem;
align-items: baseline;
}
.archive-date {
font-family: var(--font-mono);
color: var(--text-muted);
font-size: 0.95rem;
white-space: nowrap;
}
.archive-link {
color: var(--accent-color);
font-weight: 500;
font-size: 1.05rem;
}
// Tags index
.tags-page {
max-width: 65ch;
margin: 0 auto;
padding-top: 4rem;
text-align: center;
}
.tags-page-header {
margin-bottom: 3rem;
}
.page-title {
font-size: 2rem;
font-weight: 600;
}
.tags-container {
display: flex;
flex-wrap: wrap;
gap: 2rem;
justify-content: center;
align-items: center;
}
.tag-link {
font-size: 1.1rem;
color: var(--text-color);
font-weight: 400;
display: inline-flex;
align-items: flex-start;
&:hover {
color: var(--accent-color);
}
}
.tag-count {
font-size: 0.7em;
color: var(--text-muted);
margin-left: 0.15rem;
margin-top: 0.1rem;
}
sass/_scroll-top.scss
+7 -3
View File
@@ -8,7 +8,7 @@
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: 50%;
border-radius: 2px;
background: var(--bg-color);
color: var(--accent-color);
border: 1px solid var(--accent-color);
@@ -19,7 +19,11 @@
opacity: 0;
visibility: hidden;
transform: translateY(1rem);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
transition:
transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
visibility 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
box-shadow 0.2s ease-out;
// Visible state triggered by JS
&.visible {
@@ -33,7 +37,7 @@
background: var(--accent-color);
color: var(--bg-color);
transform: translateY(-0.25rem);
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2); // Emerald glow matching accent
box-shadow: 0 4px 12px color-mix(in srgb, var(--accent-color) 20%, transparent);
}
&:hover svg {
sass/_search.scss
+6 -8
View File
@@ -5,9 +5,7 @@
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
background: rgba(0, 0, 0, 0.5);
z-index: 10000;
display: flex;
justify-content: center;
@@ -34,8 +32,8 @@
max-width: 600px;
background: var(--bg-color);
border: 1px solid var(--border-color);
border-radius: 12px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
border-radius: 2px;
box-shadow: 0 12px 32px var(--shadow-color);
transform: translateY(-20px) scale(0.98);
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
display: flex;
@@ -61,8 +59,8 @@
background: transparent;
border: none;
color: var(--text-color);
font-family: var(--font-sans);
font-size: 1.1rem;
font-family: var(--font-mono);
font-size: 1rem;
outline: none;
&::placeholder {
@@ -112,7 +110,7 @@
display: flex;
flex-direction: column;
padding: 0.75rem 1rem;
border-radius: 8px;
border-radius: 2px;
text-decoration: none;
color: var(--text-color);
transition: background-color 0.15s ease;
sass/_typography.scss
+12 -11
View File
@@ -5,9 +5,10 @@ h3,
h4,
h5,
h6 {
font-family: var(--font-display);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
line-height: 1.15;
letter-spacing: -0.01em;
margin-top: 2em;
margin-bottom: 0.75em;
overflow-wrap: break-word;
@@ -114,11 +115,11 @@ pre {
pre {
position: relative;
padding: 1.25rem;
border-radius: 8px;
border-radius: 2px;
overflow-x: auto;
max-width: 100%;
border: 1px solid var(--border-color);
background: #1e1e2e;
background: #282828; // Gruvbox Dark bg0 (matches [markdown.highlighting] theme)
// Scrollbars visible on desktop, hidden on mobile
@media (max-width: 640px) {
scrollbar-width: none;
@@ -138,10 +139,10 @@ pre {
justify-content: center;
width: 32px;
height: 32px;
background: rgba(255, 255, 255, 0.1);
color: #cdd6f4;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 4px;
background: rgba(235, 219, 178, 0.1);
color: #ebdbb2;
border: 1px solid rgba(235, 219, 178, 0.2);
border-radius: 2px;
cursor: pointer;
opacity: 1;
transition:
@@ -154,8 +155,8 @@ pre {
}
&:hover {
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
background: rgba(235, 219, 178, 0.2);
color: #fbf1c7;
}
&.copied {
@@ -170,7 +171,7 @@ pre {
code {
background: var(--surface-color);
padding: 0.2em 0.4em;
border-radius: 4px;
border-radius: 2px;
color: var(--accent-color);
border: 1px solid var(--border-color);
}
sass/_utilities.scss
+32 -1
View File
@@ -1,6 +1,37 @@
// Tag chip — a small filed label, shared by post-card and post-tags
.tag {
display: inline-block;
background: var(--surface-color);
border: 1px solid var(--border-color);
padding: 0.2rem 0.6rem;
border-radius: 2px;
font-size: 0.8rem;
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--text-muted);
transition: var(--transition-smooth);
&:hover {
color: var(--accent-color);
border-color: var(--accent-color);
}
}
// Heavy hairline rule — the site's one recurring structural device
// (masthead, between list entries, above case-reference blocks)
.rule {
border: none;
border-top: 3px solid var(--text-color);
}
// Utilities / Interactions
.hover-scale {
transition: var(--transition-spring);
transition: transform 140ms ease-out;
&:hover {
transform: scale(1.02);
}
&:active {
transform: scale(0.98);
sass/_variables.scss
+36 -25
View File
@@ -1,35 +1,46 @@
// Premium Design Variables
// Design Variables — "Case File": a declassified incident-report aesthetic.
// One accent only; flat colors + hairline borders, no gradients or glass blur.
:root {
--bg-color: #f9fafb;
--text-color: #1a1a1a;
--text-muted: #6b7280;
--accent-color: #10b981; // Emerald
--accent-hover: #059669; // Emerald darker
--surface-color: #ffffff;
--border-color: rgba(0, 0, 0, 0.05);
--shadow-color: rgba(0, 0, 0, 0.05);
--bg-color: #e9e9e2; // paper (cool bone, not warm cream)
--surface-color: #dedecf; // slightly recessed paper — cards, code blocks
--text-color: #17181c; // ink
--text-muted: #68675f; // faded ink
--accent-color: #b42318; // classified-stamp red
--accent-hover: #8e1b12;
--border-color: rgba(23, 24, 28, 0.16);
--shadow-color: rgba(23, 24, 28, 0.08);
--font-sans: 'Outfit', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--font-sans: 'Source Serif 4', Georgia, serif; // body copy
--font-display: 'IBM Plex Serif', Georgia, serif; // headings, masthead
--font-mono: 'JetBrains Mono', monospace; // case-reference lines, tags, code
--transition-spring: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
--transition-smooth: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
--transition-smooth:
transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
--scrollbar-track: #e5e7eb;
--scrollbar-thumb: #9ca3af;
--scrollbar-thumb-hover: #10b981;
--scrollbar-track: #dedecf;
--scrollbar-thumb: #b0afa2;
--scrollbar-thumb-hover: #b42318;
// Shared reading column — keeps the masthead rule, eyebrow, and post
// list aligned to the same right edge instead of drifting per-component.
--content-width: 700px;
}
// Dark Mode Overrides
// Dark mode — same document, read at night
html.dark {
--bg-color: #0a0a0a;
--text-color: #f9fafb;
--text-muted: #a1a1aa;
--surface-color: #141414;
--border-color: rgba(255, 255, 255, 0.1);
--bg-color: #131311;
--surface-color: #1b1a17;
--text-color: #e9e7de;
--text-muted: #8b8a80;
--accent-color: #ff5a46;
--accent-hover: #ff7c6b;
--border-color: rgba(233, 231, 222, 0.14);
--shadow-color: rgba(0, 0, 0, 0.5);
--scrollbar-track: #0f0f0f;
--scrollbar-thumb: #2a2a2a;
--scrollbar-thumb-hover: #10b981;
--scrollbar-track: #1b1a17;
--scrollbar-thumb: #3a382f;
--scrollbar-thumb-hover: #ff5a46;
}
sass/main.scss
+1
View File
@@ -9,6 +9,7 @@
@import 'theme';
@import 'hero';
@import 'feed';
@import 'lists';
@import 'article';
@import 'footer';
@import 'search';
skills-lock.json
+29
View File
@@ -0,0 +1,29 @@
{
"version": 1,
"skills": {
"animation-vocabulary": {
"source": "emilkowalski/skill",
"sourceType": "github",
"skillPath": "skills/animation-vocabulary/SKILL.md",
"computedHash": "39319fc9a33c15be08666b3685f58666f042ff36bb902b7814c0834a5ba99df4"
},
"emil-design-eng": {
"source": "emilkowalski/skill",
"sourceType": "github",
"skillPath": "skills/emil-design-eng/SKILL.md",
"computedHash": "8bdf9e4e6de7a4969147bf4828a4ad2c5aacd9fba4b690b250a85e0467ca387d"
},
"frontend-design": {
"source": "anthropics/skills",
"sourceType": "github",
"skillPath": "skills/frontend-design/SKILL.md",
"computedHash": "4eabc66183767153e404b39d1b839b1c37f2d82d86f0a0d7e880a579d8d62336"
},
"review-animations": {
"source": "emilkowalski/skill",
"sourceType": "github",
"skillPath": "skills/review-animations/SKILL.md",
"computedHash": "ca04aaa0a815f05e0910ded8fedbfbdfe0acdec8f52dfbb88277890070d134d4"
}
}
}
static/css/fonts.css
+31 -22
View File
@@ -1,41 +1,50 @@
/* Outfit */
/* IBM Plex Serif — display/headings */
@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('../fonts/outfit/outfit-v15-latin-300.woff2') format('woff2');
}
@font-face {
font-family: 'Outfit';
font-family: 'IBM Plex Serif';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/outfit/outfit-v15-latin-regular.woff2') format('woff2');
src: url('../fonts/ibm-plex-serif/ibm-plex-serif-v20-latin-regular.woff2') format('woff2');
}
@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/outfit/outfit-v15-latin-500.woff2') format('woff2');
}
@font-face {
font-family: 'Outfit';
font-family: 'IBM Plex Serif';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/outfit/outfit-v15-latin-600.woff2') format('woff2');
src: url('../fonts/ibm-plex-serif/ibm-plex-serif-v20-latin-600.woff2') format('woff2');
}
@font-face {
font-family: 'Outfit';
font-family: 'IBM Plex Serif';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/outfit/outfit-v15-latin-700.woff2') format('woff2');
src: url('../fonts/ibm-plex-serif/ibm-plex-serif-v20-latin-700.woff2') format('woff2');
}
/* JetBrains Mono (official release — full ligature support) */
/* Source Serif 4 — body copy */
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/source-serif-4/source-serif-4-v14-latin-regular.woff2') format('woff2');
}
@font-face {
font-family: 'Source Serif 4';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('../fonts/source-serif-4/source-serif-4-v14-latin-italic.woff2') format('woff2');
}
@font-face {
font-family: 'Source Serif 4';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/source-serif-4/source-serif-4-v14-latin-600.woff2') format('woff2');
}
/* JetBrains Mono (official release — full ligature support) — case-reference lines, tags, code */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
static/fonts/ibm-plex-serif/ibm-plex-serif-v20-latin-600.woff2
BIN
View File
Binary file not shown.
static/fonts/ibm-plex-serif/ibm-plex-serif-v20-latin-700.woff2
BIN
View File
Binary file not shown.
static/fonts/ibm-plex-serif/ibm-plex-serif-v20-latin-regular.woff2
BIN
View File
Binary file not shown.
static/fonts/jetbrains-mono/jetbrains-mono-v24-latin-700.woff2
BIN
View File
Binary file not shown.
static/fonts/jetbrains-mono/jetbrains-mono-v24-latin-italic.woff2
BIN
View File
Binary file not shown.
static/fonts/jetbrains-mono/jetbrains-mono-v24-latin-regular.woff2
BIN
View File
Binary file not shown.
static/fonts/outfit/outfit-v15-latin-300.woff2
BIN
View File
Binary file not shown.
static/fonts/outfit/outfit-v15-latin-500.woff2
BIN
View File
Binary file not shown.
static/fonts/outfit/outfit-v15-latin-600.woff2
BIN
View File
Binary file not shown.
static/fonts/outfit/outfit-v15-latin-700.woff2
BIN
View File
Binary file not shown.
static/fonts/outfit/outfit-v15-latin-regular.woff2
BIN
View File
Binary file not shown.
static/fonts/source-serif-4/source-serif-4-v14-latin-600.woff2
BIN
View File
Binary file not shown.
static/fonts/source-serif-4/source-serif-4-v14-latin-italic.woff2
BIN
View File
Binary file not shown.
static/fonts/source-serif-4/source-serif-4-v14-latin-regular.woff2
BIN
View File
Binary file not shown.
static/js/404.js
-108
View File
@@ -1,108 +0,0 @@
(function () {
'use strict';
var body = document.getElementById('term-body');
if (!body) return;
var path = window.location.pathname;
var promptUser = body.dataset.prompt || 'user@pwnbox';
var hostname = body.dataset.hostname || 'pwnbox';
var whoami = body.dataset.whoami || 'l0st_r3ader';
var links = [
{ href: body.dataset.linkHome, label: '~/home' },
{ href: body.dataset.linkPosts, label: '~/posts' },
{ href: body.dataset.linkTags, label: '~/tags' },
];
var steps = [
{ type: 'cmd', text: 'cd ' + path },
{ type: 'out-error', text: 'bash: cd: ' + path + ': No such file or directory' },
{ type: 'cmd', text: 'whoami' },
{ type: 'out', text: whoami },
{ type: 'cmd', text: 'ls ~/recovery/' },
{ type: 'ls' },
];
var CHAR_DELAY = 28;
var LINE_DELAY = 180;
function ps1() {
var s = document.createElement('span');
s.className = 'term-ps1';
s.textContent = promptUser + '@' + hostname + ':~$ ';
return s;
}
function appendCmdLine(text, callback) {
var row = document.createElement('div');
row.className = 'term-row';
row.appendChild(ps1());
var input = document.createElement('span');
input.className = 'term-input';
row.appendChild(input);
body.appendChild(row);
var i = 0;
function tick() {
if (i < text.length) {
input.textContent += text[i++];
setTimeout(tick, CHAR_DELAY);
} else {
setTimeout(callback, LINE_DELAY);
}
}
tick();
}
function appendOut(text, extraClass, callback) {
var div = document.createElement('div');
div.className = 'term-out' + (extraClass ? ' ' + extraClass : '');
div.textContent = text;
body.appendChild(div);
setTimeout(callback, LINE_DELAY);
}
function appendLs(callback) {
var div = document.createElement('div');
div.className = 'term-out-ls';
links.forEach(function (l) {
var a = document.createElement('a');
a.href = l.href;
a.textContent = l.label;
div.appendChild(a);
});
body.appendChild(div);
setTimeout(callback, LINE_DELAY);
}
function appendCursor() {
var row = document.createElement('div');
row.className = 'term-row';
row.appendChild(ps1());
var cur = document.createElement('span');
cur.className = 'term-cursor';
cur.setAttribute('aria-hidden', 'true');
row.appendChild(cur);
body.appendChild(row);
}
function runSteps(i) {
if (i >= steps.length) {
appendCursor();
return;
}
var step = steps[i];
var next = function () {
runSteps(i + 1);
};
if (step.type === 'cmd') appendCmdLine(step.text, next);
else if (step.type === 'out-error') appendOut(step.text, 'term-out-error', next);
else if (step.type === 'out') appendOut(step.text, 'term-out-muted', next);
else if (step.type === 'ls') appendLs(next);
else next();
}
runSteps(0);
})();
static/js/theme.js
+25
View File
@@ -60,4 +60,29 @@ document.addEventListener('DOMContentLoaded', () => {
});
// Initial sync in case banner is already mounted
setTimeout(syncCCTheme, 100);
// Sync Utterances (comments iframe) theme with the site theme.
// The iframe only reads its initial `theme` attribute once, so later
// changes must go through postMessage per the utterances protocol.
const syncUtterancesTheme = () => {
const commentsEl = document.getElementById('comments');
const frame = document.querySelector('.utterances-frame');
if (!commentsEl || !frame) return;
const theme = htmlElement.classList.contains('dark')
? commentsEl.dataset.utterancesThemeDark
: commentsEl.dataset.utterancesThemeLight;
frame.contentWindow.postMessage({ type: 'set-theme', theme }, 'https://utteranc.es');
};
new MutationObserver(syncUtterancesTheme).observe(htmlElement, {
attributes: true,
attributeFilter: ['class'],
});
// The iframe loads asynchronously, so poll briefly until it's mounted.
let utterancesTries = 0;
const utterancesPoll = setInterval(() => {
if (document.querySelector('.utterances-frame') || ++utterancesTries > 20) {
clearInterval(utterancesPoll);
syncUtterancesTheme();
}
}, 250);
});
templates/404.html
+11 -25
View File
@@ -1,35 +1,21 @@
{% extends "base.html" %}
{% block title %}404 — command not found | {{ config.title }}{% endblock title %}
{% block title %}404 — Document Not Found | {{ config.title }}{% endblock title %}
{% block description %}The page you requested could not be found.{% endblock description %}
{% block content %}
<div class="notfound-wrap">
<div class="term-window" role="main" aria-label="404 error terminal">
<div class="term-titlebar" aria-hidden="true">
<div class="term-dots">
<span class="dot-red"></span>
<span class="dot-yellow"></span>
<span class="dot-green"></span>
</div>
<span class="term-titlebar-label">bash — {{ config.extra.terminal_hostname | default(value="pwnbox") }}</span>
<div class="case-notice">
<p class="case-notice-ref">STATUS: NOT FOUND</p>
<h1 class="case-notice-title">Document Not Found</h1>
<p class="case-notice-body">
This page couldn't be located in the archive. It may have been moved, renamed, or never filed.
</p>
<div class="case-notice-links">
<a href="{{ get_url(path="") }}">Home</a>
<a href="{{ get_url(path="/posts") }}">Posts</a>
<a href="{{ get_url(path="/tags") }}">Tags</a>
</div>
<div class="term-body" id="term-body"
data-link-home="{{ get_url(path="") }}"
data-link-posts="{{ get_url(path="/posts") }}"
data-link-tags="{{ get_url(path="/tags") }}"
data-prompt="{{ config.extra.terminal_prompt_user | default(value="user@pwnbox") }}"
data-hostname="{{ config.extra.terminal_hostname | default(value="pwnbox") }}"
data-whoami="{{ config.extra.terminal_whoami | default(value="l0st_r3ader") }}">
<!-- lines injected by 404.js -->
</div>
</div>
</div>
{% endblock content %}
{% block scripts %}
<script defer src="{{ get_url(path="js/404.js") }}"></script>
{% endblock scripts %}
templates/archive.html
+9 -35
View File
@@ -1,46 +1,20 @@
{% extends "base.html" %} {% block title %}{{ section.title }} | {{ config.title }}{% endblock title
%} {% block content %}
<div class="post-detail">
<header class="post-header" style="margin-bottom: 3rem">
<h1 class="post-title" style="font-size: clamp(2.5rem, 5vw, 4.5rem)">Archive</h1>
<header class="post-header list-page-header">
<h1 class="post-title list-page-title">Archive</h1>
</header>
<div class="archive-list" style="max-width: 65ch; margin: 0 auto">
<div class="archive-list">
{% set section = get_section(path="posts/_index.md") %} {% for year, posts in section.pages |
sort(attribute="date") | reverse | group_by(attribute="year") %}
<div class="archive" style="margin-bottom: 2rem">
<h2
style="font-size: 1.5rem; color: var(--text-color); margin-bottom: 1rem; margin-top: 2rem"
>
{{ year }}
</h2>
<ul
style="
list-style-type: none;
padding-left: 1rem;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
"
>
<div class="archive-year">
<h2 class="archive-year-title">{{ year }}</h2>
<ul class="archive-items">
{% for post in posts %}
<li class="hover-scale" style="display: flex; gap: 1rem; align-items: baseline">
<time
datetime="{{ post.date }}"
style="
color: var(--text-muted);
font-size: 0.95rem;
white-space: nowrap;
font-family: var(--font-mono);
"
>{{ post.date | date(format="%d-%b") }}</time
>
<a
href="{{ post.permalink }}"
style="color: var(--accent-color); font-weight: 500; font-size: 1.05rem"
>{{ post.title }}</a
>
<li class="archive-item hover-scale">
<time datetime="{{ post.date }}" class="archive-date">{{ post.date | date(format="%d-%b") }}</time>
<a href="{{ post.permalink }}" class="archive-link">{{ post.title }}</a>
</li>
{% endfor %}
</ul>
templates/base.html
+18 -19
View File
@@ -190,32 +190,32 @@
--cc-btn-primary-hover-bg: var(--accent-hover);
--cc-btn-primary-hover-border-color: var(--accent-hover);
--cc-toggle-on-bg: var(--accent-color);
--cc-font-family: 'Outfit', sans-serif;
--cc-btn-border-radius: 6px;
--cc-modal-border-radius: 10px;
--cc-font-family: 'Source Serif 4', Georgia, serif;
--cc-btn-border-radius: 2px;
--cc-modal-border-radius: 2px;
}
/* Dark mode — synced with html.dark via darkMode: ['class', 'dark'] */
#cc-main.cc--darkmode {
--cc-bg: #111111;
--cc-primary-color: #f4f4f5;
--cc-secondary-color: #a1a1aa;
--cc-bg: #1b1a17;
--cc-primary-color: #e9e7de;
--cc-secondary-color: #8b8a80;
--cc-btn-primary-bg: var(--accent-color);
--cc-btn-primary-color: #ffffff;
--cc-btn-primary-border-color: var(--accent-color);
--cc-btn-primary-hover-bg: var(--accent-hover);
--cc-btn-primary-hover-border-color: var(--accent-hover);
--cc-btn-secondary-bg: rgba(255,255,255,0.06);
--cc-btn-secondary-color: #a1a1aa;
--cc-btn-secondary-border-color: rgba(255,255,255,0.1);
--cc-btn-secondary-hover-bg: rgba(255,255,255,0.12);
--cc-btn-secondary-hover-color: #f4f4f5;
--cc-separator-border-color: rgba(255,255,255,0.1);
--cc-cookie-category-block-bg: rgba(255,255,255,0.04);
--cc-cookie-category-block-border: rgba(255,255,255,0.08);
--cc-btn-secondary-bg: rgba(233,231,222,0.06);
--cc-btn-secondary-color: #8b8a80;
--cc-btn-secondary-border-color: rgba(233,231,222,0.1);
--cc-btn-secondary-hover-bg: rgba(233,231,222,0.12);
--cc-btn-secondary-hover-color: #e9e7de;
--cc-separator-border-color: rgba(233,231,222,0.1);
--cc-cookie-category-block-bg: rgba(233,231,222,0.04);
--cc-cookie-category-block-border: rgba(233,231,222,0.08);
--cc-toggle-on-bg: var(--accent-color);
--cc-footer-bg: #0a0a0a;
--cc-footer-border-color: rgba(255,255,255,0.08);
--cc-footer-bg: #131311;
--cc-footer-border-color: rgba(233,231,222,0.08);
}
/* Accent top border, no default box-shadow */
@@ -227,12 +227,11 @@
{% block head %}{% endblock head %}
<!-- Font preloads (eliminate FOUT on first paint) -->
<link rel="preload" href="{{ get_url(path="fonts/outfit/outfit-v15-latin-regular.woff2") }}" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="{{ get_url(path="fonts/jetbrains-mono/JetBrainsMono-Regular.woff2") }}" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="{{ get_url(path="fonts/source-serif-4/source-serif-4-v14-latin-regular.woff2") }}" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="{{ get_url(path="fonts/ibm-plex-serif/ibm-plex-serif-v20-latin-700.woff2") }}" as="font" type="font/woff2" crossorigin>
<!-- CSS -->
<link rel="stylesheet" href="{{ get_url(path="main.css") }}">
<link rel="stylesheet" href="{{ get_url(path="css/syntax.css") }}">
<!-- Fonts (self-hosted) -->
<link rel="stylesheet" href="{{ get_url(path="css/fonts.css") }}">
templates/index.html
+7 -5
View File
@@ -30,11 +30,13 @@ block og_url %}{{ config.base_url }}/{% endblock og_url %} {% block head %}
</script>
{% endblock head %} {% block content %} {% include "partials/profile.html" %}
<div
class="post-feed-list"
style="max-width: 65ch; margin: 0 auto; display: flex; flex-direction: column; gap: 2.5rem"
>
{% set section = get_section(path="posts/_index.md") %}
{% set section = get_section(path="posts/_index.md") %}
<p class="feed-eyebrow">
<span>Recent Entries</span>
<span>{{ section.pages | length }} filed</span>
</p>
<div class="post-feed-list">
{% set post_limit = config.extra.homepage_post_limit | default(value=3) %}
{% for page in section.pages | slice(end=post_limit) %} {% include "partials/post-card.html" %} {% endfor %}
</div>
templates/page.html
+1 -2
View File
@@ -108,7 +108,6 @@
<div class="post-meta">
{% if page.date %}
<span class="post-meta-item">
<span class="post-meta-label">Posted</span>
<time datetime="{{ page.date }}">{{ page.date | date(format="%B %e, %Y") }}</time>
</span>
{% endif %}
@@ -145,7 +144,7 @@
<div class="post-tags">
{% if page.taxonomies.tags %}
{% for tag in page.taxonomies.tags %}
<span class="tag">#{{ tag }}</span>
<a href="{{ get_taxonomy_url(kind="tags", name=tag) }}" class="tag">#{{ tag }}</a>
{% endfor %}
{% endif %}
</div>
templates/partials/comments.html
+3 -1
View File
@@ -1,6 +1,8 @@
{% if config.extra.enable_comments and config.extra.utterances_repo and page %}
{% if page.extra.comments is not defined or page.extra.comments %}
<div class="comments" id="comments" style="margin-top: 4rem;">
<div class="comments" id="comments"
data-utterances-theme-dark="{{ config.extra.utterances_theme | default(value="github-dark") }}"
data-utterances-theme-light="{{ config.extra.utterances_theme_light | default(value="github-light") }}">
<script src="https://utteranc.es/client.js"
repo="{{ config.extra.utterances_repo }}"
issue-term="pathname"
templates/partials/header.html
+4 -2
View File
@@ -1,7 +1,7 @@
<header class="site-header">
<nav class="nav-container">
<a href="{{ get_url(path="") }}" class="brand-link">
<span class="brand-text">{{ config.title | default(value="pwna4profit") }}</span>
<span class="brand-text">{{ config.title }}</span>
</a>
<div class="nav-right">
@@ -9,7 +9,9 @@
<div id="nav-links" class="nav-links">
{% if config.extra.menu %}
{% for item in config.extra.menu %}
<a href="{{ get_url(path=item.url) }}" class="nav-item">{{ item.name }}</a>
{% set current = current_path | default(value="") %}
{% set is_active = item.match and current is starting_with(item.match) %}
<a href="{{ get_url(path=item.url) }}" class="nav-item{% if is_active %} is-active{% endif %}"{% if is_active %} aria-current="page"{% endif %}>{{ item.name }}</a>
{% endfor %}
{% endif %}
</div>
templates/partials/post-card.html
+30 -62
View File
@@ -1,69 +1,37 @@
<article
class="feed-item"
style="border-bottom: 1px dashed var(--border-color); padding-bottom: 2rem"
>
<h2 class="item-title" style="font-size: 1.25rem; margin-bottom: 0.5rem; font-weight: 600">
<a href="{{ page.permalink }}">{{ page.title }}</a>
</h2>
<article class="feed-item card hover-scale">
<span class="item-index">{% if loop.index < 10 %}0{{ loop.index }}{% else %}{{ loop.index }}{% endif %}</span>
<div
class="item-meta"
style="
font-size: 0.85rem;
color: var(--text-muted);
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.25rem;
"
>
<span>{{ page.date | date(format="%Y-%m-%d") }}</span>
{% if page.reading_time %}
<span style="opacity: 0.5;">&middot;</span>
<span>{{ page.reading_time }} min read</span>
{% endif %}
</div>
<div class="item-body">
<h2 class="item-title">
<a href="{{ page.permalink }}">{{ page.title }}</a>
</h2>
<div
class="item-snippet"
style="font-size: 0.95rem; color: var(--text-color); margin-bottom: 1rem; opacity: 0.9"
>
{% if page.description %}
<p style="margin: 0">{{ page.description }}</p>
{% else %}
<p style="margin: 0">{{ page.content | striptags | truncate(length=120) | safe }}</p>
{% endif %}
</div>
<div class="item-meta">
<span>{{ page.date | date(format="%Y-%m-%d") }}</span>
{% if page.reading_time %}
<span class="item-meta-sep">&middot;</span>
<span>{{ page.reading_time }} min read</span>
{% endif %}
</div>
<div
class="item-footer"
style="display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem"
>
<a href="{{ page.permalink }}" style="color: var(--accent-color)">Read more...</a>
<div class="item-snippet">
{% if page.description %}
<p>{{ page.description }}</p>
{% else %}
<p>{{ page.content | striptags | truncate(length=120) | safe }}</p>
{% endif %}
</div>
{% if page.taxonomies.tags %}
<div
class="item-tags"
style="display: flex; align-items: center; gap: 0.5rem; color: var(--text-muted)"
>
<svg
viewBox="0 0 24 24"
width="14"
height="14"
stroke="currentColor"
stroke-width="2"
fill="none"
>
<path
d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"
></path>
<line x1="7" y1="7" x2="7.01" y2="7"></line>
</svg>
<span>
{% for tag in page.taxonomies.tags %} {{ tag }}{% if not loop.last %}, {% endif %} {% endfor
%}
</span>
<div class="item-footer">
<a href="{{ page.permalink }}" class="item-readmore">Read more<span class="readmore-arrow">→</span></a>
{% if page.taxonomies.tags %}
<div class="item-tags">
{% for tag in page.taxonomies.tags %}
<a href="{{ get_taxonomy_url(kind="tags", name=tag) }}" class="tag">{{ tag }}</a>
{% endfor %}
</div>
{% endif %}
</div>
{% endif %}
</div>
</article>
templates/partials/profile.html
+13 -42
View File
@@ -1,45 +1,16 @@
{% if config.extra.show_profile %}
<div class="profile-section" style="display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 4rem; text-align: center;">
{% if config.extra.avatar_url %}
<div class="avatar" style="width: 100px; height: 100px; border-radius: 50%; overflow: hidden; margin-bottom: 1rem; background-color: #1a1a1a; display: flex; align-items: center; justify-content: center;">
<img src="{{ config.extra.avatar_url }}" alt="Avatar" loading="lazy" decoding="async" style="width: 100%; height: 100%; object-fit: cover;" onerror="this.src='data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'%23f9fafb\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><path d=\'M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\'></path><circle cx=\'12\' cy=\'7\' r=\'4\'></circle></svg>'"/>
</div>
{% endif %}
{% if config.extra.profile_subtitle %}
<p class="profile-subtitle" style="color: var(--text-muted); font-size: 1rem; margin-bottom: 1rem;">{{ config.extra.profile_subtitle }}</p>
{% endif %}
<div class="social-links" style="display: flex; gap: 1rem; color: var(--text-muted);">
{% if config.extra.github_url %}
<a href="{{ config.extra.github_url }}" style="color: inherit;" class="hover-scale" aria-label="GitHub">
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
</a>
{% endif %}
{% if config.extra.twitter_url %}
<a href="{{ config.extra.twitter_url }}" style="color: inherit;" class="hover-scale" aria-label="Twitter">
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
</a>
{% endif %}
{% if config.extra.youtube_url %}
<a href="{{ config.extra.youtube_url }}" style="color: inherit;" class="hover-scale" aria-label="YouTube">
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.42a2.78 2.78 0 0 0-1.94 2C1 8.13 1 12 1 12s0 3.87.46 5.58a2.78 2.78 0 0 0 1.94 2C5.12 20 12 20 12 20s6.88 0 8.6-.42a2.78 2.78 0 0 0 1.94-2C23 15.87 23 12 23 12s0-3.87-.46-5.58z"></path><polygon points="9.75 15.02 15.5 12 9.75 8.98 9.75 15.02"></polygon></svg>
</a>
{% endif %}
{% if config.extra.linkedin_url %}
<a href="{{ config.extra.linkedin_url }}" style="color: inherit;" class="hover-scale" aria-label="LinkedIn">
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
</a>
{% endif %}
{% if config.extra.email %}
<a href="mailto:{{ config.extra.email }}" style="color: inherit;" class="hover-scale" aria-label="Email">
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
</a>
{% endif %}
{% if config.extra.show_rss_link %}
<a href="{{ get_url(path="rss.xml") }}" style="color: inherit;" class="hover-scale" aria-label="RSS">
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg>
</a>
{% endif %}
</div>
<div class="masthead">
<p class="masthead-kicker">{{ config.extra.author | default(value="andwati") }}{% if config.extra.profile_subtitle %} — {{ config.extra.profile_subtitle }}{% endif %}</p>
<h1 class="hero-title masthead-title">{{ config.title }}</h1>
<p class="hero-subtitle">{{ config.description }}</p>
<div class="masthead-links">
{% if config.extra.github_url %}<a href="{{ config.extra.github_url }}" target="_blank" rel="noopener noreferrer">GitHub</a>{% endif %}
{% if config.extra.twitter_url %}<a href="{{ config.extra.twitter_url }}" target="_blank" rel="noopener noreferrer">Twitter</a>{% endif %}
{% if config.extra.youtube_url %}<a href="{{ config.extra.youtube_url }}" target="_blank" rel="noopener noreferrer">YouTube</a>{% endif %}
{% if config.extra.linkedin_url %}<a href="{{ config.extra.linkedin_url }}" target="_blank" rel="noopener noreferrer">LinkedIn</a>{% endif %}
{% if config.extra.email %}<a href="mailto:{{ config.extra.email }}">Email</a>{% endif %}
{% if config.extra.show_rss_link %}<a href="{{ get_url(path="rss.xml") }}">RSS</a>{% endif %}
</div>
</div>
{% endif %}
templates/posts.html
+4 -4
View File
@@ -42,7 +42,7 @@ and offensive security.{% endblock og_description %} {% block og_url %}{% if pag
paginator.next %}<link rel="next" href="{{ paginator.next }}" />{% endif %} {% endblock head %} {%
block content %}
<div class="feed-page">
<div class="hero" style="padding-bottom: 2rem">
<div class="hero hero-compact">
<div class="hero-content">
<h1 class="hero-title">Posts</h1>
<p class="hero-subtitle">
@@ -55,13 +55,13 @@ block content %}
{% for page in paginator.pages %}
<article class="feed-item hover-scale">
<a href="{{ page.permalink }}" class="item-link">
<div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem;">
<div class="item-date-row">
<time datetime="{{ page.date }}" class="item-date"
>{{ page.date | date(format="%b %d, %Y") }}</time
>
{% if page.reading_time %}
<span style="color: var(--text-muted); font-size: 0.85rem; opacity: 0.6;">&middot;</span>
<span style="color: var(--text-muted); font-size: 0.85rem; font-family: var(--font-mono);">&sim;{{ page.reading_time }} min read</span>
<span class="item-meta-sep">&middot;</span>
<span class="item-reading-time">&sim;{{ page.reading_time }} min read</span>
{% endif %}
</div>
<h2 class="item-title">{{ page.title }}</h2>
templates/taxonomy_list.html
+7 -31
View File
@@ -14,43 +14,19 @@ og_description %} {% block og_url %}{{ config.base_url }}/tags/{% endblock og_ur
"name": "Tags | {{ config.title }}",
"description": "Browse all tags on {{ config.title }}",
"url": "{{ config.base_url }}/tags/",
"inLanguage": "en-US",
"isPartOf": {
"@type": "WebSite",
"@id": "{{ config.base_url }}/#website"
}
"inLanguage": "en-US"
}
</script>
{% endblock head %} {% block content %}
<div
class="tags-page"
style="max-width: 65ch; margin: 0 auto; padding-top: 4rem; text-align: center"
>
<header class="page-header" style="margin-bottom: 3rem">
<h1 class="page-title" style="font-size: 2rem; font-weight: 600">All Tags</h1>
<div class="tags-page">
<header class="page-header tags-page-header">
<h1 class="page-title">All Tags</h1>
</header>
<div
class="tags-container"
style="display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; align-items: center"
>
<div class="tags-container">
{% for term in terms %}
<a
href="{{ term.permalink }}"
class="hover-scale"
style="
font-size: 1.1rem;
color: var(--text-color);
font-weight: 400;
text-decoration: none;
display: inline-flex;
align-items: flex-start;
"
>
{{ term.name }}<sup
style="font-size: 0.7em; color: var(--text-muted); margin-left: 0.15rem; margin-top: 0.1rem"
>{{ term.pages | length }}</sup
>
<a href="{{ term.permalink }}" class="tag-link hover-scale">
{{ term.name }}<sup class="tag-count">{{ term.pages | length }}</sup>
</a>
{% endfor %}
</div>
templates/taxonomy_single.html
+8 -32
View File
@@ -33,41 +33,17 @@ term.permalink }}{% endblock og_url %} {% block head %}
</script>
{% endblock head %} {% block content %}
<div class="post-detail">
<header class="post-header" style="margin-bottom: 3rem">
<h1 class="post-title" style="font-size: clamp(2rem, 4vw, 3.5rem)">
<span style="color: var(--text-muted)">#</span>{{ term.name }}
</h1>
<header class="post-header list-page-header">
<h1 class="post-title list-page-title"><span class="term-hash">#</span>{{ term.name }}</h1>
</header>
<div class="archive-list" style="max-width: 65ch; margin: 0 auto">
<div class="archive">
<ul
style="
list-style-type: none;
padding-left: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
"
>
<div class="archive-list">
<div class="archive-year">
<ul class="archive-items">
{% for page in term.pages %}
<li class="hover-scale" style="display: flex; gap: 1rem; align-items: baseline">
<time
datetime="{{ page.date }}"
style="
color: var(--text-muted);
font-size: 0.95rem;
white-space: nowrap;
font-family: var(--font-mono);
"
>{{ page.date | date(format="%d-%b") }}</time
>
<a
href="{{ page.permalink }}"
style="color: var(--accent-color); font-weight: 500; font-size: 1.05rem"
>{{ page.title }}</a
>
<li class="archive-item hover-scale">
<time datetime="{{ page.date }}" class="archive-date">{{ page.date | date(format="%d-%b") }}</time>
<a href="{{ page.permalink }}" class="archive-link">{{ page.title }}</a>
</li>
{% endfor %}
</ul>
zola.toml
+7 -8
View File
@@ -15,7 +15,7 @@ external_links_no_referrer = true
lazy_async_image = true
[markdown.highlighting]
theme = "catppuccin-mocha"
theme = "gruvbox-dark-medium"
[extra]
# Analytics
@@ -27,7 +27,6 @@ author = "mockingspectre"
# Profile Section (Homepage)
show_profile = true
avatar_url = "/images/avatar.webp"
profile_subtitle = "offending binaries"
# Social Links
@@ -40,21 +39,26 @@ email = "[email protected]"
# Comments (Utterances)
enable_comments = true
utterances_repo = "andwati/andwati.com"
utterances_theme = "github-dark"
utterances_theme = "gruvbox-dark"
utterances_theme_light = "github-light"
# Navigation Menu
[[extra.menu]]
name = "About"
url = "/about/"
match = "/about"
[[extra.menu]]
name = "Posts"
url = "/posts"
match = "/posts"
[[extra.menu]]
name = "Tags"
url = "/tags/"
match = "/tags"
[[extra.menu]]
name = "Archive"
url = "@/archive/_index.md"
match = "/archive"
# Features
enable_search = true
@@ -74,8 +78,3 @@ related_posts_title = "Related Posts"
# Search
search_placeholder = "Search posts..."
# 404 terminal identity
terminal_hostname = "pwnbox"
terminal_prompt_user = "user@blackout"
terminal_whoami = "l0st_r3ader"