From 0df20bd4cbc70f7f08dea8d328c6db2a92bf770e Mon Sep 17 00:00:00 2001
From: undefined303 <54739035+undefined303@users.noreply.github.com>
Date: Wed, 25 Feb 2026 18:30:46 +0800
Subject: [PATCH] Add warp to canvas and make warp's position sticky in narrow
 screen

---
 examples/index.html | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)
diff --git a/examples/index.html b/examples/index.html
index c7c21a53..eeafb825 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -6,7 +6,7 @@
 		<title>skinview3d</title>
 		<style>
 			body {
-				margin: 0;
+				margin: unset !important;
 				padding: 20px;
 				display: flex;
 				flex-direction: row;
@@ -37,13 +37,20 @@
 				#skin_container {
 					width: 100%;
 					height: 400px;
-					position: relative;
 					top: 0;
 				}
 
 				.controls {
 					padding-right: 0;
 				}
+				#canvas_warp {
+					width: 100%;
+					top: 0px;
+					background: rgba(255, 255, 255, 0.6);
+					position: sticky;
+					backdrop-filter: blur(10px);
+					padding-bottom: 10px;
+				}
 			}
 
 			.control-section {
@@ -76,8 +83,9 @@
 	</head>
 
 	<body>
-		<canvas id="skin_container"></canvas>
-
+		<div id="canvas_warp">
+			<canvas id="skin_container"></canvas>
+		</div>
 		<div class="controls">
 			<button id="reset_all" type="button" class="control">Reset All</button>
 
