การทำ Liquid Glass ในเบราว์เซอร์: การหักเหของแสงด้วย CSS และ SVG

 (kube.io)
5 คะแนน โดย GN⁺ 2025-09-09 | 2 ความคิดเห็น | แชร์ทาง WhatsApp
  • แนะนำวิธีจำลอง เอฟเฟ็กต์ Liquid Glass ที่ Apple เปิดตัวในงาน WWDC 2025 บนเว็บด้วย CSS, SVG และการคำนวณการหักเหตามหลักฟิสิกส์
  • อธิบายหลักการของ การหักเหของแสง และกระบวนการจำลองการหักเหพร้อม การสร้างผิวกระจก โดยใช้ กฎของสเนลล์ (Snell's law)
  • ใช้ SVG displacement map เพื่อสร้าง ฟิลด์เวกเตอร์การเลื่อนตำแหน่ง ที่เหมาะกับการเรนเดอร์ และสาธิตว่าสามารถนำไปใช้กับคอมโพเนนต์ UI จริงได้
  • ใน Chrome สามารถใช้ SVG filter เป็น backdrop-filter ได้ และยกตัวอย่างการนำไปใช้กับ องค์ประกอบ UI หลายแบบ (แว่นขยาย, สวิตช์, เพลเยอร์ ฯลฯ)
  • ระบุว่าสามารถทำเอฟเฟ็กต์แบบเรียลไทม์ได้ แต่ยังมีปัญหาเรื่องการรองรับข้ามเบราว์เซอร์และข้อจำกัดด้านประสิทธิภาพ พร้อมกล่าวถึงแผนโอเพนซอร์สในอนาคต

บทนำ

Apple เปิดตัว เอฟเฟ็กต์ Liquid Glass เป็นครั้งแรกในงาน WWDC เดือนมิถุนายน 2025 เอฟเฟ็กต์นี้ทำให้องค์ประกอบของอินเทอร์เฟซดูเหมือน กระจกหักเหแบบโค้ง จึงมอบประสบการณ์ภาพที่คล้ายพื้นผิวกระจกจริง บทความนี้พาไล่ทำเอฟเฟ็กต์ลักษณะเดียวกันบนเว็บด้วย CSS, SVG displacement map และการคำนวณการหักเหตามหลักฟิสิกส์ เป้าหมายไม่ใช่การทำให้เหมือนสมบูรณ์ทุกจุด แต่เป็น proof of concept ที่ขยายต่อได้ ซึ่งจำลองคุณลักษณะสำคัญอย่างการหักเหและไฮไลต์จากการสะท้อน โดยเริ่มจากหลักพื้นฐานว่าแสง หักเห อย่างไรเมื่อผ่านวัสดุต่างชนิดกัน แล้วค่อยสร้างเอฟเฟ็กต์ทีละขั้น เดโมแบบโต้ตอบที่ให้ไว้ท้ายบทความใช้งานได้ถูกต้องใน Chrome เท่านั้นในตอนนี้

ทำความเข้าใจปรากฏการณ์การหักเห

การหักเห คือปรากฏการณ์ที่ทิศทางของแสงเปลี่ยนไปเมื่อเคลื่อนจากวัสดุหนึ่งไปสู่อีกวัสดุหนึ่ง เกิดขึ้นเพราะแต่ละวัสดุมี ความเร็วของแสง แตกต่างกัน และความสัมพันธ์ระหว่างมุมตกกระทบกับมุมหักเหสามารถอธิบายได้ด้วย กฎของสเนลล์ (Snell's law):

  • n1 * sin(θ1) = n2 * sin(θ2)
    • n1: ดัชนีหักเหของตัวกลางแรก
    • θ1: มุมตกกระทบ
    • n2: ดัชนีหักเหของตัวกลางที่สอง
    • θ2: มุมหักเห

สิ่งที่ดูได้จากไดอะแกรมแบบโต้ตอบ:

  • หากดัชนีหักเหของตัวกลางทั้งสองเท่ากัน แสงจะวิ่งตรงโดยไม่หักเห
  • หากตัวกลางที่สองมีดัชนีหักเหสูงกว่า แสงจะหักเหเข้าหาแนวปกติ
  • หากตัวกลางที่สองมีดัชนีหักเหต่ำกว่า แสงจะหักเหออกห่าง และบางกรณีอาจเกิดการสะท้อนกลับหมดภายใน
  • หากแสงตกกระทบตั้งฉากกับพื้นผิว มันจะวิ่งตรงโดยไม่ขึ้นกับดัชนีหักเห

ข้อจำกัดของโปรเจกต์นี้

เพื่อจำกัดความซับซ้อนและทำให้อัลกอริทึมง่ายขึ้น จึงตั้งเงื่อนไขดังต่อไปนี้:

  • ดัชนีหักเหของตัวกลางภายนอกเป็น 1 (อากาศ)
  • วัสดุกระจกภายในใช้ค่า 1.5 (กระจกทั่วไป)
  • พิจารณาเหตุการณ์การหักเหเพียงครั้งเดียว (ละเลยการหักเหตอนออก)
  • แสงตกกระทบตั้งฉากกับระนาบพื้นหลังเสมอ
  • วัตถุทั้งหมดเป็นรูปทรง 2D และใช้เฉพาะรูปวงกลม (สามารถขยายไปยังสี่เหลี่ยมผืนผ้า ฯลฯ ได้ แต่ต้องคำนวณเพิ่ม)
  • ไม่มีช่องว่างระหว่างวัตถุกับระนาบพื้นหลัง
  • ภายใต้เงื่อนไขเหล่านี้ สามารถใช้กฎของสเนลล์คำนวณรังสีทั้งหมดได้อย่างง่าย
โฆษณา

การสร้างพื้นผิวกระจก

ในการสร้างเอฟเฟ็กต์ Liquid Glass จำเป็นต้องนิยามหน้าตัดของกระจกเสมือน (เลนส์หรือแผงโค้ง) ด้วยฟังก์ชันทางคณิตศาสตร์

ฟังก์ชันพื้นผิว

พื้นผิวกระจกนิยามด้วย surface function ซึ่งแสดงความหนาตั้งแต่ขอบไปจนถึงด้านในที่แบนราบ

  • ค่าป้อนเข้า 0: ขอบนอก, 1: ปลายขอบ bezel (จุดเริ่มของระนาบ)
  • จากความหนาในแต่ละจุด ใช้อนุพันธ์เพื่อหา เวกเตอร์แนวปกติ ของพื้นผิว
const height = f(distanceFromSide);
const delta = 0.001;
const y1 = f(distanceFromSide - delta);
const y2 = f(distanceFromSide + delta);
const derivative = (y2 - y1) / (2 * delta);
const normal = { x: -derivative, y: 1 };

ประเภทหลักของฟังก์ชันพื้นผิว

  • Convex Circle: y = sqrt((1 - (1 - x))^2)
    • รูปส่วนโค้งวงกลมแบบเรียบง่าย จะแบนราบเร็วเมื่อเข้าใกล้ด้านใน ทำให้ขอบการหักเหเด่นชัด
  • Convex Squircle: y = ((1 - (1 - x))^4)^(1/4)
    • รูปทรงที่ Apple ใช้บ่อย เส้นแบ่งระหว่างส่วนโค้งกับพื้นราบนุ่มนวล จึงดูเป็นธรรมชาติแม้ขยายสเกล
  • Concave: y = 1 - Convex(x)
    • รูปเว้า (ตรงข้ามกับนูน) ทำให้แสงหักเหออกนอกขอบวัตถุ จึงต้องมีการสุ่มตัวอย่างนอกขอบ
  • Lip: y = mix(Convex(x), Concave(x), Smootherstep(x))
    • โครงสร้างผสมที่มีขอบยื่นและร่องตื้นบริเวณกึ่งกลาง
โฆษณา

เพียงสี่ฟังก์ชันนี้ก็เพียงพอสำหรับเปรียบเทียบความต่างของการหักเหตามรูปทรงพื้นผิวได้อย่างมีประสิทธิภาพ

การจำลอง

มีการจำลอง เส้นทางการหักเหของรังสีแสง สำหรับแต่ละฟังก์ชันพื้นผิวเพื่อให้เห็นความแตกต่างของเอฟเฟ็กต์จริง

  • แบบนูน (Convex) จะรวมเส้นทางแสงเข้าด้านใน ส่วนแบบเว้า (Concave) จะผลักออกด้านนอก
  • Liquid Glass ของ Apple ส่วนใหญ่ชอบใช้ทรงนูน (มีข้อยกเว้นอย่าง Switch)
  • ลูกศรพื้นหลังใช้การลงสีตามขนาดของการหักเห (การเลื่อนตำแหน่ง) เพื่อแสดงผล
  • จุดที่อยู่ห่างจากขอบด้านซ้ายและขวาเท่ากันจะมีการเลื่อนตำแหน่งเท่ากัน จึงนำกลับมาใช้ซ้ำอย่างมีประสิทธิภาพได้

การสร้างฟิลด์เวกเตอร์การเลื่อนตำแหน่ง

สร้างฟิลด์เวกเตอร์ที่บอก ทิศทางและขนาดของการเลื่อนตำแหน่งของแสง ในแต่ละตำแหน่งบนพื้นผิวกระจก

  • สำหรับรูปวงกลม จะเคลื่อนที่ตามแนวปกติโดยอิงจากขอบเสมอ

คำนวณขนาดการเลื่อนตำแหน่งล่วงหน้า

  • เนื่องจากขนาดการเลื่อนตำแหน่งมีความสมมาตรตามระยะจากขอบ จึงคำนวณล่วงหน้าตามหน่วยรัศมีแล้วเก็บเป็นอาร์เรย์
  • ใน 2D คำนวณเพียงครั้งเดียว (จำลองรังสี 127 เส้น) จากนั้นหมุนรอบแกน z เพื่อสร้างทั้งฟิลด์

การทำให้เวกเตอร์เป็น normalized

เพื่อใช้เวกเตอร์กับ displacement map จึงทำ normalization (สเกลสูงสุด 1.0)

  • ใช้ค่าการเลื่อนตำแหน่งสูงสุดเป็นฐาน แล้วหารขนาดของเวกเตอร์อื่นทั้งหมดเพื่อ normalize
const maximumDisplacement = Math.max(...displacementMagnitudes);
displacementVector_normalized = {
  angle: normalAtBorder,
  magnitude: magnitude / maximumDisplacement,
};

เมื่อแปลงกลับเป็นหน่วยพิกเซลจริงใน SVG displacement map จะคูณค่าการเลื่อนตำแหน่งสูงสุดกลับผ่าน scale เพื่อคืนขนาดเดิม

โฆษณา

SVG Displacement Map

เพื่อให้นำผลการคำนวณการหักเหทางคณิตศาสตร์ไป ใช้กับการเรนเดอร์ในเบราว์เซอร์ได้จริง จึงใช้ SVG displacement map

  • แต่ละแชนเนล (RGBA, 8 บิต) ของ <feDisplacementMap /> สามารถรับผิดชอบการเลื่อนตำแหน่งตามแกน X, Y ได้
  • แต่ละแชนเนลมีค่า 0~255 และ 128 หมายถึงค่ากลาง (ไม่มีการเลื่อนตำแหน่ง)
  • displacement map จำเป็นต้องแปลงเป็นรูปภาพก่อนเสมอ
<svg colorInterpolationFilters="sRGB">
  <filter id={id}>
    <feImage
      href={displacementMapDataUrl}
      x={0}
      y={0}
      width={width}
      height={height}
      result="displacement_map"
    />
    <feDisplacementMap
      in="SourceGraphic"
      in2="displacement_map"
      scale={scale}
      xChannelSelector="R"
      yChannelSelector="G"
    />
  </filter>
</svg>

Scale

แมปค่าของแชนเนล Red(X) และ Green(Y) ไปยังช่วง [−1, 1]

  • จากนั้นใช้พร็อพเพอร์ตี scale คูณขนาดการเลื่อนตำแหน่งสูงสุดในหน่วยพิกเซลเพื่อเรนเดอร์จริง
  • สามารถทำแอนิเมชันกับ scale เพื่อปรับความแรงของเอฟเฟ็กต์ได้

การแปลงเวกเตอร์ → ค่า Red/Green

  • แปลงเวกเตอร์การเลื่อนตำแหน่ง (มุม, ขนาด) ไปเป็นพิกัดฉาก x, y แล้วแมปเป็น 0~255 โดยอิง 128 เป็นค่ากลาง
const x = Math.cos(angle) * magnitude;
const y = Math.sin(angle) * magnitude;
const result = {
  r: 128 + x * 127,
  g: 128 + y * 127,
  b: 128,
  a: 255,
};

ภาพที่ได้สามารถนำไปใช้เป็น displacement map ของ SVG filter ได้

Playground

ใน Playground แบบโต้ตอบ สามารถเปลี่ยนรูปทรงพื้นผิว ความหนา bezel ความหนากระจก และ effect scale แบบเรียลไทม์ เพื่อดูการเปลี่ยนแปลงของฟิลด์การหักเห displacement map และผลเรนเดอร์สุดท้ายได้

โฆษณา

Specular Highlight

ขั้นสุดท้ายคือเพิ่ม specular highlight (ไฮไลต์สว่างตามขอบบนพื้นผิวกระจก)

  • การทำของ Apple ใช้แนวทาง rim light (แสงตามขอบ) ซึ่งความสว่างจะแตกต่างกันตามแนวปกติของพื้นผิวและมุมของแหล่งกำเนิดแสง

การรวมการหักเหและ Specular Highlight

ใน SVG filter ขั้นสุดท้าย จะโหลดทั้ง displacement map และภาพ specular highlight ผ่าน <feImage /> แล้วรวมกันด้วย <feBlend /> เพื่อสร้างเอฟเฟ็กต์สุดท้าย

  • สามารถปรับพารามิเตอร์ของฟิลเตอร์เพื่อสร้างภาพลักษณ์ที่หลากหลายได้

การใช้ SVG filter เป็น backdrop-filter

  • หากต้องการใส่เอฟเฟ็กต์ Liquid Glass ให้กับคอมโพเนนต์ UI จริง จำเป็นต้องอาศัยการรองรับ backdrop-filter: url(#...) ของ Chrome
  • เนื่องจากขนาดภาพของ backdrop-filter จะไม่ถูกปรับให้อัตโนมัติ จึงต้องเตรียม displacement map ให้ตรงกับขนาดของ element
.glass-panel {
  backdrop-filter: url(#liquidGlassFilterId);
}

การนำไปใช้กับคอมโพเนนต์ UI จริง

มีการสาธิตการนำ refraction และ displacement map ที่คำนวณได้ไปใช้กับคอมโพเนนต์ UI ที่ดูสมจริง

  • มีเพียง Chrome ที่สามารถประมวลผล SVG filter เป็น backdrop-filter ได้
  • ตัวอย่างเหล่านี้ไม่ใช่คอมโพเนนต์โปรดักชันจริง แต่มีไว้เพื่อสาธิตว่าการใส่เอฟเฟ็กต์ Liquid Glass กับ UI แบบต่าง ๆ จะออกมาเป็นอย่างไร

Magnifying Glass

  • ใช้ทั้ง refraction และ zoom สองด้าน พร้อม displacement map สองชุด
  • เพิ่มเอฟเฟ็กต์เชิงโต้ตอบด้วยเงาและการปรับสเกล
  • สามารถลากเพื่อเปลี่ยนรูปทรงเลนส์และสังเกตเส้นทางการหักเหได้
  • เพิ่ม specular highlight แบบนุ่มนวล
โฆษณา

Searchbox

  • ใส่เอฟเฟ็กต์ Liquid Glass ให้กับช่องอินพุตมาตรฐาน

Switch

  • ใช้ lip bezel โดยภายนอกเป็นนูน ภายในเป็นเว้า
  • เฉพาะสไลเดอร์ตรงกลางเท่านั้นที่ถูกขยาย/ย่อ ส่วนขอบจะใช้การหักเหของภาพด้านใน

Slider

  • ใช้ convex bezel แสดงค่าปัจจุบันผ่านกระจกโดยตรง และใช้การหักเหของพื้นหลังทั้งสองด้าน

Music Player

  • เลียนแบบสไตล์แผง Liquid Glass ของ Apple Music

  • ใช้ convex bezel และ specular highlight แบบบางเบาเพื่อเพิ่มมิติ

  • ใช้ iTunes Search API เพื่อโหลดข้อมูลอย่างอัลบั้มอาร์ตและชื่อเพลง

  • (แสดงข้อมูลชื่อเพลงและอัลบั้มในรูปแบบรายการ)

บทสรุป

ต้นแบบนี้นำแนวคิด Liquid Glass ของ Apple มาย่อให้อยู่ในรูปของ เอฟเฟ็กต์การหักเหแบบเรียลไทม์ และไฮไลต์อย่างง่าย ใช้งานได้จริงเฉพาะบน เบราว์เซอร์ที่ใช้ Chromium (หรือ Electron) ส่วนเบราว์เซอร์อื่นสามารถใช้เลเยอร์เบลอแทนได้
นี่เป็นการทดลองเชิงสำรวจ และการสร้าง displacement map ใหม่ทุกครั้งเมื่อ shape/size เปลี่ยนยังไม่มีประสิทธิภาพอย่างมาก (มีเพียงพารามิเตอร์บางอย่าง เช่น scale ของฟิลเตอร์ ที่ทำแอนิเมชันได้)
ผู้เขียนกำลังพิจารณาการเปิดซอร์สในอนาคต และระบุว่าสนใจเรื่องการปรับให้เหมาะสมและการจัดระเบียบโค้ดต่อไป

บทความที่เกี่ยวข้อง

2 ความคิดเห็น

 
bobross0 2025-09-16

น่าจะใกล้เคียงกับลิควิดกลาสที่เคยเห็นบนเว็บมากที่สุดแล้ว
 
GN⁺ 2025-09-09
ความเห็นจาก Hacker News
  • เคยทำฟีเจอร์คล้ายกันด้วย WebGL shader มาก่อน ข้อดีคือใช้งานได้บนหลายเบราว์เซอร์ และได้แชร์ https://real-glass.vercel.app ไว้ด้วย จุดที่ยากคือการทำเอฟเฟ็กต์การหักเหหลังองค์ประกอบ HTML จริงให้สมจริง
    • สงสัยว่าสาเหตุของอาการ ghost/ดีเลย์ที่เกิดขึ้นตอนวางเอฟเฟ็กต์กระจกทับบนข้อความแล้วเลื่อนมันไปมาคืออะไร
    • คิดว่ามันเจ๋งมาก ดูเหมือนทำเอฟเฟ็กต์การกระจายสีที่ขอบได้ด้วย
    • ภาพลักษณ์สวยมาก แต่ถ้าจะใช้จริง การตอบสนองช้าเกินไป ของผู้โพสต์ต้นฉบับลื่นกว่ามาก
    • น่าประทับใจ
  • น่าประทับใจที่แม้แต่บน M4-Max Macbook Pro ก็ยังกระตุกทุกครั้งที่เลื่อนหน้าจอ ถ้าเทคนิคแบบนี้ถูกนำไปใช้กับ UI ทั้งหมดก็อดกังวลเรื่องประสิทธิภาพไม่ได้ เหตุผลที่ Apple ทำได้คงเป็นเพราะมีการ optimize อย่างสุดขีด
    • ในฐานะผู้เขียนบทความ เดิมทีตั้งใจจะแก้ปัญหาประสิทธิภาพไว้ก่อน แต่มีคนนำไปโพสต์บน HN เร็วกว่าที่คิด สิ่งที่ชี้มาก็ถูก ตอนนี้มันยังค่อนข้างช้าและต้องการการ optimize เพิ่มเติม ไม่ใช่แค่ refraction/displacement map แต่ส่วนอื่นอย่าง visualization ก็ยังไม่ได้ optimize เช่นกัน
    • มีการปรับปรุงประสิทธิภาพบน Chrome ไปอย่างรวดเร็ว เลยน่าจะดีขึ้นเล็กน้อย ส่วนบน Safari การเรนเดอร์ SVG ยังช้าอยู่ ยังมีจุดให้ปรับปรุงอีกเพราะถูกโพสต์แบบไม่คาดคิด
    • เว็บไซต์นี้เลื่อนได้ไม่ลื่น โดยมากแล้ว CSS ใช้ GPU ได้ไม่ดีนัก ดูเหมือน Apple จะเพิ่มการประมวลผลพิเศษไว้ในชิปเพื่อจัดการ UI
    • เครื่องผมก็เป็นเหมือนกัน และเอฟเฟ็กต์ขอบก็แสดงผลได้ไม่ถูกต้องด้วย
  • เนื้อหาก็ดี แต่โครงสร้างและคุณภาพของบทความโดยรวมก็ดีเยี่ยมด้วย แนวคิด Liquid glass เองไม่ได้เพิ่มข้อดีด้าน UX อย่างมีนัยสำคัญนัก (แถมถ้าใช้มากไปอาจทำร้าย UX ได้) แต่ก็เป็นประสบการณ์ที่สดใหม่และสนุก
  • มีการเน้นว่านี่เป็นเดโมสำหรับ Chrome โดยเฉพาะ และเดโมอินเทอร์แอ็กทีฟตอนท้ายใช้ได้เฉพาะบน Chrome เท่านั้น (เพราะข้อจำกัดของ backdrop-filter จาก SVG filter) ส่วนการอ่านบทความหรือการจำลองแบบง่ายยังทำได้บนเบราว์เซอร์อื่น จากนั้นก็มีมุกตอบกลับว่า "ขอประณามไปถึงคนทั้งตระกูล!"
    • วิธีแบบนี้เป็นสิ่งที่ยอมรับได้อย่างหลีกเลี่ยงไม่ได้ เพราะจุดประสงค์คือเพื่อแสดงให้เห็นฟีเจอร์ที่รองรับเฉพาะบางเบราว์เซอร์
    • น่าขำตรงที่ในกรณีของผม หน้าเพจบน Chrome กลับช้ากว่าและเลื่อนกระตุกกว่า ขณะที่บน Firefox แม้เอฟเฟ็กต์จะไม่รองรับแต่กลับลื่นกว่าอยู่ดี ถึงอย่างนั้นก็ยังทึ่งกับตัวบทความมาก
    • ผมก็มีปฏิกิริยาคล้ายกัน แต่แปลกดีที่บน FireFox ก็ยังดูโอเคพอสมควร
    • ถ้าอยากดูแหล่งอ้างอิง สามารถดูได้ที่ https://youtu.be/GamP4chXJ2I?t=17
  • คาดอยู่แล้วว่าภาษาออกแบบ liquid glass จะถูกนำมาใช้บนเว็บ แต่ถ้าเว็บไซต์จะสูบแบตเตอรี่ของผมเพราะการบิดเบือนข้อความ ผมก็คงไม่อยู่นาน หลายคนพูดเรื่องอาการกระตุกไปแล้ว เลยจะไม่พูดซ้ำ
  • เป็นงานที่สวยและเห็นถึงความใส่ใจมาก แต่ liquid glass หมายถึงภาษาการออกแบบทั้งระบบ เช่น องค์ประกอบที่อยู่ใกล้กันรวมตัวแบบ metaball, โหมด tint/clear ที่หลากหลาย, และคอนโทรลที่อยู่บนเลเยอร์แยกจากคอนเทนต์ ดังนั้นงานนี้พูดได้ว่าใกล้เคียงกับแค่ "glass shader" มากกว่า
    • การรวมองค์ประกอบเข้าด้วยกันแก้ได้ด้วยฟิลเตอร์ที่ง่ายกว่ามากอย่างฟิลเตอร์ Goo ซึ่งเป็นวิธีที่ใช้กันมานานแล้ว ตัวอย่างสำหรับอ้างอิง: https://codepen.io/lenymo/pen/pJzWVy
  • ได้ fork ไลบรารี JS สำหรับ liquid-glass แล้วเพิ่มแพตช์แก้ตำแหน่ง ใช้ตอนพรีเซนต์น่าจะสนุกดี ซอร์สโค้ด: https://github.com/nkzw-tech/liquid-glass
    • เจ๋งดี จริง ๆ แล้วผมชอบอันนี้มากกว่า
  • บน Firefox เอฟเฟ็กต์ทำงานได้แค่บางส่วน (แต่แลกมากับประสิทธิภาพที่ดี!) แต่นี่เป็นการทำออกมาดีที่สุดเท่าที่เคยเห็น ช่วงไม่กี่วันที่ผ่านมาผมเพิ่งทำรีเสิร์ชเรื่องนี้มาเยอะเลยยิ่งประทับใจ สิ่งที่ชอบที่สุดคือดีไซน์ของเว็บไซต์และ visualization แบบอินเทอร์แอ็กทีฟที่ทำอย่างประณีต ให้ความรู้สึกว่าอยู่ในระดับเดียวกับงานของ Bartosz Ciechanowski และ Josh Comeau หวังว่าจะมีการเปิดซอร์สโค้ด
  • คิดว่าเป็นความพยายามที่ยอดเยี่ยมแม้จะมีข้อจำกัดเรื่องการรองรับของเบราว์เซอร์ ตัวอย่างแบบอินไลน์ที่อินเทอร์แอ็กทีฟช่วยเพิ่มคุณค่าอย่างมาก ชั่วขณะหนึ่งให้ความรู้สึกราวกับกำลังอ่านบทความของ Ciechanowski (อ้างอิง: https://ciechanow.ski/)
  • สงสัยว่า scrollbar และปุ่มแบบ ray-traced ที่ออกมาใหม่นั้นใช้งานได้ดีกว่าจริงหรือไม่ และช่วยเพิ่มประสิทธิภาพการทำงานมากกว่าปุ่มของ text mode Turbo Vision หรือ Windows 3 ในอดีตหรือเปล่า