Pretext.js Demos

Interactive Pretext demo pages showing Pretext.js in real scenarios — from virtual scrolling to creative typography. Each Pretext demo is a standalone interactive page you can experiment with.

// featured pretext demos

PerformanceBeginner

Variable-Height Virtual Scroll

A masonry card grid where Pretext.js predicts every card height without DOM reads. Only visible cards are mounted — scroll through hundreds of items at 60fps.

prepare()layout()

Try demo →

UI ComponentIntermediate

Tight Chat Bubbles

Compare CSS max-width bubbles vs Pretext.js tight-wrapped bubbles. Binary search finds the minimum width that keeps the same line count, eliminating wasted space.

walkLineRanges()layout()

Try demo →

InternationalizationBeginner

Multilingual Content Feed

A social feed mixing Chinese, Arabic, Korean, and Latin text. Pretext.js measures every script accurately with the same API — no special-casing required.

prepare()layout()

Try demo →

// all pretext demos

PerformanceBeginner

Variable-Height Virtual Scroll

A masonry card grid where Pretext.js predicts every card height without DOM reads. Only visible cards are mounted — scroll through hundreds of items at 60fps.

prepare()layout()

Try demo →

UI ComponentIntermediate

Tight Chat Bubbles

Compare CSS max-width bubbles vs Pretext.js tight-wrapped bubbles. Binary search finds the minimum width that keeps the same line count, eliminating wasted space.

walkLineRanges()layout()

Try demo →

InternationalizationBeginner

Multilingual Content Feed

A social feed mixing Chinese, Arabic, Korean, and Latin text. Pretext.js measures every script accurately with the same API — no special-casing required.

prepare()layout()

Try demo →

UI ComponentBeginner

Accordion Heights

Expand and collapse sections whose text heights are calculated by Pretext.js. Smooth CSS transitions powered by accurate height prediction — zero layout shift.

prepare()layout()

Try demo →

Advanced LayoutAdvanced

Rich Inline Text

Mixed inline elements — body text, code spans, links, and chip badges — laid out together. Chips stay whole while text wraps naturally around them.

layoutNextLine()walkLineRanges()

Try demo →

CreativeAdvanced

Editorial Engine

Animated orbs with physics simulation. Text reflows around multiple moving obstacles in real time using interval arithmetic — zero DOM measurements per frame.

layoutNextLine()prepareWithSegments()

Try demo →

CreativeIntermediate

Typographic ASCII Art

Particle-driven ASCII art comparing proportional vs monospace typography. Pretext.js measures individual glyph widths to match characters to brightness levels.

prepareWithSegments()

Try demo →

// community showcases

Video Showcases

Creative Pretext demo videos from the community. Click to watch the full video and learn how each Pretext demo project was built.

Animationby Tran Mau Tri Tam

Mesmerizing Text Animation

A hypnotic text animation that showcases the creative potential of Pretext.js — fluid motion and precise text layout combined.

Creativeby j an

Umbrella Text Reflow

Text dynamically reflows around a moving umbrella shape — a stunning UX concept combining Pretext.js layout with interactive design.

Gameby Ashley Best

Interactive Curling Rocks

A playful Pretext.js example with Rive scripting for interactive curling rocks — text layout meets physics-based animation.

Animationby hansonerere

Sand Writing Effect

Beautiful sand writing effect built with Rive — characters appear as if drawn in sand with realistic texture and animation.

Creativeby Danqi

Pool of Text

A mesmerizing pool of text that ripples and flows like water — satisfying fluid simulation meets Pretext.js text layout.

Creativeby Adam Fuhrer

Geometric Text Visualization

A striking geometric text visualization showcasing creative typography possibilities with Pretext.js layout engine.

UIby Andrea Giammarchi

60FPS Pretext Playground

A performance stress test of the Pretext playground pushing from 60FPS to its limits — demonstrating real-time text layout at scale.

UIby tldraw

tldraw × Pretext

tldraw integrating Pretext.js for instant text measurement in their collaborative whiteboard — smooth resizing and layout without DOM reflow.

Creativeby River Marchand

Illuminated Dragon

An illuminated dragon rendered with creative text layout — a playful, whimsical demo showing Pretext.js used for artistic typography effects.

