# Notes · George Mocreac

Small ideas, useful snippets, and references for making better interfaces.

Interactive page: https://mocreac.com/notes/

## Contents

- [Formulas](#formulas)
- [Snippets](#snippets)
- [Resources](#resources)
- [Inspiration](#inspiration)
- [Components](#components)

## Formulas

### Consistent Radii Beyond 90°

Keep the same distance from the vertex to where the curve meets each edge. Start with a 90° radius r, then find the circular radius R for an interior angle θ.

[Open this note](https://mocreac.com/notes/#consistent-radii-beyond-90)

For an interior angle θ and reference radius r at 90°, the radius is R = r × tan(θ / 2). Use the same units for r and R. The interactive note lets you adjust the angle and radii.

## Snippets

### Quiet Scrollbars

A small CSS detail. Copy the prompt and give it to your coding agent.

[Open this note](https://mocreac.com/notes/#quiet-scrollbars)
[Source: Rauno Freiberg](https://x.com/raunofreiberg/status/2048057305439039535)

Copyable prompt:

````text
Use thin gray native scrollbars with transparent tracks on the page and all scrollable containers. Apply:

scrollbar-width: thin;
scrollbar-color: gray transparent;
````

### Text Wrapping

Balance titles and improve wrapping in subtitles.

[Open this note](https://mocreac.com/notes/#text-wrapping)
[Source: Jakub Krehel](https://jakub.kr/writing/details-that-make-interfaces-feel-better)

Copyable prompt:

````text
Improve typography wrapping in the existing design system. Apply text-wrap: balance to titles and text-wrap: pretty to subtitles and descriptions. Use the project's existing title and subtitle selectors, preserving font sizes, weights, widths, and spacing. Leave code blocks and intentionally single-line controls unchanged. Verify wrapping at mobile and desktop widths; unsupported browsers should retain normal wrapping.

.title { text-wrap: balance; }
.subtitle { text-wrap: pretty; }
````

### Font Smoothing

Grayscale font smoothing on macOS.

[Open this note](https://mocreac.com/notes/#font-smoothing)
[Source: Gustavo Fior · Craft](https://craft.gustavofior.com/font-smoothing)

Copyable prompt:

````text
Apply grayscale font smoothing globally in the existing shared stylesheet:

body {
  -webkit-font-smoothing: antialiased;
}

This non-standard property affects macOS text rendering; other operating systems ignore it. Preserve the existing font families, sizes, weights, and colors. Check light and dark surfaces, especially text at weight 300 or below, which can become too thin on low-resolution displays.
````

### Skills

Install agent skills from Emil, Jakub, Raphael, and Benji.

[Open this note](https://mocreac.com/notes/#skills)

Install commands:

```sh
npx skills@latest add emilkowalski/skills
npx skills add jakubkrehel/skills
npx skills add raphaelsalaja/skills
npx skills add benjitaylor/skills --skill stageshow
```

## Resources

### Shadow Elevation Generator

A saved CodePen by jshmllr. Open the pen to explore the demo and its source.

[Open this note](https://mocreac.com/notes/#shadow-elevation)
[Source: codepen.io · jshmllr](https://codepen.io/jshmllr/pen/LERqgQa)

Use the interactive note to adjust elevation and copy the resulting CSS or prompt.

### Bklit UI

Chart and visualization components for shadcn/ui, with installation and configuration guidance.

[Open this note](https://mocreac.com/notes/#bklit-ui)
[Source: bklit.com](https://bklit.com/docs/installation)

### Transitions

UI transitions and motion resources.

[Open this note](https://mocreac.com/notes/#transitions)
[Source: transitions.dev](https://transitions.dev/)

### Craft

Short design engineering guides by Gustavo Fior, covering typography, layout, color, and motion.

[Open this note](https://mocreac.com/notes/#craft)
[Source: craft.gustavofior.com](https://craft.gustavofior.com/)

### Interface Cheat Sheet

An interactive reference for interface details, from concentric corners to animation and typography.

[Open this note](https://mocreac.com/notes/#interface-cheat-sheet)
[Source: interfaces.dev](https://interfaces.dev/cheat-sheet)

### Sonner

An opinionated toast component for React by Emil Kowalski.

[Open this note](https://mocreac.com/notes/#sonner)
[Source: sonner.emilkowal.ski](https://sonner.emilkowal.ski/)

## Inspiration

### Bencho Finds

A curated collection of interfaces, interactions, animations, and small design details.

[Open this note](https://mocreac.com/notes/#bencho-finds)
[Source: bencho.dev](https://bencho.dev/finds)

### Viewport UI

A running feed of curated UI experiments. Good for snapping out of a stale visual loop.

[Open this note](https://mocreac.com/notes/#viewport-ui)
[Source: viewport-ui.design](https://viewport-ui.design/)

### Cue

Hand-picked UI component references with AI prompts for building distinctive interfaces.

[Open this note](https://mocreac.com/notes/#cue)
[Source: cuedesign.space](https://www.cuedesign.space/)

### Best Designs on X

Hand-picked design inspiration from top creatives on X: logos, UI, and branding, refreshed hourly.

[Open this note](https://mocreac.com/notes/#best-designs-on-x)
[Source: bestdesignsonx.com](https://bestdesignsonx.com/?ref=uigoodies.com)

## Components

### Rare UI

A collection of animated React components.

[Open this note](https://mocreac.com/notes/#rare-ui)
[Source: rareui.com](https://www.rareui.com/)