webgl-form

WebGL 表單

此表單即是波浪：stripe.com 的折疊片狀，如同 stripe.com 所繪製的那樣。 使用者在多次嘗試後得出的結論是：「我只喜歡波浪，因為它真的是 一個很好的表單。波浪正是我想要的。」所有嘗試過的其他形狀 （環、結、彈簧、螺旋漏斗、纏繞的片狀）都被拒絕了。因此， 一個想法永遠不會變成一個新的形狀。它會變成一個波浪，擁有自己的顏色、 裁剪和設定。

檔案	說明
reference/stripe-three.js	引擎。 Three.js r178：在頂點著色器中構建的折疊片狀、Stripe 的扭轉作為一系列轉彎、Stripe 的無光照著色、繪製的調色盤、後處理，以及包含以下五個有效波浪的 TAKES / PRESETS。複製它，然後添加預設。
reference/stripe-notes.md	stripe.com 英雄波浪的實際設定：折疊幾何體、著色器、攝影機，以及其所有四個波浪的設置。調整前請先閱讀。
reference/twist-ribbon.js、reference/nib-ribbon.ts	較舊的純 WebGL2 彩帶（OpenRouter、OpenEvidence）。僅適用於已運行的專案。
reference/ReactMount.tsx	帶有 fallback 機制的 React/Next 掛載。

0. 需要詢問的內容

提示應包含意義，絕非形狀。形狀是失敗的原因：每一個 按字面意思建立的命名形狀（莫比烏斯環、結、彈簧、龍捲風） 都變成了 3D 剪貼畫。OpenRouter 彩帶之所以有效，是因為其意義 （「多個模型輸入，一個端點輸出」）變成了設定（片狀 轉向側邊緣的位置），而不是產品的圖形。

最多在一條訊息中詢問三件事：

1. 理念，用一句話說明：產品的功能，或這個藝術作品要傳達的一件事。（「每個模型透過一個端點。」）
2. 顏色：品牌的顏色，或「從程式碼中讀取」（globals.css 中的記號、Tailwind 主題、標誌的顏色）。
3. 擺放位置：英雄橫幅（在文字下方或周圍）、一個區塊、一張卡片；淺色或深色頁面。

完全沒有提示也是一種有效用法：從程式碼中讀取顏色，在 Stripe 的淺色英雄位置使用 wave 預設，並用一句話說明。

一個命名形狀（例如「做一個龍捲風」）：不要建立該形狀。將其理解為 關於意義的提示（龍捲風：上升、旋轉、力量），並將其對應到下方 的設定。用一句話告訴使用者此技能保留波浪的原因。如果他們仍然堅持， 則在波浪旁邊建立該形狀作為一個額外的備選方案，並標明，以便他們比較。

從意義到設定（起點，非規則）：

理念感覺	從以下開始	改變
平靜、信任、金錢、健康	deep	速度 4e-5，冷色或中性暖色調色盤，寬裁剪
多合一、焦點、端點	wave	將邊緣朝向的拉伸（捏合點）放在文字下方或旁邊
能量、即時、速度	petal 或 fold	速度提升至 8e-5，暖色調色盤
改變、兩面、轉折	turn	翻轉顯示雙面
無特定	wave	僅使用品牌調色盤

輸出： 一個備選方案頁面上的兩到三個方案，使用不同預設、裁剪或調色盤的同一波浪家族。使用者選擇一個，刪除其餘。

1. 表單