Animationby Paweł Huryn

Text Flow Animation

Smooth text flow animation demonstrating dynamic reflow and layout transitions powered by Pretext.js.

Creativeby Amelia Wattenberger

Into the Rabbit Hole

A dreamy, starfield-style text animation — characters scattered like constellations, then drawn into a rabbit hole of typography.

Creativeby Robin

3D Object Text Wrap

Text wrapping seamlessly around a 3D gaussian splat object in real time — combining Pretext.js layout with 3D rendering.

Animationby dusha

Emotional Text Animation

A deeply expressive text animation that brings emotion to typography — characters move and transform with feeling.

UIby Robin

Real-Time Content Manipulation

Smooth real-time content manipulation in a practical interface — demonstrating how Pretext.js enables instant text reflow in production UIs.

Typographyby Cheng Lou

Knuth-Plass Line Breaking

The Knuth-Plass algorithm implemented with Pretext.js — optimized paragraph line breaking that reduces reading churn on long text blocks.

Creativeby Ben South

One-Shot Pretext Demos

Generating beautiful Pretext demos in one shot using Variant UI — showcasing how AI tools can rapidly produce text layout experiments.

Creativeby Wes Bos

Words on Your Face

A blog post except the words are on your face — Pretext.js text layout mapped onto facial features via webcam for a surreal reading experience.

Animationby lotamchi

Magic with Pretext

Magical text effects built with Pretext.js — creative typography that transforms and animates with enchanting visual flair.

UIby Bitrig

Dynamic Text Reflow in Bitrig

Responsive and dynamic text reflowing now available in Bitrig — real-time layout adjustment powered by Pretext.js.

Gameby Alexander Chen

TypeBeat — Text Drum Machine

A drum machine made entirely out of text — TypeBeat combines Pretext.js with Gemini in Antigravity. Sound on!

Creativeby Adam Fuhrer

Morphing Text Shapes

Text morphing into organic shapes — another creative exploration of Pretext.js layout capabilities.

Creativeby Jayme Hoffman

Pretext Again — Daft Punk Edition

Listen to Fred again & Thomas Bangalter (ex Daft Punk) with Pretext.js — a musical text visualization built on a flight.

Creativeby Ken Goyarola

Fish & Fluid Text Simulation

Pretext.js meets three.js fluid simulation — text flows around swimming fish in a charming interactive demo built entirely on Replit.

Animationby Eduardo Sonnino

Text Screensaver

A mesmerizing text screensaver effect — characters float and drift across the screen in a relaxing, looping animation.

Creativeby Dhravya Shah

Pretext + WebGL Rickroll

Someone had to do it — Pretext.js combined with WebGL to rickroll the internet. Never gonna give you up, rendered in text.

Animationby Ashley Best

Rive Worm Text Reflow

A Rive animation drives Pretext.js text reflow — satisfying worm-like curves push text around in real time.

UIby Ann Nguyen

Chaotic Future Interfaces

The future of interfaces seems a little chaotic, but it's fun — experimental UI exploration with Pretext.js text layout.

// community

Built with Pretext.js

Pretext demo projects from the community. Submit yours to be featured here.

Submit Your Demo →

by community

React Virtuoso Integration

Using Pretext.js with React Virtuoso for smooth virtual scrolling with accurate height estimation.

View project →

by community

Svelte Text Editor

A minimal Svelte-based text editor using Pretext.js for line-height calculation without DOM access.

View project →

Your Pretext Demo Here

Built something with Pretext.js?
Submit it via GitHub.

Pretext 데모란?

각 Pretext 데모는 Pretext가 실제 텍스트 측정 문제를 어떻게 해결하는지 보여주는 독립적인 인터랙티브 페이지입니다. 모든 Pretext 데모에서 매개변수를 조정하고, 컨테이너 크기를 변경하고, Pretext가 실시간으로 줄 바꿈과 높이를 계산하는 것을 확인할 수 있습니다 — DOM 측정 없이. 가상 스크롤, 채팅 인터페이스, 크리에이티브 타이포그래피 실험 등 어떤 것을 만들든, 이 Pretext 데모 페이지에서 정확한 API 호출과 패턴을 확인하세요.

