Magazine editorial with a giant letter silhouette and Pretext text wrap - shadcn/ui
Vogue-inspired editorial spread built around a dominant letter 'B'. The letter is rasterized to an OffscreenCanvas at runtime to extract a polygon hull of its exact typographic silhouette. Pretext's layoutNextLine() flows body text line-by-line to the right of the letter, with each line's left boundary carved by the hull so text hugs the letterform. The upper-right quadrant reserves space for a static editorial title ('bauhaus revival') by adding a second blocker interval during the title zone.
Preview
Component Details
- ID
- magazine-big-letter
- Type
- Block
- Access
- Free
- Category
- Editorial
- Published
- 3 Apr 2026
Files Included
- app/magazine-big-letter/page.tsx
- components/creative-tim/blocks/magazine-big-letter.tsx
Explore More Blocks
Product ListProfessional product listing and showcase components for React and Next.js. Build product grids, filtered lists, rating displays, and ecommerce product catalogs with customizable layouts.
ModalsBeautiful modal and dialog components for React and Next.js. Build popups, confirmations, forms, and interactive overlay interfaces with accessible components.
CRUDsComplete CRUD interface components and data management blocks for React and Next.js. Build admin panels, data tables, forms, and database management interfaces.
ContactProfessional contact form components and section layouts for React and Next.js. Build contact pages, feedback forms, support sections, and communication interfaces.
OverviewCustomer review and testimonial overview components for React and Next.js. Build review sections, rating displays with statistics, customer testimonials with profile images, and comprehensive feedback interfaces.
AI AgentsModern AI agent interface components and chat UI blocks for React and Next.js. Create conversational AI experiences, streaming responses, and interactive agent interfaces.
FAQsClean and accessible FAQ components and help section layouts for React and Next.js. Build knowledge bases, support pages, and frequently asked questions interfaces.
AuthenticationSecure authentication components and login flows for React and Next.js. Build sign-in forms, registration pages, password reset flows, and authentication interfaces.