{"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","url":"https:\/\/showcodestudio.com\/products\/split-reveal-scroll","provider":"ShowCode Studio","version":"1.0","type":"link"}