• 折疊片狀：一個 400 x 400 的平面（128 x 256 分段）對折： 上層是一個 32 單位寬的條帶，彎曲成一個半圓柱體（圓形折疊）， 下層折疊在下方，兩端相距 4 單位，中間相距 2 單位。 豎立起來，有兩個四分之一轉：長度沿 x 軸，厚度沿 y 軸，寬度沿 z 軸。 厚實，邊緣圓潤，絕非細線。從頂點著色器中的 uv 構建（folded(uv)），因此法線是精確的。
• Stripe 的三個扭轉塑造了它：圍繞對角軸 (.5, 0, .5) 和 (0, .5, .5) 的旋轉， 每個都透過 Stripe 的軟階梯函數 exp2(-exp2(n) * pow(x, n)) 沿寬度 (u) 或長度 (v) 進行漸變。在 引擎中：根據 Stripe 的數字使用 stripeTwists([x, y, z], [powX, powY, powZ])。 x 扭轉沿長度隨噪聲漂移：這與噪聲波浪一起，是所有運動的來源。 各部分移動；整體從不旋轉。
• 噪聲波浪：p.y += amount * noise(x * fx + t, z * fz + t)。
• 在 Stripe 框架中的擺放：一個 1392 像素寬的畫布，使用像素單位，一個 正交攝影機位於 (100, 0, 5000)，繞 y 軸旋轉 0.02 弧度；每個 數字根據 畫布寬度 / 1392 縮放。始終大面積並被其框架裁剪， 絕不小且漂浮。
• 速度：Stripe 的時脈，每毫秒 4e-5 到 8e-5。刻意緩慢。

2. 五個有效的波浪

其中四個是 stripe.com 提供的波浪，具有其精確設定（扭轉 x、y、 z；冪次；噪聲波浪；擺放；發光；速度）。第五個增加了一個轉彎。

預設	來源	扭轉 x, y, z / 冪次	噪聲波浪	旋轉；縮放；位置	發光	速度，偏移
wave	Stripe 的淺色英雄	-0.65, 0.41, -0.58 / 3.63, 0.7, 3.95	0.005831, 0.016001, -7.821	-0.4496, -0.1176, 1.8744; 9, 8, 5; 380, -301.7, -11.1	1.98, 0.806, 0.834	4e-5, 17500
deep	Stripe 的深色英雄，在白色上繪製	-0.055, 0.077, -0.518 / 3.95, 5.85, 6.33	0.003234, 0.00799, 6.051	-0.1596, -0.2836, -2.8156; 10, 10, 7; -24.3, -56.4, -11.1	0.6, 0.589, 1	4e-5, 1150
fold	Stripe 的帳單英雄，旋轉以適應區塊	-0.424, 0.024, -1.312 / 1.81, 0.94, 4.76	0.005, 0.0212, 6.68	-0.666, -0.0314, 1.9; 6.05, 8.4, 6.99; 50, -100, -11.1	1.55, 1.174, 0.972	5.25e-5, 17500
petal	Stripe 的小型強調波浪，放大並旋轉	0.059, 0.32, -0.397 / 3.63, 0.44, 5.99	0.005831, 0.016001, -7.821	-2.8756, 3.0959, -1.6; 9, 9, 9; 0, -50, -11.1	3.86, 0.923, 1	8e-5, 2275
turn	淺色英雄，完全翻轉（唯一有效的附加轉彎）	淺色英雄的，加上 LENGTH (1, 0, 0) 沿 v, 2pi, 漂移 0.15	淺色英雄的	淺色英雄的	淺色英雄的	淺色英雄的

粗體數字與 Stripe 自己的擺放不同：Stripe 將這些波浪放置 在其自己的框架中，因此在較小的區塊中，它們會被裁剪成一個平面或 變得很小。重新放置，絕不重塑形：為了適應不同的框架， 僅更改旋轉、縮放和位置（HTML 中的 data-overrides）。

3. 著色：Stripe 自己的無光照著色

實際的 stripe.com 英雄波浪完全沒有光照；這就是為什麼它看起來明亮 且發光，而不是塑膠質感。其表面是：