모든 Pretext 데모

가변 높이 가상 스크롤

초급prepare()layout()

Pretext가 DOM 읽기 없이 모든 카드 높이를 예측하는 메이슨리 카드 그리드. 보이는 카드만 DOM에 마운트됩니다 — 레이아웃 스래싱 없이 60fps로 수백 개의 항목을 스크롤하세요.

사용 사례: 가상 스크롤 목록, Pinterest 스타일 메이슨리 그리드, 가변 높이 항목의 무한 피드.

타이트 채팅 버블

중급walkLineRanges()layout()

CSS max-width 버블과 Pretext 타이트 래핑 버블을 비교합니다. 이진 검색으로 동일한 줄 수를 유지하는 최소 너비를 찾아 모든 메시지 버블의 낭비되는 여백을 제거합니다.

사용 사례: 채팅 애플리케이션, 메시지 인터페이스, AI 스트리밍 응답, 알림 토스트.

다국어 콘텐츠 피드

초급prepare()layout()

하나의 목록에서 중국어, 아랍어, 한국어, 태국어, 라틴 텍스트를 혼합한 소셜 피드. Pretext는 동일한 API로 모든 스크립트를 정확하게 측정합니다 — 특별한 처리 없이, 로케일 핵 없이.

사용 사례: 소셜 미디어 피드, 번역 도구, 다국어 CMS, 국제화된 대시보드.

아코디언 높이

초급prepare()layout()

애니메이션 시작 전에 Pretext가 콘텐츠 높이를 계산하는 확장/축소 섹션. 레이아웃 시프트 없는 부드러운 CSS 전환 — 브라우저가 확장된 콘텐츠를 측정할 필요가 없습니다.

사용 사례: FAQ 섹션, 설정 패널, 접이식 사이드바, 문서 페이지.

리치 인라인 텍스트

고급layoutNextLine()walkLineRanges()

본문 텍스트, 코드 스팬, 하이퍼링크, 칩 뱃지를 같은 베이스라인에 함께 배치하는 혼합 인라인 요소. 칩은 줄 바꿈 중에도 온전하게 유지되고 텍스트는 자연스럽게 감깁니다.

사용 사례: 리치 텍스트 에디터, 태그/멘션 시스템, 이메일 작성기, 주석 도구.

에디토리얼 엔진

고급layoutNextLine()prepareWithSegments()

텍스트 캔버스 위에 물리 시뮬레이션으로 떠다니는 애니메이션 오브. 구간 산술을 사용하여 여러 이동하는 원형 장애물 주위로 실시간으로 텍스트가 재배치됩니다 — 애니메이션 프레임당 DOM 측정 제로.

사용 사례: 잡지 스타일 레이아웃, 크리에이티브 타이포그래피, 인터랙티브 기사, 텍스트를 활용한 데이터 시각화.

타이포그래픽 ASCII 아트

중급prepareWithSegments()

Pretext를 사용하여 개별 문자 너비를 측정하는 파티클 기반 ASCII 아트. 프로포셔널과 모노스페이스 타이포그래피를 비교합니다 — 동일한 문자라도 너비 측정의 정확도에 따라 다른 시각적 결과를 만듭니다.

사용 사례: 크리에이티브 코딩, 제너레이티브 아트, 터미널 에뮬레이터, 레트로 스타일 시각화.

Pretext 데모 API 빠른 참조

모든 Pretext 데모는 이 핵심 함수 중 하나 이상을 사용합니다. API는 준비 단계(글리프 너비를 한 번 측정)와 레이아웃 단계(순수 산술 연산, 마이크로초 단위로 실행)로 나뉩니다.

함수	단계	사용 위치
prepare(text, font)	준비	가상 스크롤, 다국어, 아코디언
prepareWithSegments(text, font)	준비	채팅 버블, 리치 텍스트, 에디토리얼 엔진, ASCII 아트
layout(prepared, width, lineHeight)	레이아웃	가상 스크롤, 채팅 버블, 다국어, 아코디언
layoutWithLines(prepared, width, lineHeight)	레이아웃	플레이그라운드 (균일 모드)
layoutNextLine(prepared, cursor, width)	레이아웃	리치 텍스트, 에디토리얼 엔진
walkLineRanges(prepared, width, callback)	레이아웃	채팅 버블, 리치 텍스트, 플레이그라운드 (범위 모드)

