{"title":"New Release","description":"","products":[{"product_id":"icon-cursor-circle","title":"Icon Cursor - Circle","description":"\u003cp data-end=\"926\" data-start=\"675\"\u003e\u003cmeta charset=\"utf-8\"\u003eBuilt for designers who care about details. \u003c\/p\u003e\n\u003cp data-end=\"926\" data-start=\"675\"\u003eIcon Cursor – Circle replaces the default browser cursor with a customizable circular cursor that responds to user interaction. Subtle, intentional, and highly adaptable — this component adds a layer of polish without distracting from your design.\u003c\/p\u003e\n\u003cp data-end=\"1410\" data-start=\"1395\"\u003eYOU CAN ADJUST:\u003c\/p\u003e\n\u003cul\u003e\n\u003cli data-end=\"1427\" data-start=\"1412\"\u003e\n\u003cstrong data-end=\"1427\" data-start=\"1412\"\u003eBase Cursor - \u003c\/strong\u003eSize, Color and Opacity\u003c\/li\u003e\n\u003cli data-end=\"1427\" data-start=\"1412\"\u003e\n\u003cstrong data-end=\"1471\" data-start=\"1454\"\u003eOn Link Hover - \u003c\/strong\u003eSize, Color and Opacity\u003c\/li\u003e\n\u003cli data-end=\"1427\" data-start=\"1412\"\u003e\n\u003cstrong data-end=\"1544\" data-start=\"1519\"\u003eOn Click (Mouse Down) - \u003c\/strong\u003eSize and Opacity\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\u003c\/ul\u003e\n\u003cp data-section-id=\"170ewvu\" data-start=\"62\" data-end=\"82\"\u003e\u003cspan role=\"text\"\u003eWHAT'S INCLUDED:\u003c\/span\u003e\u003c\/p\u003e\n\u003cp data-start=\"84\" data-end=\"175\"\u003e\u003cmeta charset=\"utf-8\"\u003eA simple step-by-step PDF guide is included with your purchase. Installs in minutes using Showit’s Custom Code settings — just copy, paste, and you’re set.\u003c\/p\u003e\n\u003cp data-start=\"177\" data-end=\"291\"\u003eIncludes one JavaScript snippet and one CSS block, both clearly labeled so you know exactly where everything goes.\u003c\/p\u003e\n\u003cp data-start=\"293\" data-end=\"385\"\u003eAutomatically disabled on touch devices, so it runs smoothly on desktop without extra setup.\u003c\/p\u003e","brand":"ShowCode Studio","offers":[{"title":"Default Title","offer_id":44504666505286,"sku":null,"price":7.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0709\/7588\/1286\/files\/SignatureCursorBasic-ExampleVideo.gif?v=1774035888"},{"product_id":"double-image-flip","title":"Double Image Flip","description":"\u003cp data-start=\"675\" data-end=\"926\"\u003eBuilt for designers who care about details. \u003c\/p\u003e\n\u003cp data-start=\"675\" data-end=\"926\"\u003e\u003cmeta charset=\"utf-8\"\u003eDouble Image Flip creates a double-sided image that rotates on a 3D axis, revealing a second image through smooth, continuous motion. Subtle, intentional, and visually striking — this component adds depth without overwhelming your design.\u003c\/p\u003e\n\u003cp data-start=\"1395\" data-end=\"1410\"\u003eYOU CAN ADJUST:\u003c\/p\u003e\n\u003cul\u003e\n\u003cli data-start=\"1412\" data-end=\"1427\"\u003e\n\u003cmeta charset=\"utf-8\"\u003e\n\u003cstrong\u003eImages\u003c\/strong\u003e – Front and Back\u003c\/li\u003e\n\u003cli data-start=\"1412\" data-end=\"1427\"\u003e\n\u003cstrong\u003eSize\u003c\/strong\u003e – Scale to fit your layout\u003c\/li\u003e\n\u003cli data-start=\"1412\" data-end=\"1427\"\u003e\n\u003cstrong\u003eSpeed\u003c\/strong\u003e – Adjust rotation speed\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\u003c\/ul\u003e\n\u003cp data-end=\"82\" data-start=\"62\" data-section-id=\"170ewvu\"\u003e\u003cspan role=\"text\"\u003eWHAT'S INCLUDED:\u003c\/span\u003e\u003c\/p\u003e\n\u003cp data-start=\"1063\" data-end=\"1250\"\u003eA simple step-by-step PDF guide is included with your purchase. Installs in minutes using Showit’s Custom Code settings and a single embed — just copy, paste, and update your image links.\u003c\/p\u003e\n\u003cp data-start=\"1252\" data-end=\"1361\"\u003eIncludes one CSS block and one embed snippet, both clearly labeled so you know exactly where everything goes.\u003c\/p\u003e\n\u003cp data-start=\"1363\" data-end=\"1436\"\u003eWorks seamlessly on desktop and mobile with no additional setup required.\u003c\/p\u003e","brand":"ShowCode Studio","offers":[{"title":"Default Title","offer_id":44784891723846,"sku":null,"price":9.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0709\/7588\/1286\/files\/DoubleImageSpin-ExampleVideo.gif?v=1774066649"},{"product_id":"icon-cursor-set","title":"Icon Cursor Set - Diamond, Star, Circle Glow","description":"\u003cp data-end=\"654\" data-start=\"468\"\u003eIcon Cursor Set replaces the default browser cursor with a collection of three custom icon cursors that respond to user interaction. A small detail that makes your site feel more custom.\u003c\/p\u003e\n\u003cp data-end=\"577\" data-start=\"562\"\u003eYOU CAN ADJUST:\u003c\/p\u003e\n\u003cp data-end=\"772\" data-start=\"579\"\u003eBase Cursor - Size, Color and Smoothness\u003cbr data-end=\"622\" data-start=\"619\"\u003eOn Link Hover - Scale and 360° Spin Animation\u003cbr data-end=\"670\" data-start=\"667\"\u003eFollow Speed - How tightly the cursor tracks movement\u003cbr data-end=\"726\" data-start=\"723\"\u003eSpin Speed - Duration of the hover animation\u003c\/p\u003e\n\u003cp data-end=\"789\" data-start=\"774\"\u003eICONS INCLUDED:\u003c\/p\u003e\n\u003cp data-end=\"974\" data-start=\"891\"\u003eDiamond\u003cbr data-end=\"901\" data-start=\"898\"\u003eStar (adjustable points and depth)\u003cbr data-end=\"938\" data-start=\"935\"\u003eCircle Glow (glow to solid on hover)\u003c\/p\u003e\n\u003cp data-end=\"834\" data-start=\"818\"\u003eWHAT'S INCLUDED:\u003c\/p\u003e\n\u003cp data-end=\"991\" data-start=\"836\"\u003eA simple step-by-step PDF guide is included with your purchase. Installs in minutes using Showit’s Custom Code settings — just copy, paste, and you’re set.\u003c\/p\u003e\n\u003cp data-end=\"1201\" data-start=\"1109\"\u003eAutomatically disabled on touch devices, so it runs smoothly on desktop without extra setup.\u003c\/p\u003e","brand":"ShowCode Studio","offers":[{"title":"Default Title","offer_id":44789484093510,"sku":null,"price":14.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0709\/7588\/1286\/files\/Diamond_Cursor_-_Example_Video.gif?v=1774199727"},{"product_id":"editorial-hover-grid","title":"Editorial Hover Grid","description":"\u003cp data-end=\"926\" data-start=\"675\"\u003e\u003cmeta charset=\"utf-8\"\u003eBuilt for designers who care about details. \u003c\/p\u003e\n\u003cp data-end=\"926\" data-start=\"675\"\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cmeta charset=\"utf-8\"\u003eEditorial Hover Grid creates a high-end interactive image experience for your Showit website with floating hover previews, responsive scaling, and movement. Designed to feel elevated and immersive, this component helps you showcase more imagery in a more engaging way encouraging visitors to explore, interact, and click deeper into your website.\u003cbr\u003e\u003c\/p\u003e\n\u003cp data-end=\"1410\" data-start=\"1395\"\u003eYOU CAN ADJUST:\u003c\/p\u003e\n\u003cul\u003e\n\u003cli data-end=\"1427\" data-start=\"1412\"\u003e\n\u003cstrong data-end=\"1427\" data-start=\"1412\"\u003eImage Ratios - \u003c\/strong\u003eFor background images and hover images\u003c\/li\u003e\n\u003cli data-end=\"1427\" data-start=\"1412\"\u003e\n\u003cstrong data-end=\"1471\" data-start=\"1454\"\u003eHover Zoom Effect - \u003c\/strong\u003eControl how much the background images zoom when hovered\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cul\u003e\u003c\/ul\u003e\n\u003cp data-section-id=\"170ewvu\" data-start=\"62\" data-end=\"82\"\u003e\u003cspan role=\"text\"\u003eWHAT'S INCLUDED:\u003c\/span\u003e\u003c\/p\u003e\n\u003cp data-start=\"672\" data-end=\"727\"\u003eInstall the canvas in minutes using Showit’s Share Key. A detailed instruction guide is included. (Please note the cursor effect is not included. It can be purchased \u003ca rel=\"noopener\" href=\"https:\/\/showcodestudio.com\/products\/icon-cursor-circle\" target=\"_blank\"\u003ehere\u003c\/a\u003e.)\u003c\/p\u003e\n\u003cp data-start=\"921\" data-end=\"1005\"\u003eDesigned to be simple to customize while still feeling fully custom on your website.\u003c\/p\u003e\n\u003cp data-end=\"1734\" data-start=\"1719\" data-section-id=\"188ofbi\"\u003ePERFECT FOR:\u003c\/p\u003e\n\u003cul data-end=\"1877\" data-start=\"1735\"\u003e\n\u003cli data-end=\"1750\" data-start=\"1735\" data-section-id=\"1f9ugc\"\u003ePhotographers\u003c\/li\u003e\n\u003cli data-end=\"1769\" data-start=\"1751\" data-section-id=\"1or9j74\"\u003eCreative studios\u003c\/li\u003e\n\u003cli data-end=\"1781\" data-start=\"1770\" data-section-id=\"ul1b5q\"\u003eDesigners\u003c\/li\u003e\n\u003cli data-end=\"1791\" data-start=\"1782\" data-section-id=\"5snorc\"\u003eCoaches\u003c\/li\u003e\n\u003cli data-end=\"1822\" data-start=\"1792\" data-section-id=\"17y9iai\"\u003eFashion and editorial brands\u003c\/li\u003e\n\u003cli data-end=\"1843\" data-start=\"1823\" data-section-id=\"8kn3x6\"\u003ePortfolio websites\u003c\/li\u003e\n\u003cli data-end=\"1877\" data-start=\"1844\" data-section-id=\"vwb9iq\"\u003eLuxury-inspired Showit websites\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"ShowCode Studio","offers":[{"title":"Default Title","offer_id":45074056249414,"sku":null,"price":10.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0709\/7588\/1286\/files\/Editorial_Hover_Grid.gif?v=1779408767"},{"product_id":"split-reveal-scroll","title":"Split Reveal Scroll","description":"\u003cdiv class=\"qMYqUG_convSearchResultHighlightRoot\"\u003e\n\u003cdiv data-is-intersecting=\"true\" data-turn-id-container=\"request-WEB:11d4d5af-272b-4078-bf44-df1cba2354d8-16\" class=\"\"\u003e\n\u003cdiv class=\"relative w-full overflow-visible\"\u003e\n\u003csection data-turn=\"assistant\" data-scroll-anchor=\"false\" data-testid=\"conversation-turn-8\" data-turn-id-container=\"request-WEB:11d4d5af-272b-4078-bf44-df1cba2354d8-16\" data-turn-id=\"request-WEB:11d4d5af-272b-4078-bf44-df1cba2354d8-16\" dir=\"auto\" class=\"text-token-text-primary w-full focus:outline-none has-data-writing-block:pointer-events-none [\u0026amp;:has([data-writing-block])\u0026gt;*]:pointer-events-auto R6Vx5W_threadScrollVars scroll-mb-[calc(var(--scroll-root-safe-area-inset-bottom,0px)+var(--thread-response-height))] scroll-mt-[calc(var(--header-height)+min(200px,max(70px,20svh)))]\"\u003e\n\u003cdiv class=\"text-base my-auto mx-auto pb-10 [--thread-content-margin:var(--thread-content-margin-xs,calc(var(--spacing)*4))] @w-sm\/main:[--thread-content-margin:var(--thread-content-margin-sm,calc(var(--spacing)*6))] @w-lg\/main:[--thread-content-margin:var(--thread-content-margin-lg,calc(var(--spacing)*16))] px-(--thread-content-margin)\"\u003e\n\u003cdiv class=\"[--thread-content-max-width:40rem] @w-lg\/main:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 group\/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col agent-turn\"\u003e\n\u003cdiv class=\"flex max-w-full flex-col gap-4 grow\"\u003e\n\u003cdiv data-turn-start-message=\"true\" class=\"min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal outline-none keyboard-focused:focus-ring [.text-message+\u0026amp;]:mt-1\" data-message-model-slug=\"gpt-5-5\" dir=\"auto\" data-message-id=\"649d8f4d-0d8f-4843-b158-c20b316a120c\" data-message-author-role=\"assistant\" tabindex=\"0\"\u003e\n\u003cdiv class=\"flex w-full flex-col gap-1 empty:hidden\"\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full dark markdown-new-styling\"\u003e\n\u003cp data-end=\"421\" data-start=\"51\"\u003eSplit Reveal Scroll creates a cinematic scroll-based reveal effect for your Showit website where elements slide apart as visitors scroll, uncovering hidden content underneath. This component transforms static sections into interactive moments that encourage visitors to slow down, engage, and explore deeper into your website.\u003c\/p\u003e\n\u003cp data-end=\"564\" data-start=\"423\"\u003ePerfect for showcasing headlines, imagery, offers, portfolio content, videos, or layered brand messaging in a more elevated and high-end way.\u003c\/p\u003e\n\u003cp data-end=\"582\" data-start=\"567\"\u003eYOU CAN ADJUST:\u003c\/p\u003e\n\u003cp data-end=\"939\" data-start=\"584\"\u003e\u003cmeta charset=\"utf-8\"\u003eStart Delay - Control when the movement begins during scroll\u003cbr data-end=\"80\" data-start=\"77\"\u003eScroll Length - Adjust how quickly or slowly the animation completes\u003cbr data-end=\"151\" data-start=\"148\"\u003eDistance - Control how far the elements move apart horizontally\u003cbr data-end=\"776\" data-start=\"773\"\u003eContent Behind Reveal - Adjust or add text, buttons, images, or video behind the moving images\u003cbr\u003e\u003c\/p\u003e\n\u003cp data-end=\"958\" data-start=\"942\"\u003eWHAT'S INCLUDED:\u003c\/p\u003e\n\u003cp data-end=\"1057\" data-start=\"960\"\u003eInstall the canvas in minutes using Showit’s Share Key. A detailed instruction guide is included.\u003cbr\u003e\u003c\/p\u003e\n\u003cp data-end=\"1143\" data-start=\"1059\"\u003eDesigned to be simple to customize while still feeling fully custom on your website.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"z-0 flex min-h-[46px] justify-start\"\u003ePLEASE NOTE: The other canvases shown in the video are not included. They're just shown so you can see the effect. The circle cursor is not included but can be purchased \u003ca rel=\"noopener\" href=\"https:\/\/showcodestudio.com\/products\/icon-cursor-circle\" target=\"_blank\"\u003ehere\u003c\/a\u003e.\u003c\/div\u003e\n\u003cdiv class=\"mt-3 w-full empty:hidden\"\u003e\n\u003cdiv class=\"text-center\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003cdiv class=\"contents\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"pointer-events-none -mt-px h-px translate-y-[calc(var(--scroll-root-safe-area-inset-bottom)-14*var(--spacing))]\" aria-hidden=\"true\"\u003e\u003cbr\u003e\u003c\/div\u003e","brand":"ShowCode Studio","offers":[{"title":"Default Title","offer_id":45074601902150,"sku":null,"price":12.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0709\/7588\/1286\/files\/Split-Reveal-Scroll.gif?v=1779429906"},{"product_id":"image-stack-peel","title":"Image Stack Peel","description":"\u003cdiv class=\"qMYqUG_convSearchResultHighlightRoot\"\u003e\n\u003cdiv data-is-intersecting=\"true\" data-turn-id-container=\"request-WEB:11d4d5af-272b-4078-bf44-df1cba2354d8-16\" class=\"\"\u003e\n\u003cdiv class=\"relative w-full overflow-visible\"\u003e\n\u003csection data-turn=\"assistant\" data-scroll-anchor=\"false\" data-testid=\"conversation-turn-8\" data-turn-id-container=\"request-WEB:11d4d5af-272b-4078-bf44-df1cba2354d8-16\" data-turn-id=\"request-WEB:11d4d5af-272b-4078-bf44-df1cba2354d8-16\" dir=\"auto\" class=\"text-token-text-primary w-full focus:outline-none has-data-writing-block:pointer-events-none [\u0026amp;:has([data-writing-block])\u0026gt;*]:pointer-events-auto R6Vx5W_threadScrollVars scroll-mb-[calc(var(--scroll-root-safe-area-inset-bottom,0px)+var(--thread-response-height))] scroll-mt-[calc(var(--header-height)+min(200px,max(70px,20svh)))]\"\u003e\n\u003cdiv class=\"text-base my-auto mx-auto pb-10 [--thread-content-margin:var(--thread-content-margin-xs,calc(var(--spacing)*4))] @w-sm\/main:[--thread-content-margin:var(--thread-content-margin-sm,calc(var(--spacing)*6))] @w-lg\/main:[--thread-content-margin:var(--thread-content-margin-lg,calc(var(--spacing)*16))] px-(--thread-content-margin)\"\u003e\n\u003cdiv class=\"[--thread-content-max-width:40rem] @w-lg\/main:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 group\/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col agent-turn\"\u003e\n\u003cdiv class=\"flex max-w-full flex-col gap-4 grow\"\u003e\n\u003cdiv data-turn-start-message=\"true\" class=\"min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal outline-none keyboard-focused:focus-ring [.text-message+\u0026amp;]:mt-1\" data-message-model-slug=\"gpt-5-5\" dir=\"auto\" data-message-id=\"649d8f4d-0d8f-4843-b158-c20b316a120c\" data-message-author-role=\"assistant\" tabindex=\"0\"\u003e\n\u003cdiv class=\"flex w-full flex-col gap-1 empty:hidden\"\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full dark markdown-new-styling\"\u003e\n\u003cp data-end=\"1143\" data-start=\"1059\"\u003eDEMO LINK: \u003ca href=\"https:\/\/image-stack-peel.showit.site\/\"\u003ehttps:\/\/image-stack-peel.showit.site\/\u003c\/a\u003e\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"mt-3 w-full empty:hidden\"\u003e\n\u003cdiv class=\"text-center\"\u003e\n\u003cmeta charset=\"utf-8\"\u003e\n\u003cp data-start=\"51\" data-end=\"194\"\u003eImage Stack Peel creates a layered scroll-based animation for your Showit website where stacked images peel away one-by-one as visitors scroll.\u003c\/p\u003e\n\u003cp data-start=\"196\" data-end=\"453\"\u003eInstead of building multiple overlapping canvases in Showit and manually adjusting spacing, layering, and responsiveness yourself, this component is already pre-configured for you. Simply replace the 4 image links with your own photos and publish your site.\u003c\/p\u003e\n\u003cp data-start=\"455\" data-end=\"629\"\u003eDesigned to feel cinematic, tactile, and editorial, this component transforms static imagery into a more immersive interactive experience without the usual setup frustration.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"pointer-events-none -mt-px h-px translate-y-[calc(var(--scroll-root-safe-area-inset-bottom)-14*var(--spacing))]\" aria-hidden=\"true\"\u003e\n\u003cmeta charset=\"utf-8\"\u003e\n\u003cp data-end=\"2029\" data-start=\"2009\" data-section-id=\"q1y7di\"\u003eYOU CAN CUSTOMIZE:\u003c\/p\u003e\n\u003cul data-end=\"2137\" data-start=\"2031\"\u003e\n\u003cli data-end=\"2067\" data-start=\"2031\" data-section-id=\"1g0z4ss\"\u003eReplace the 4 images with your own\u003c\/li\u003e\n\u003cli data-end=\"2137\" data-start=\"2068\" data-section-id=\"1ovodf2\"\u003eCorner Radius — Adjust image rounding to match your website style\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp data-section-id=\"1hm8c6y\" data-start=\"2144\" data-end=\"2162\"\u003eWHAT'S INCLUDED:\u003c\/p\u003e\n\u003cp data-start=\"2164\" data-end=\"2305\"\u003eInstall the Showit page in minutes using Showit’s Share Key. A detailed instruction guide is included to walk you through setup and customization. \u003c\/p\u003e\n\u003cp data-start=\"2164\" data-end=\"2305\"\u003e\u003cmeta charset=\"utf-8\"\u003ePLEASE NOTE: The other canvases shown in the video are an example. They do not have to be used. They're just shown so you can see the effect. \u003c\/p\u003e\n\u003c\/div\u003e","brand":"ShowCode Studio","offers":[{"title":"Default Title","offer_id":45080162172998,"sku":null,"price":9.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0709\/7588\/1286\/files\/ShowCodeStudio-ImageStackPeel.gif?v=1779604626"},{"product_id":"split-collage-scroll","title":"Split Collage Scroll","description":"\u003cdiv class=\"qMYqUG_convSearchResultHighlightRoot\"\u003e\n\u003cdiv data-is-intersecting=\"true\" data-turn-id-container=\"request-WEB:11d4d5af-272b-4078-bf44-df1cba2354d8-16\" class=\"\"\u003e\n\u003cdiv class=\"relative w-full overflow-visible\"\u003e\n\u003csection data-turn=\"assistant\" data-scroll-anchor=\"false\" data-testid=\"conversation-turn-8\" data-turn-id-container=\"request-WEB:11d4d5af-272b-4078-bf44-df1cba2354d8-16\" data-turn-id=\"request-WEB:11d4d5af-272b-4078-bf44-df1cba2354d8-16\" dir=\"auto\" class=\"text-token-text-primary w-full focus:outline-none has-data-writing-block:pointer-events-none [\u0026amp;:has([data-writing-block])\u0026gt;*]:pointer-events-auto R6Vx5W_threadScrollVars scroll-mb-[calc(var(--scroll-root-safe-area-inset-bottom,0px)+var(--thread-response-height))] scroll-mt-[calc(var(--header-height)+min(200px,max(70px,20svh)))]\"\u003e\n\u003cdiv class=\"text-base my-auto mx-auto pb-10 [--thread-content-margin:var(--thread-content-margin-xs,calc(var(--spacing)*4))] @w-sm\/main:[--thread-content-margin:var(--thread-content-margin-sm,calc(var(--spacing)*6))] @w-lg\/main:[--thread-content-margin:var(--thread-content-margin-lg,calc(var(--spacing)*16))] px-(--thread-content-margin)\"\u003e\n\u003cdiv class=\"[--thread-content-max-width:40rem] @w-lg\/main:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 group\/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col agent-turn\"\u003e\n\u003cdiv class=\"flex max-w-full flex-col gap-4 grow\"\u003e\n\u003cdiv data-turn-start-message=\"true\" class=\"min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal outline-none keyboard-focused:focus-ring [.text-message+\u0026amp;]:mt-1\" data-message-model-slug=\"gpt-5-5\" dir=\"auto\" data-message-id=\"649d8f4d-0d8f-4843-b158-c20b316a120c\" data-message-author-role=\"assistant\" tabindex=\"0\"\u003e\n\u003cdiv class=\"flex w-full flex-col gap-1 empty:hidden\"\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full dark markdown-new-styling\"\u003e\n\u003cp data-start=\"47\" data-end=\"369\"\u003e\u003ca rel=\"noopener\" href=\"https:\/\/split-collage-scroll.showitpreview.com\/split-collage-scroll-image-zoom\" target=\"_blank\"\u003eDEMO LINK - IMAGE\u003c\/a\u003e\u003cbr\u003e\u003ca rel=\"noopener\" href=\"https:\/\/split-collage-scroll.showitpreview.com\/split-collage-scroll-text-zoom\" target=\"_blank\"\u003eDEMO LINK - TEXT\u003c\/a\u003e \u003cbr\u003e\u003cbr\u003eScroll Collage Reveal transforms static sections into layered, cinematic moments using scroll-based movement andddd depth! As visitors scroll, collage elements drift left and right at varying speeds while the center content gradually reveals itself through scale and motion, creating a more immersive and editorial-style experience.\u003cbr\u003e\u003cbr\u003e\u003cmeta charset=\"utf-8\"\u003eAnd the best part...To customize, simply replace the images, video and text directly in Showit.\u003c\/p\u003e\n\u003cp data-end=\"958\" data-start=\"942\"\u003eWHAT'S INCLUDED:\u003c\/p\u003e\n\u003cp data-end=\"1057\" data-start=\"960\"\u003eTwo Design Options - Zoom Image Background and Zoom Text Background\u003cbr\u003eInstall the pages in minutes using Showit’s Share Key. A detailed instruction guide is included.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"z-0 flex min-h-[46px] justify-start\"\u003ePLEASE NOTE: The other canvases shown in the video are included for design purposes and to see the scrolling effect. This canvas should not be used as a header as you will not get the full effect on the scroll. \u003c\/div\u003e\n\u003cdiv class=\"mt-3 w-full empty:hidden\"\u003e\u003cbr\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"pointer-events-none -mt-px h-px translate-y-[calc(var(--scroll-root-safe-area-inset-bottom)-14*var(--spacing))]\" aria-hidden=\"true\"\u003e\u003cbr\u003e\u003c\/div\u003e","brand":"ShowCode Studio","offers":[{"title":"Default Title","offer_id":45086509367366,"sku":null,"price":14.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0709\/7588\/1286\/files\/ShowCodeStudio-Split-Collage-Scroll.gif?v=1779927132"},{"product_id":"deboss-text","title":"Deboss Text","description":"\u003cdiv class=\"qMYqUG_convSearchResultHighlightRoot\"\u003e\n\u003cdiv class=\"\"\u003e\n\u003cdiv class=\"relative w-full overflow-visible\"\u003e\n\u003csection dir=\"auto\" class=\"text-token-text-primary w-full focus:outline-none has-data-writing-block:pointer-events-none [\u0026amp;:has([data-writing-block])\u0026gt;*]:pointer-events-auto R6Vx5W_threadScrollVars scroll-mb-[calc(var(--scroll-root-safe-area-inset-bottom,0px)+var(--thread-response-height))] scroll-mt-[calc(var(--header-height)+min(200px,max(70px,20svh)))]\"\u003e\n\u003cdiv class=\"text-base my-auto mx-auto pb-10 [--thread-content-margin:var(--thread-content-margin-xs,calc(var(--spacing)*4))] @w-sm\/main:[--thread-content-margin:var(--thread-content-margin-sm,calc(var(--spacing)*6))] @w-lg\/main:[--thread-content-margin:var(--thread-content-margin-lg,calc(var(--spacing)*16))] px-(--thread-content-margin)\"\u003e\n\u003cdiv class=\"[--thread-content-max-width:40rem] @w-lg\/main:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 group\/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col agent-turn\"\u003e\n\u003cdiv class=\"flex max-w-full flex-col gap-4 grow\"\u003e\n\u003cdiv class=\"min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal outline-none keyboard-focused:focus-ring [.text-message+\u0026amp;]:mt-1\" dir=\"auto\" tabindex=\"0\"\u003e\n\u003cdiv class=\"flex w-full flex-col gap-1 empty:hidden\"\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full dark markdown-new-styling\"\u003e\n\u003cmeta charset=\"utf-8\"\u003eDEMO LINK - \u003ca href=\"https:\/\/deboss-text.showit.site\/\"\u003ehttps:\/\/deboss-text.showit.site\/\u003c\/a\u003e\u003cbr\u003ePlease note this effect is hard to see on small thumbnails. Visit the demo link to get the full effect.\u003cbr\u003e\u003cbr\u003e\u003cmeta charset=\"utf-8\"\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full dark markdown-new-styling\"\u003e\n\u003cmeta charset=\"utf-8\"\u003e \u003cmeta charset=\"utf-8\"\u003e \u003cspan style=\"font-family: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; font-size: 0.875rem;\"\u003e\u003c\/span\u003e\n\u003cp\u003eDeboss Text Effect brings a popular logo design technique onto your Showit website.\u003c\/p\u003e\n\u003cp\u003eYou've seen this effect in luxury branding where text appears pressed directly into the surface rather than sitting on top of it. It's subtle, but it instantly creates more depth, dimension, and visual interest.\u003c\/p\u003e\n\u003cp\u003eNow you can achieve that same look on your Showit website.\u003c\/p\u003e\n\u003cp\u003eInstead of flat typography, your headings and any other text can take on a soft engraved appearance that feels intentional, polished, and beautifully integrated into the design itself.\u003c\/p\u003e\n\u003cp\u003eYou simply add the provided code, apply a CS Selector, and the effect is ready to go.\u003c\/p\u003e\n\u003cp\u003eYOU CAN CUSTOMIZE:\u003c\/p\u003e\n\u003cul\u003e\n\u003cli\u003eMultiple deboss intensity options included\u003c\/li\u003e\n\u003cli\u003eApply the effect to any text element\u003c\/li\u003e\n\u003cli\u003eTwo paper overlay backgrounds (light and dark)\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003cp\u003e**Recommended for use only on darker text colors on either the same dark background or a light background (See examples) \u003c\/p\u003e\n\u003cp\u003eWHAT'S INCLUDED:\u003c\/p\u003e\n\u003cp\u003eA simple step-by-step PDF guide is included with your purchase.\u003c\/p\u003e\n\u003cmeta charset=\"utf-8\"\u003e\n\u003cp\u003eInstalls in minutes using Showit’s Custom Head Code area and CS Selectors.\u003c\/p\u003e\n\u003cp\u003eSimply copy and paste the provided code, apply the included selector to any text element, and the deboss effect is instantly applied.\u003c\/p\u003e\n\u003cp\u003eWorks seamlessly across desktop and mobile with no additional setup required.\u003c\/p\u003e\n\u003cp\u003eA small detail that can completely change how custom your typography feels.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e","brand":"ShowCode Studio","offers":[{"title":"Default Title","offer_id":45109412298822,"sku":null,"price":14.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0709\/7588\/1286\/files\/ShowCodeStudio-DebossText.gif?v=1780207254"},{"product_id":"trio-background-scroll","title":"Trio Background Scroll","description":"\u003cdiv class=\"qMYqUG_convSearchResultHighlightRoot\"\u003e\n\u003cdiv class=\"\"\u003e\n\u003cdiv class=\"relative w-full overflow-visible\"\u003e\n\u003csection dir=\"auto\" class=\"text-token-text-primary w-full focus:outline-none has-data-writing-block:pointer-events-none [\u0026amp;:has([data-writing-block])\u0026gt;*]:pointer-events-auto R6Vx5W_threadScrollVars scroll-mb-[calc(var(--scroll-root-safe-area-inset-bottom,0px)+var(--thread-response-height))] scroll-mt-[calc(var(--header-height)+min(200px,max(70px,20svh)))]\"\u003e\n\u003cdiv class=\"text-base my-auto mx-auto pb-10 [--thread-content-margin:var(--thread-content-margin-xs,calc(var(--spacing)*4))] @w-sm\/main:[--thread-content-margin:var(--thread-content-margin-sm,calc(var(--spacing)*6))] @w-lg\/main:[--thread-content-margin:var(--thread-content-margin-lg,calc(var(--spacing)*16))] px-(--thread-content-margin)\"\u003e\n\u003cdiv class=\"[--thread-content-max-width:40rem] @w-lg\/main:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 group\/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col agent-turn\"\u003e\n\u003cdiv class=\"flex max-w-full flex-col gap-4 grow\"\u003e\n\u003cdiv class=\"min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal outline-none keyboard-focused:focus-ring [.text-message+\u0026amp;]:mt-1\" dir=\"auto\" tabindex=\"0\"\u003e\n\u003cdiv class=\"flex w-full flex-col gap-1 empty:hidden\"\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full dark markdown-new-styling\"\u003e\n\u003cp\u003eDEMO LINK: \u003ca href=\"https:\/\/trio-background-scroll.showitpreview.com\/\"\u003ehttps:\/\/trio-background-scroll.showitpreview.com\/\u003c\/a\u003e\u003cbr\u003e\u003cbr\u003eTrio Background Scroll creates a cinematic scrolling experience for your Showit website where imagery transitions behind your messaging as visitors move through the page.\u003c\/p\u003e\n\u003cp\u003eRather than breaking your story across multiple sections, this component keeps your message front and center while a sequence of images and videos creates movement, atmosphere, and visual depth around it.\u003c\/p\u003e\n\u003cp\u003eThe result feels immersive, editorial, and intentionally designed — transforming a simple section into a memorable moment that encourages visitors to slow down and engage with your content.\u003c\/p\u003e\n\u003cp\u003ePerfect for anyone looking to add a more elevated visual experience rather than a standard background image.\u003c\/p\u003e\n\u003cp\u003eYOU CAN CUSTOMIZE:\u003c\/p\u003e\n\u003cp\u003e• Replace all images with your own\u003cbr\u003e• Use images, videos, or a combination of both\u003cbr\u003e• Update all text and typography\u003cbr\u003e• Adjust overlay colors and opacity\u003cbr\u003e• Change canvas heights (window height preferred) and spacing\u003cbr\u003e• Customize the design to match your brand\u003c\/p\u003e\n\u003cp\u003eWHAT'S INCLUDED:\u003c\/p\u003e\n\u003cp\u003eInstall the Showit page in minutes using Showit's Share Key. A detailed instruction guide is included to walk you through setup and customization.\u003c\/p\u003e\n\u003cp\u003eSimply replace the content with your own images, videos, and text, then publish your website.\u003c\/p\u003e\n\u003cp\u003ePlease note: No coding required. This is a multi canvas design.\u003cbr\u003e\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e","brand":"ShowCode Studio","offers":[{"title":"Default Title","offer_id":45188890001478,"sku":null,"price":10.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0709\/7588\/1286\/files\/ShowCodeStudio-TrioBackgroundScroll.gif?v=1781670748"},{"product_id":"outline-text","title":"Outline Text","description":"\u003cdiv class=\"qMYqUG_convSearchResultHighlightRoot\"\u003e\n\u003cdiv class=\"\"\u003e\n\u003cdiv class=\"relative w-full overflow-visible\"\u003e\n\u003csection dir=\"auto\" class=\"text-token-text-primary w-full focus:outline-none has-data-writing-block:pointer-events-none [\u0026amp;:has([data-writing-block])\u0026gt;*]:pointer-events-auto R6Vx5W_threadScrollVars scroll-mb-[calc(var(--scroll-root-safe-area-inset-bottom,0px)+var(--thread-response-height))] scroll-mt-[calc(var(--header-height)+min(200px,max(70px,20svh)))]\"\u003e\n\u003cdiv class=\"text-base my-auto mx-auto pb-10 [--thread-content-margin:var(--thread-content-margin-xs,calc(var(--spacing)*4))] @w-sm\/main:[--thread-content-margin:var(--thread-content-margin-sm,calc(var(--spacing)*6))] @w-lg\/main:[--thread-content-margin:var(--thread-content-margin-lg,calc(var(--spacing)*16))] px-(--thread-content-margin)\"\u003e\n\u003cdiv class=\"[--thread-content-max-width:40rem] @w-lg\/main:[--thread-content-max-width:48rem] mx-auto max-w-(--thread-content-max-width) flex-1 group\/turn-messages focus-visible:outline-hidden relative flex w-full min-w-0 flex-col agent-turn\"\u003e\n\u003cdiv class=\"flex max-w-full flex-col gap-4 grow\"\u003e\n\u003cdiv class=\"min-h-8 text-message relative flex w-full flex-col items-end gap-2 text-start break-words whitespace-normal outline-none keyboard-focused:focus-ring [.text-message+\u0026amp;]:mt-1\" dir=\"auto\"\u003e\n\u003cdiv class=\"flex w-full flex-col gap-1 empty:hidden\"\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full dark markdown-new-styling\"\u003eDEMO LINK: \u003ca href=\"https:\/\/outline-text.showitpreview.com\/\"\u003ehttps:\/\/outline-text.showitpreview.com\/\u003c\/a\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"markdown prose dark:prose-invert wrap-break-word w-full dark markdown-new-styling\"\u003e\n\u003cmeta charset=\"utf-8\"\u003e \u003cmeta charset=\"utf-8\"\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eSome website sections make you stop and stare for a second because your brain is trying to figure out what you're looking at.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eThat's exactly what this one does.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eAs images move through the section, they pass between a solid text layer and an outlined text layer, creating the illusion that the typography is changing as the photos move across it.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eThe effect feels layered, artistic, and a little unexpected. The kind of detail that makes a website feel custom without screaming for attention.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eNo complicated setup. Just a clever combination of Showit canvases, layering, sticky positioning, and a little CSS.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eCUSTOMIZE\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003e• Font \/ Text\u003c\/span\u003e\u003cbr\u003e\u003cspan\u003e• Color and Stroke color\u003c\/span\u003e\u003cbr\u003e\u003cspan\u003e• Desktop stroke size\u003c\/span\u003e\u003cbr\u003e\u003cspan\u003e• Mobile stroke size\u003c\/span\u003e\u003cbr\u003e\u003cspan\u003e• Images\u003c\/span\u003e\u003cbr\u003e\u003cspan\u003e• Background colors\u003c\/span\u003e\u003cbr\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eWHAT'S INCLUDED\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eA step-by-step PDF guide walks you through the setup from start to finish.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eYou'll receive the CSS needed for the outline effect along with instructions for how the layered canvas works inside Showit.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eDesktop and mobile stroke sizing are controlled separately so you can fine tune the look on both screen sizes.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eA QUICK NOTE ABOUT FONTS\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eNot every font loves being outlined.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eSome fonts look incredible with a stroke applied. Others may have outlines that appear within the letter. Not recommended for script fonts either.\u003c\/span\u003e\u003c\/p\u003e\n\u003cp class=\"isSelectedEnd\"\u003e\u003cspan\u003eTHE FINE PRINT\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003e• Digital product only\u003c\/span\u003e\u003cbr\u003e\u003cspan\u003e• Requires a Showit website\u003c\/span\u003e\u003cbr\u003e\u003cspan\u003e• Images shown in the demo are not included\u003c\/span\u003e\u003cbr\u003e\u003cspan\u003e• Due to the nature of digital products, all sales are final\u003c\/span\u003e\u003c\/p\u003e\n\u003cbr\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/section\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e","brand":"ShowCode Studio","offers":[{"title":"Default Title","offer_id":45199270871110,"sku":null,"price":16.0,"currency_code":"USD","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0709\/7588\/1286\/files\/ShowCode_Studio_-_Outline_Text.gif?v=1781900037"}],"url":"https:\/\/showcodestudio.com\/collections\/new-release.oembed","provider":"ShowCode Studio","version":"1.0","type":"link"}