1. 片狀 (u, v) 處的調色盤。
2. 沿長度的長而細的條紋：n0 = noise(u * 0.1, v * 0.5)， n1 = noise(u * (600 + 300 n0), v * 4 n0)（橫向非常細， 縱向幾乎恆定），添加為 n1 * 0.2 to 0.26 * (1 - blue * 0.9) * pdy * edge，其中 edge = 1 - pow(4u(1 - u), 3)（在開口邊緣處最強）。 它們在暖色上表現最佳；對於全藍色調色盤，將藍色衰減降低到大約 0.4。
3. 發光項 pdy：dFdy(v) * resolution.y * amount，從 -1..1 映射到 0..1，提升到一個冪次，由斜坡進行平滑階梯處理。其符號 區分片狀的兩個面；接近零時，片狀正在折疊。
4. 對比度、飽和度、色調，然後**+ (1 - pdy) * 0.25**：另一面 和折疊處變為淺色。這就是在 Stripe 折疊處看到的奶油色帶。
5. 不透明，深度測試。後處理：一個 0.02 弧度的旋轉模糊，保持 遠離中間的銳利帶，然後是存在顏色的顆粒（1.1）。 顆粒是 Stripe 的靜態抖動：color + mix(1, -1, random( gl_FragCoord.xy * 0.01)) * 4/255 * amount。它從不隨影格變化。 一個每影格重新隨機化的顆粒會閃爍並被視為噪聲（「與 Stripe 相比噪聲太多」）， 而且在影片中也會使檔案大小膨脹數倍。

沒有繪製的線條，沒有移動的光點，沒有正常光照，沒有折痕高光： 引擎較舊的帶光照著色僅作為選項保留（shading: "lit"）， 並且不是預設值。

4. 調色盤

以 Stripe 的方式繪製它，而不是隨機色塊（隨機色塊導致可見片狀的大部分區域 只有一種平坦的顏色）：

• 沿長度方向 (v)，主要漸變。淺色英雄：薰衣草藍 #9fb6ff，紫羅蘭 #a978ff，洋紅 #e05cff，熱粉紅 #ff4fa8，橙色 #ff7a2a，琥珀色 #ffa318。
• 橫跨寬度方向 (u)，朝開口邊緣的色調（大約 75%， 從每側 u = 0.22 開始淡出）：淺色英雄的薰衣草 #a9b6ff。
• 一些微弱的色塊（14 個，25%）僅用於增加變化。
• 引擎的 palette(along, edge, blobs) 構建了這個。其他有效的顏色組合： 海洋（藍色到青色），黃昏（橙色，粉紅，紫羅蘭），萊姆（青色，綠色， 黃色，橙色），餘燼（粉紅，紅色，橙色，黃色）。
• 顏色是品牌的，或類似 Stripe。裝飾性，絕非資料。

5. 在頁面中的擺放

文字覆蓋在波浪上（Stripe 的重疊）

在 stripe.com 上測量，2026-10-22。當波浪在標題下方運行時， Stripe 不會將其遮罩掉，也不會讓它覆蓋文字。它會兩次繪製文字：

1. 在畫布下方：以正常顏色顯示的文字（Stripe：標題 海軍藍 #061b31，主體灰色）。當波浪經過它時，波浪會隱藏它。
2. 在畫布上方（z-index 高於波浪層）：一個相同的 文字，相同的大小和位置，aria-hidden，帶有 mix-blend-mode: hard-light 和半透明著色顏色（Stripe： 標題 rgb(45, 37, 100)，深紫色；主體 rgba(0, 14, 255, 0.5)，半透明藍色）。在白色頁面上 它看起來像普通文字；在波浪上，字母會呈現波浪的顏色， 因此它們保持可讀，看起來像是印在絲綢上。

規則：

• 從品牌中選擇頂層文字的色調：標題顏色的深色、飽和版本， 以及主體顏色的半透明品牌藍色（或強調色）。在波浪最亮的地方檢查 螢幕截圖：每個單詞仍然可讀。

• 兩個文字副本必須完全匹配（相同的元素樣式，相同的包裝）：從一個 來源構建它們，並將它們堆疊在一個網格單元格中 (grid-area: 1 / 1)，這樣字體或寬度的更改會同時影響兩者。

