Motion
Field Notes · Issue 246 minThe invisible work behind a fast interface
Why perceived speed comes from what you show first, and three patterns we use to get there.
beUI Pro 移动端已上线：50 个 React Native 区块和页面
Newsletter
3 个变体
Newsletter signup sections with real issue previews, live preference controls, reader social proof, and animated success states.
Issue preview
newsletter-editorial.tsxA two-column signup beside a stack of recent issues with cover photos that cycles on its own, and a welcome email that drops onto the stack when someone subscribes.
Field Notes · weekly
One considered ideafor interface builders.
A short Sunday read on motion, composition, and the decisions that make software feel finished.
Written by Maya ChenEvery Sunday at 8:00
12,840readers
MotionField Notes · Issue 246 min
TSXcomponents/previews/premium/newsletter-editorial-preview.tsx
"use client";
import { NewsletterEditorial } from "@/components/premium/newsletter";
export function NewsletterEditorialPreview() {
return (
<div className="w-full">
<NewsletterEditorial />
</div>
);
}
安装
$ bunx --bun shadcn add @beui-pro/newsletter-editorial
Inline signup
newsletter-inline.tsxA centered signup under a fan of recent issue covers on a shader band. The covers spread on hover and the front one gets a check on signup, with real reader portraits and a counting subscriber total.
The weekly drop
Ship better UI,every single week.
New components, motion breakdowns, and changelog notes in one short email. Unsubscribe anytime.
12,438developers subscribed
TSXcomponents/previews/premium/newsletter-inline-preview.tsx
"use client";
import { NewsletterInline } from "@/components/premium/newsletter";
export function NewsletterInlinePreview() {
return (
<div className="w-full">
<NewsletterInline />
</div>
);
}
安装
$ bunx --bun shadcn add @beui-pro/newsletter-inline
Preferences card
newsletter-card.tsxTopic toggles and a frequency switch beside an inbox preview that rearranges itself to show exactly what will arrive, with the choices passed to your subscribe handler.
Newsletter
Only the parts you care about.
Pick your topics and how often you want them. The preview shows exactly what will land.
How often
Your inboxEvery Sunday at 8:00
- A pricing table that explains itselfThe UI Digest · New components
- Springs over easings, with examplesThe UI Digest · Motion breakdowns
- Command menus done rightThe UI Digest · New components
- The craft of a good empty stateThe UI Digest · Motion breakdowns
TSXcomponents/previews/premium/newsletter-card-preview.tsx
"use client";
import { NewsletterCard } from "@/components/premium/newsletter";
export function NewsletterCardPreview() {
return (
<div className="w-full">
<NewsletterCard />
</div>
);
}
安装
$ bunx --bun shadcn add @beui-pro/newsletter-card