Xiaohongshu / AI Webpages + 3D Interaction + Pretext Design Collection

Pretext, the 2026 viral open-source project, ignites an era of universal creation. 23 creator works + tutorials, from frontend typography to 3D modeling, so ordinary people can build "cinematic-grade webpages".

1. Pretext — The 2026 Viral Frontend Typography Library

Project Overview

Developer: Cheng Lou (renowned React animation author, frontend infrastructure engineer)
Original post views: 21 million+
Core capability: A frontend typography library,that lets text reflow in real time according to the visual layout
Even Karpathy shared it

Core idea

Addresses the pain point similar to adjusting layout everywhere when inserting images in a Word document — Pretext turns frontend design into one-click generation. Frontend designers no longer need to tediously adjust every element one by one.

Typical Applications

Scenario	Effect
Children's story visualization	Each sentence generates a pattern composed of text
3D model + real-time typography(Heritage site display)	By default, visitors read the heritage site introduction carefully; when dragging to rotate the building,the text does not block the view
2-minute Demo APP	Feed the GitHub code to AI (StarChild) to produce a Demo in 2 minutes

Hands-on workflow (Heritage 3D + Pretext tutorial)

1. 安装 Pretext + 程楼基于 Pretext 开发的框架
   方式:把两个项目拖给 CloudCoder 或 Codex 让它装
2. 跑一张图(任意图片生成工具)
3. 用 AI 3D 工具把图片转 3D 模型(下载 GLB 格式)
4. 把 GLB 文件拖到框架的资产文件夹
5. 让 CloudCoder 启动端口,弹出网页
6. 在网页里玩 3D + 实时排版交互

The greater significance of Pretext

"In the AI era, more and more people can express themselves more easily. People who are not comfortable expressing themselves in front of a camera,can create artistic animations to express themselves through open-source technologies like Pretext. AI democratizes creation."

2. Cinematic Webpage SOP (by Designer Yanyan)

"Even without the strongest AI (Claude Code), as long as you learn this method, you can still make cinematic-grade webpages."

Complete workflow (6 steps)

Step 1: Browse reference sites — lock down 3 things first

This is not for inspiration, but for setting direction:

Page vibe(calm vs punchy)
What the hero visual looks like
How the rhythm is arranged

"If you don't figure this out first, the AI will later just guess wildly based on its own understanding."

Step 2: Use Nano Banana to create background atmosphere

First generate a batch of glowing, flowing, sci-fi-leaning base images.

"Many webpages don't look premium because the background layer doesn't hold up; if the foundation is flat, the whole page can hardly feel cinematic."

Step 3: Create characters — webpage character images ≠ character design sheets

Character design sheet	Webpage character image
Pursues completeness	Clean composition, good placement, won't feel cramped when cropped into the page
One large full image	Half-body on white background + different angles

Step 4: Create dynamic assets (webpage video ≠ short video)

Short video	Webpage video
Complex plot	Loopable, no continuity errors, stable vibe, natural motion

Step 5: Build the page in Google AI Studio — provide enough information

Key information checklist:

Page type(e.g., Crypto LANDING page)
Tech stack(React + TypeScript + Tailwind + Vite)
Style intent
Background image / video links

"Only then will the AI know what kind of page it is building; otherwise it will very easily give you a standard website that looks correct but has no memorable points."

Step 6: Go to Landingbook to grab above-the-fold layout