실전 Pretext 데모 사용 사례

가상 스크롤링 & 무한 목록

가장 인기 있는 Pretext 데모. DOM 요소를 생성하지 않고 수천 개의 가변 높이 목록 항목의 높이를 미리 계산합니다. React Virtuoso, TanStack Virtual 또는 모든 가상화 라이브러리와 통합하여 60fps로 부드러운 스크롤링을 제공합니다.

채팅 & 메시징 인터페이스

채팅 Pretext 데모는 스트리밍 AI 응답이 렌더링 완료되기 전에 메시지 버블 높이를 예측합니다. 레이아웃 시프트와 깜빡임을 제거합니다. 타이트 래핑으로 모든 버블의 낭비되는 여백을 최소화합니다 — 화면 너비가 제한된 모바일에서 특히 중요합니다.

대시보드 & 데이터 테이블

강제 동기 리플로우 없이 차트 툴팁, 데이터 테이블 셀, 카드 레이아웃의 크기를 조정합니다. 수백 개의 텍스트 요소가 동시에 표시될 때, Pretext는 DOM 측정 병목을 완전히 피하여 60fps 렌더링을 유지합니다.

반응형 & 적응형 레이아웃

하나의 prepare() 호출에서 여러 브레이크포인트의 텍스트 높이를 계산합니다. 모바일, 태블릿, 데스크톱 — 동일한 핸들에서 세 번의 산술 연산, 리플로우 제로. DOM 측정이 불가능한 서버사이드 렌더링에 완벽합니다.

크리에이티브 타이포그래피 & 제너레이티브 아트

에디토리얼 Pretext 데모는 장애물 주위로 텍스트가 흐르는 것, 잡지 스타일 다단 스프레드, 정밀한 글리프 측정을 사용한 ASCII 아트를 보여줍니다. 각 크리에이티브 Pretext 데모는 CSS만으로는 달성할 수 없는 줄 단위 제어를 제공합니다.

다국어 & 국제화된 콘텐츠

다국어 Pretext 데모는 동일한 두 함수 API로 CJK, 아랍어, 히브리어, 태국어, 한국어, 혼합 스크립트 텍스트를 측정합니다. 유니코드 분할과 양방향 텍스트가 자동으로 처리됩니다 — 로케일별 코드가 필요 없습니다.

Pretext 데모 시작하기

원하는 패키지 매니저로 npm에서 Pretext를 설치하세요:

$ npm install @chenglou/pretext

그런 다음 필요한 두 함수를 import하세요:

import { prepare, layout } from '@chenglou/pretext'

// Prepare once — measures glyph widths via Canvas
const prepared = prepare(
  'Hello, Pretext.js!',
  '16px Inter'
)

// Layout at any width — pure arithmetic
const { height, lineCount } = layout(
  prepared,
  400, // container width
  24   // line height
)

이것이 전부입니다. prepare() 호출은 텍스트+폰트 쌍당 한 번만 실행됩니다. 이후 모든 layout() 호출은 순수 산술 연산입니다 — DOM 접근 없음, 강제 리플로우 없음, 레이아웃 스래싱 없음. 위의 모든 Pretext 데모에서 이 API의 작동을 확인하세요.

커뮤니티 & 기여

Pretext로 무언가를 만드셨나요? 커뮤니티 갤러리에 여러분의 Pretext 데모를 소개하고 싶습니다. 제목, URL, 간단한 설명과 함께 GitHub 이슈를 열어 데모를 제출하세요. 커뮤니티 Pretext 데모 제출은 검토 후 위의 갤러리에 표시됩니다.

pretextjs 리포지토리에 풀 리퀘스트를 제출하여 새로운 Pretext 데모를 기여할 수도 있습니다. 각 Pretext 데모는 Pretext 라이브러리를 동적으로 import하고 특정 사용 사례나 API 패턴을 시연하는 독립적인 React 컴포넌트입니다.

Pretext 라이브러리 자체에 대한 질문, 버그 리포트, 기능 요청은 chenglou의 공식 pretext 리포지토리를 방문하세요.