• 螢幕閱讀器只獲取底部文字；頂部文字是 aria-hidden 並且不接受指標事件。按鈕和連結保持在底層， 絕不被畫布覆蓋（將它們保持波浪路徑之外， 或者僅將按鈕提升到波浪之上）。

• 減少動畫和靜態圖像 fallback 會保留兩個文字副本；混合模式 在靜態圖像上也能正常工作。

• 絕對不要讓文字使用白色底板或遮罩來躲避波浪：這正是 雙重文字所要避免的外觀。

• 波浪填滿或裁剪其區塊或英雄橫幅。圖說位於一個小的 頁面顏色的色塊上。

• 切勿位於導航下方或進入下一個章節。當裁剪後的波浪遇到 橫幅頂部時，使用 CSS 遮罩使其淡出；當遇到文字時，使用上方 的雙重文字。

• 藝術作品中沒有標籤、數字或網格線。

6. 工程規則

• Three.js r178 安裝到專案中，使用 import map 載入 ("three": "/node_modules/three/build/three.module.js")。
• THREE.ColorManagement.enabled = false；調色盤 NoColorSpace； ShaderMaterial 使用 GLSL1 風格。
• failIfMajorPerformanceCaveat: true；失敗時顯示相同波浪的 靜態圖像。監控影格時間：先移除後處理，然後降低 DPR，然後停止在一個 靜止影格上。
• DPR 上限為 2；使用 ResizeObserver；在畫面外和隱藏標籤頁中暫停； 減少動畫會繪製一個靜止影格。無指標反應。
• 一個頁面上最多約 13 個波浪；超過 16 個時瀏覽器會丟棄上下文。
• 切勿將 GLSL 變數命名為 step、mix 或 fract。

7. 工作流程

1. 獲取輸入（第 0 節）：理念、顏色、位置。無提示： 從程式碼中讀取顏色，使用 wave 預設。將理念映射到一個預設、一個 裁剪和一個調色盤；絕不映射到一個新的形狀。
2. 與實際內容進行比較：在 1440x900 解析度下截取 stripe.com 的英雄區域， 在 Stripe 的精確影格（1392 x 761，位於 x 337）的畫布中渲染我們的波浪， 並在相同裁剪下比較兩者。紋理和顏色是這樣判斷的，而不是憑記憶。
3. 對於包含多個波浪的頁面，使用上述預設，重新放置以適應 每個影格；在備選方案頁面上顯示替代方案。
4. 在完整大小下驗證（無頭 Chrome）：控制台乾淨且每個畫布 都已構建；1440 和 375；間隔四秒的兩個影格按四分之一進行比較 （不均勻變化：各部分移動；均勻變化：旋轉）；波浪填滿其 影格。
5. 提交時帶有說明了視覺上發生了什麼變化的訊息。

已拒絕，請勿重複

• 按字面意思理解一個命名形狀。 像「做一個龍捲風」這樣的提示是 關於意義的提示，而不是幾何形狀。
• 波浪以外的任何其他形式。 環、結、彈簧和沿路徑掃掠的管子 （「其他的看起來都不是很酷」），以及透過強烈扭轉將折疊片狀 推成其他形狀：螺旋漏斗、纏繞的線圈、纏結（「纏結、線圈和漏斗 非常糟糕」）。只有溫和的翻轉（turn）通過了，被認為是「可能還可以」。
• 帶光照的陰影片狀：它們在 Stripe 的無光照表面旁邊看起來像塑膠。
• 隨機色塊的調色盤：一種平坦的顏色填滿了可見的片狀。
• 單層片狀：「你可以看到薄薄的側面」。
• 整個物體旋轉：「整個東西都動了，而不是某些部分」。
• 移動的光線：「這只是 OpenRouter 的東西，在這裡我們模仿 Stripe」。
• 一個小波浪漂浮在它的影格中間。
• 在任何半透明物體上使用普通的 alpha 混合：會出現接縫。
• 繪製的線條、節點和線路圖、網格線、標籤