Khối
Philosophy carousel
Block: three tabs (I Leverage, II Habit, III Delivery), each with a Playfair quote, body text, a 3:4 ink panel and a signature.
Nội dung tham khảo viết bằng tiếng Anh; mục “Vietnamese” có ví dụ tiếng Việt.
Xem trước
Build the thing that builds the thing.
Agents take the repeatable work. My hours go to judgement, review and the few decisions that have to stay human.
— Minh Pham
Install
bash
npx shadcn add @eloquent/philosophy-carouselUsage
tsx
import { PhilosophyCarousel } from "@/components/blocks/philosophy-carousel";
<PhilosophyCarousel
label="Working philosophy"
signature="— Minh Pham"
items={[
{ value: "leverage", numeral: "I", label: "Leverage", quote: "…", body: "…", image: { src: "/ink/leverage.svg", alt: "…" } },
{ value: "habit", numeral: "II", label: "Habit", quote: "…", body: "…", image: { src: "/ink/habit.svg", alt: "…" } },
{ value: "delivery", numeral: "III", label: "Delivery", quote: "…", body: "…", image: { src: "/ink/delivery.svg", alt: "…" } },
]}
/>It is a tab set, not a sliding carousel: one panel shows at a time, nothing autoplays and nothing moves. The docs examples reuse one placeholder drawing for all three panels.
States
Small, daily, written down.
A good system is a habit with a paper trail: a short plan, a tight loop, and a note of what was decided and why.
— Minh Pham
| State | Treatment |
|---|---|
| Selected tab | Solid ink fill, paper text, aria-selected="true" |
| Unselected tab | Ink text between the ink rules |
| Focus | 2px ink outline, 2px offset, on the tab and on the panel |
| Panel change | 150ms opacity; none with reduced motion |
Keyboard
| Key | Action |
|---|---|
| Tab | Moves to the selected tab, then to the open panel |
| Left / Right | Moves to the previous or next tab (wraps) and selects it |
| Home / End | First / last tab |
Vietnamese
Hãy xây cỗ máy giúp tạo ra sản phẩm.
Các agent đảm nhận phần việc lặp lại. Thời gian của tôi dành cho phán đoán, rà soát và vài quyết định buộc phải do con người đưa ra.
— Minh Pham
Ink adaptation
Brand block with no upstream, built on Tabs (the big variant) and Ink figure. Rules and type replace a card; the quote is Playfair italic and the body stays in ink.