Specifically look at how landing pages arrange their first screen. Send screenshots to AI + add notes → make 4–5 content blocks (borrow the layout feel, don't copy exactly).

Step 7: Pick character images in Higgsfield → Seedance video model

Select front view / side view / half-body / different expressions, review them one by one → turn them into dynamic effects with Seedance → combine with the scene to make a video.

Step 8: Refine the page

Directly call out to the AI: "master your digital assets For this block, don't use the static image on the right, replace it with a video" → unify the homepage and the cards below visual language.

Core mindset

"Impressive people are not those who use the latest models, but those who can quickly turn any model into an extension of their own hands and brain.Today this tool works, tomorrow that tool is stronger, the day after it might change its name again,don't become someone led around by models. Become someone who can master models."

"Many people chase new tools, few people actually ship things."

3. Making Premium-Feeling Vibecoding Pages (Xiaozhuang — Aesthetics Chapter)

3 UI aesthetic libraries to browse regularly

Website	Features
Page Flows	Curates top global popular products Complete UI design pages + real user flow examples(e.g., Lovable / Crowd), including detailed screen recordings
Godly (godly.website)	Focuses on premium and creative visual interactive websites,art / humanities style suitable for Web Coding (original Xiaohongshu post misspelled it as "Godley")
Mobbin	Filterable by industry and UI elements,at the detail level(covers search pages / settings pages / popups), balancing creativity + practical implementation

2 reference tips

Tip 1: Directly replicate from screenshots

提示词:
请参考附件中的 UI 设计风格,帮我统一优化 UI 视觉,产品功能保持不变。

Tip 2: Let AI extract the style for you (Gemini style translator)

把 UI 图或交互录屏丢给 Gemini,让它总结:
1. UI 风格关键词
2. 交互逻辑
3. 页面结构

然后把提炼好的关键词喂给你的 Web Coding 工具。

"It's okay if you can't design, but you need to know how to choose design, and slowly cultivate your own unique aesthetic judgment.What level of design you feed the AI, that's the kind of page it will make for you."

4. Bringing Vibecoding Pages to Life (Xiaozhuang — Animation Chapter)

3 top-tier animation component libraries

Library	Features	Suitable for
Unicorn Studio	No design / coding foundation required. Built-in countless WebGL animations + premium interactions.Supports one-click copy + uploading your own images + exporting video	Top-tier visual creativity
React Bits (reactbits.dev)	Vibe Coding animation all-in-one toolkit,curates almost all open-source animations across the web(dynamic backgrounds / text effects), supports high customization	1:1 visual replication (original Xiaohongshu post misspelled it as "React Beats")
Design Spells	Specifically curates micro-interactions from top global products(button elastic feedback / input field focus rhythm)	Solves the stiff feel of Vibe Coding, polish +10×

2 AI prompt-feeding tips

Method 1: Code + documentation feeding method

提示词:
请参考以下 React Bits (reactbits.dev) 的组件代码及官方文档说明,
帮我实现一个逻辑完全一致的 XX 动效,
注意保持原有动画的曲线和延迟参数。

Method 2: Gemini animation translator

Send screen recordings to Gemini and ask it to extract:

Animation trigger timing(hover / scroll)
Easing function type(Spring elasticity / Ease in out smoothness)
Keyframe parameters

→ Feed to Web Coding tools for precise replication

5. Gemini 3D Particle Animation + Gesture Recognition (Cat Senior)

Tutorial SOP (the most complete Gemini tutorial online)

Step	Content
1. Open Gemini web version + set Canvas mode	Don't use AI Studio, because it defaults to React, which is not beginner-friendly
2. Input the prompt	Just throw the screenshot to Doubao for recognition
3. Wait for Gemini 3 to finish writing the code
4. Create index.html	Online preview can't go fullscreen → create a local folder + index.html + select all and paste
5. Drag into Chrome browser for fullscreen

Tech stack selection (key)

Technology	Use
Frontend trio(HTML/CSS/JS combined into one HTML file)	Beginner-friendly(compared to React's split files)
MediaPipe	Gesture recognition library
Three.js	3D rendering

Visual feel in under 500 lines of code: The library code isn't shown, it's just not visible.

Five 3D particle playstyles for Gemini 3

(details to be completed; core is Three.js + particle system + Gemini writing code + Canvas rendering)

6. AI 3D Modeling — Hitem3D (hi3d.AI)

Usage

Step	Operation
1	Prepare image → go to hi3d.AI
2	Model selection 2.0(asset-grade PBR scene input + good texture effects) / 2.1 (good portrait structure + three-court-five-eye facial proportions + good restoration of facial contours, newly added relief function)
3	Resolution selection 1536 Pro
4	Check Geometry + texture(higher-definition restoration)
5	3 free retries
6	Download format

Applicable scenarios

Game characters / 3D figurines / art collectibles / cultural relic restoration
One image → high-precision 3D model with built-in realistic texture
Auto-complete unseen areas + light and shadow correction (remove shadows and highlights)

7. Google Genie 3 — World Generation Model

Latest world model: Input one sentence / one image → generate a 3D world that supports real-time interaction + infinite exploration.

"Enter a real character perspective and create a vivid, ever-expanding AI world in the way you like."

8. AI Real-Time Generation of Endless Webpages (viral on X, shared by Karpathy)

"How can the ocean of knowledge be sipped through the thin straw of long articles and generative interfaces?"

Core: No need to switch between multiple websites,click the target location → AI generates related introduction. Highly personalized webpages.

There is a navigation bar at the top to go back
Travel guide scenario:Feels like virtual travel in Bali
Text rendering has shortcomings, but the high-quality version works perfectly + has far more details
"Can't imagine how amazing it would have been to have this when I was a kid studying"

"This work opens up everyone's imagination of webpages,it turns out there can be no boundaries between information. "

9. Vibecoding Model Accessible in China — Minimax 2.7 Plus

Suitable users: Due to domestic network restrictions,unable to use the official Claude Code model.

Minimax Plus version:

1500 Token calls available every 5 hours1500 times
Fast speed
Supports image understanding + web search
From website ideation → page design → deployment and development, you can use this one model for the whole process

Matching tool: Claude Code (client usable in China) + Minimax 2.7 model

10. Extensions Beyond Pretext (GPT Image 2 Panoramas)

Use GPT Image 2 to make 360° panoramic images — supplementary visual creation tool for later stages.

Key AI Tools Overview (B2)

Tool	Use
Nano Banana	Webpage background / base map atmosphere
Higgsfield	Webpage character assets (different angles and expressions)
Seedance	Video generation model
Google AI Studio	Main page builder (specify tech stack clearly)
Landingbook	Landing page above-the-fold layout inspiration
Page Flows / Godly / Mobbin	3 UI aesthetic libraries
Unicorn Studio / React Bits / Design Spells	3 animation libraries
Hitem3D (hi3d.AI)	AI 3D modeling
Genie 3	Google world generation model
Gemini 3	3D particles + gesture recognition
MediaPipe	Gesture recognition library
Three.js	3D rendering
GPT Image 2	Image generation / 360° panoramic images
Pretext	Frontend typography library (Cheng Lou)
Minimax 2.7 Plus	China-accessible Vibecoding model