[{"_1":2,"_182":-5,"_183":-5},"loaderData",{"_3":4,"_61":62,"_181":-5},"root",{"_5":6,"_21":-5,"_22":-5,"_23":24,"_42":-5,"_43":-5,"_44":-5,"_45":46,"_47":48,"_57":58,"_59":60},"env",{"_7":8,"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20},"SUPABASE_URL","https://hello.websim.com","SUPABASE_KEY","sb_publishable_Psom5r5hvV9Glvzv4s3oOQ_2b_HevU-","POSTHOG_KEY","phc_VHMOlrdxAbgSZHeF0SdSf07LZLRLAg5pZuTHkJGn050","POSTHOG_API_HOST","https://e.wbsm.ai","POSTHOG_UI_HOST","https://app.posthog.com","GOOGLE_OAUTH_CLIENT_ID","891181648870-i708rj1bgjol84hie20shfr4u4ecf3o7.apps.googleusercontent.com","ACTIVITY_DIRECT_PAGEVIEW","on","authUser","user","snapshotData",{"_25":-5,"_26":-5,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5,"_33":-5,"_34":-5,"_35":-5,"_36":-5,"_37":-5,"_38":-5,"_39":-5,"_40":-5,"_41":-5},"lastProjectId","sidebarTab","homepageTab","pinSidebar","settingsOpen","maximized","assetsExpanded","focusedAssetFilename","authError","authErrorCode","authErrorDescription","sidebarWidth","videoMuted","videoVolume","navigationContext","hasSeenFeedOnboarding","nextUpExpanded","plan","balances","rewards","loadedAt",1793721914887,"origins",{"_49":50,"_51":52,"_53":54,"_55":56},"origin","https://websim.com","apiOrigin","https://api.websim.com","contentOrigin","https://{PROJECT_ID}.c.websim.com","appDomainOrigin","https://{SUBDOMAIN}.on.websim.com","isMobile",false,"theme","auto","slug",{"_63":64,"_65":66,"_123":124,"_143":144,"_173":174,"_175":-5,"_176":177,"_178":179},"version","1","project",{"_67":65,"_68":69,"_70":71,"_72":73,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":100,"_101":102,"_61":111,"_112":58,"_113":100,"_114":58,"_115":-5,"_116":-5,"_117":-5,"_118":119,"_120":-5,"_121":-5,"_122":58},"_type","id","80_lh3kkjxfcusxj8tyf","created_at","2024-12-09T03:11:58.916Z","created_by",{"_67":22,"_68":74,"_75":76,"_70":77,"_78":79,"_80":81,"_82":83,"_84":58},"ee9ad05a-7bfe-4adb-a816-54f90e1fd0f4","username","JimBiscuit","2024-11-12T23:28:50.199Z","avatar_url","https://avatars.websim.ai/ee9ad05a-7bfe-4adb-a816-54f90e1fd0f4/YuEBlDlW4ZIjroe2x.webp","discord_username","complexcore_kf","discord_id","1195603669857599542","is_admin","updated_at","2024-12-09T03:12:48.310Z","title","Morphing Text Animation (credits to the og creator on codepen! )","comments_mode","open","visibility","public","current_version",1,"last_posted_version","parent_id","parent_version","deleted_at","posted",true,"stats",{"_103":104,"_105":69,"_106":107,"_108":109,"_110":109},"~type","project_stats","project_id","views",18,"likes",0,"comments","morphing-text-animation","auto_set_current","allow_automatic_improvements","board_enabled","description","generated_description","from_template","domains",[],"thumbnail","video","has_active_experiment","project_revision",{"_67":123,"_68":125,"_63":94,"_70":126,"_127":-5,"_96":-5,"_128":-5,"_129":-5,"_72":130,"_131":132,"_105":69,"_85":133,"_98":-5,"_101":134,"_136":58,"_137":138,"_139":-5,"_140":-5,"_141":142},"0193a966-fc5b-7676-9f12-fb347790b2f1","2024-12-09T03:11:59.067Z","visited_at","parent_revision_version","parent_revision_project_id",{"_67":22,"_68":74,"_75":76,"_70":77,"_78":79,"_80":81,"_82":83,"_84":58},"meta",{"_63":64},"2024-12-09T03:12:48.401Z",{"_135":109},"multiplayer_count","draft","site_id","nvSOSbhN7mIra4mWv","chat_session_id","chat_session_run_index","current_screenshot_url","https://project-screenshots.websim.com/0193a967-5e3a-7f2b-9b31-ef7604a30a22","site",{"_67":143,"_68":138,"_96":-5,"_70":145,"_146":147,"_148":149,"_150":151,"_87":156,"_157":158,"_159":160,"_165":-5,"_166":167,"_168":169,"_98":-5,"_170":-5,"_171":172},"2024-12-09T03:12:00.136Z","state","done","model","sonnet","lore",{"_63":94,"_152":153,"_154":58,"_155":58},"attachments",[],"enableApi","enableDB","Morphing Text Animation","owner",{"_67":22,"_68":74,"_75":76,"_70":77,"_78":79,"_80":81,"_82":83,"_84":58},"prompt",{"_161":162,"_163":164},"type","plaintext","text","\n\n\n\n

\n \n \n

\n\n\n\n\n\n\n/* Cool font from Google Fonts! */\n@import url('https://fonts.googleapis.com/css?family=Raleway:900&display=swap');\n\nbody {\n margin: 0px;\n}\n\n#container {\n /* Center the text in the viewport. */\n position: absolute;\n margin: auto;\n width: 100vw;\n height: 80pt;\n top: 0;\n bottom: 0;\n \n /* This filter is a lot of the magic, try commenting it out to see how the morphing works! */\n filter: url(#threshold) blur(0.6px);\n}\n\n/* Your average text styling */\n#text1, #text2 {\n position: absolute;\n width: 100%;\n display: inline-block;\n \n font-family: 'Raleway', sans-serif;\n font-size: 80pt;\n \n text-align: center;\n \n user-select: none;\n}\n\n/*\n This pen cleverly utilizes SVG filters to create a \"Morphing Text\" effect. Essentially, it layers 2 text elements on top of each other, and blurs them depending on which text element should be more visible. Once the blurring is applied, both texts are fed through a threshold filter together, which produces the \"gooey\" effect. Check the CSS - Comment the #container rule's filter out to see how the blurring works!\n*/\n\nconst elts = {\n text1: document.getElementById(\"text1\"),\n text2: document.getElementById(\"text2\")\n};\n\n// The strings to morph between. You can change these to anything you want!\nconst texts = [\n \"Why\",\n \"is\",\n \"this\",\n \"so\",\n \"satisfying\",\n \"to\",\n \"watch?\"\n];\n\n// Controls the speed of morphing.\nconst morphTime = 1;\nconst cooldownTime = 0.25;\n\nlet textIndex = texts.length - 1;\nlet time = new Date();\nlet morph = 0;\nlet cooldown = cooldownTime;\n\nelts.text1.textContent = texts[textIndex % texts.length];\nelts.text2.textContent = texts[(textIndex + 1) % texts.length];\n\nfunction doMorph() {\n morph -= cooldown;\n cooldown = 0;\n \n let fraction = morph / morphTime;\n \n if (fraction > 1) {\n cooldown = cooldownTime;\n fraction = 1;\n }\n \n setMorph(fraction);\n}\n\n// A lot of the magic happens here, this is what applies the blur filter to the text.\nfunction setMorph(fraction) {\n // fraction = Math.cos(fraction * Math.PI) / -2 + .5;\n \n elts.text2.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;\n elts.text2.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;\n \n fraction = 1 - fraction;\n elts.text1.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;\n elts.text1.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;\n \n elts.text1.textContent = texts[textIndex % texts.length];\n elts.text2.textContent = texts[(textIndex + 1) % texts.length];\n}\n\nfunction doCooldown() {\n morph = 0;\n \n elts.text2.style.filter = \"\";\n elts.text2.style.opacity = \"100%\";\n \n elts.text1.style.filter = \"\";\n elts.text1.style.opacity = \"0%\";\n}\n\n// Animation loop, which is called every frame.\nfunction animate() {\n requestAnimationFrame(animate);\n \n let newTime = new Date();\n let shouldIncrementIndex = cooldown > 0;\n let dt = (newTime - time) / 1000;\n time = newTime;\n \n cooldown -= dt;\n \n if (cooldown <= 0) {\n if (shouldIncrementIndex) {\n textIndex++;\n }\n \n doMorph();\n } else {\n doCooldown();\n }\n}\n\n// Start the animation.\nanimate();\n","url","link_url","/p/80_lh3kkjxfcusxj8tyf","versioned_link_url","/p/80_lh3kkjxfcusxj8tyf/1","yapping","page_description","This page features a visually engaging morphing text animation that cycles through several inspirational words such as \"Explore,\" \"Dream,\" \"Create,\" and…","cursor","eyJpZCI6IjgwX2xoM2tranhmY3VzeGo4dHlmIn0","token","included",[],"about",{"_180":-5},"parent","routes/browser/layout","actionData","errors"]