{"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\/products\/outline-text","provider":"ShowCode Studio","version":"1.0","type":"link"}