[{"_1":2,"_183":-5,"_184":-5},"loaderData",{"_3":4,"_61":62,"_182":-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",1793739397521,"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,"_124":125,"_144":145,"_174":175,"_176":-5,"_177":178,"_179":180},"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":112,"_113":58,"_114":100,"_115":58,"_116":-5,"_117":-5,"_118":-5,"_119":120,"_121":-5,"_122":-5,"_123":58},"_type","id","hwr4tjev9ui4x566hrs5","created_at","2024-12-09T03:19:17.702Z","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-10T13:37:35.603Z","title","3D Dice Roller 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":111},"~type","project_stats","project_id","views",8,"likes",2,"comments",0,"3d-dice-roller-animation","auto_set_current","allow_automatic_improvements","board_enabled","description","generated_description","from_template","domains",[],"thumbnail","video","has_active_experiment","project_revision",{"_67":124,"_68":126,"_63":94,"_70":127,"_128":-5,"_96":-5,"_129":-5,"_130":-5,"_72":131,"_132":133,"_105":69,"_85":134,"_98":-5,"_101":135,"_137":58,"_138":139,"_140":-5,"_141":-5,"_142":143},"0193a96d-ae51-74f5-bc83-935ac7fd5bd7","2024-12-09T03:19:17.841Z","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:20:56.182Z",{"_136":111},"multiplayer_count","draft","site_id","EA6Jf03NcsQbppVpc","chat_session_id","chat_session_run_index","current_screenshot_url","https://project-screenshots.websim.com/0193a96e-a359-7caf-bfac-492feef5ea6f","site",{"_67":144,"_68":139,"_96":-5,"_70":146,"_147":148,"_149":150,"_151":152,"_87":157,"_158":159,"_160":161,"_166":-5,"_167":168,"_169":170,"_98":-5,"_171":-5,"_172":173},"2024-12-09T03:19:18.989Z","state","done","model","sonnet","lore",{"_63":94,"_153":154,"_155":58,"_156":58},"attachments",[],"enableApi","enableDB","3D Dice Roller Animation","owner",{"_67":22,"_68":74,"_75":76,"_70":77,"_78":79,"_80":81,"_82":83,"_84":58},"prompt",{"_162":163,"_164":165},"type","plaintext","text","\n

\n \n \n Roll it!\n Stop!\n

\n\n\n\nbody {\n font-size:.9em;\n font-family:sans-serif;\n}\n@keyframes spin {\n 0% { transform: translateZ(-100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }\n 16% { transform: translateZ(-100px) rotateX(180deg) rotateY(180deg) rotateZ(0deg); }\n 33% { transform: translateZ(-100px) rotateX(360deg) rotateY(90deg) rotateZ(180deg); }\n 50% { transform: translateZ(-100px) rotateX(360deg) rotateY(360deg) rotateZ(360deg); }\n 66% { transform: translateZ(-100px) rotateX(180deg) rotateY(360deg) rotateZ(270deg); }\n 83% { transform: translateZ(-100px) rotateX(270deg) rotateY(180deg) rotateZ(180deg); }\n 100% { transform: translateZ(-100px) rotateX(360deg) rotateY(360deg) rotateZ(360deg); }\n}\n@keyframes spin-duplicate {\n 0% { transform: translateZ(-100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }\n 16% { transform: translateZ(-100px) rotateX(180deg) rotateY(180deg) rotateZ(0deg); }\n 33% { transform: translateZ(-100px) rotateX(360deg) rotateY(90deg) rotateZ(180deg); }\n 50% { transform: translateZ(-100px) rotateX(360deg) rotateY(360deg) rotateZ(360deg); }\n 66% { transform: translateZ(-100px) rotateX(180deg) rotateY(360deg) rotateZ(270deg); }\n 83% { transform: translateZ(-100px) rotateX(270deg) rotateY(180deg) rotateZ(180deg); }\n 100% { transform: translateZ(-100px) rotateX(360deg) rotateY(360deg) rotateZ(360deg); }\n}\n@keyframes roll {\n 0% { transform: translate3d(-200px,-50px,-400px) }\n 12% { transform: translate3d(0px,0,-100px) }\n 25% { transform: translate3d(200px,-50px,-400px) }\n 37% { transform: translate3d(0px,-100px,-800px) }\n 50% { transform: translate3d(-200px,-50px,-400px) }\n 62% { transform: translate3d(0px,0,-100px) }\n 75% { transform: translate3d(200px,-50px,-400px) }\n 87% { transform: translate3d(0px,-100px,-800px) }\n 100% { transform: translate3d(-200px,-50px,-400px) }\n}\n#roll:checked ~ #platform > #dice {\n animation: spin-duplicate 2s infinite linear;\n}\n#roll:checked ~ #platform {\n width:200px;\n height:200px;\n transform-style: preserve-3d;\n animation: roll 1.6s infinite linear;\n}\n#secondroll:checked ~ #roll:checked ~ #platform > #dice,\n#secondroll:checked ~ #roll:checked ~ #platform {\n animation-play-state: paused;\n}\n#wrapper {\n position: relative;\n width: 200px;\n padding-top: 100px;\n margin: 0 auto;\n perspective: 1200px;\n}\n#platform {\n margin-top:100px;\n}\n#dice span {\n position:absolute;\n margin:100px 0 0 100px;\n display: block;\n font-size: 2.5em;\n padding: 10px;\n}\n#dice {\n position: absolute;\n width: 200px;\n height: 200px;\n transform-style: preserve-3d;\n animation: spin 50s infinite linear;\n}\n.side {\n position: absolute;\n width: 200px;\n height: 200px;\n background: #fff;\n box-shadow:inset 0 0 40px #ccc;\n border-radius: 40px;\n}\n#dice .cover, #dice .inner {\n background: #e0e0e0;\n box-shadow: none;\n}\n#dice .cover {\n border-radius: 0;\n transform: translateZ(0px);\n}\n#dice .cover.x {\n transform: rotateY(90deg);\n}\n#dice .cover.z {\n transform: rotateX(90deg);\n}\n#dice .front {\n transform: translateZ(100px);\n}\n#dice .front.inner {\n transform: translateZ(98px);\n}\n#dice .back {\n transform: rotateX(-180deg) translateZ(100px);\n}\n#dice .back.inner {\n transform: rotateX(-180deg) translateZ(98px);\n}\n#dice .right {\n transform: rotateY(90deg) translateZ(100px);\n}\n#dice .right.inner {\n transform: rotateY(90deg) translateZ(98px);\n}\n#dice .left {\n transform: rotateY(-90deg) translateZ(100px);\n}\n#dice .left.inner {\n transform: rotateY(-90deg) translateZ(98px);\n}\n#dice .top {\n transform: rotateX(90deg) translateZ(100px);\n}\n#dice .top.inner {\n transform: rotateX(90deg) translateZ(98px);\n}\n#dice .bottom {\n transform: rotateX(-90deg) translateZ(100px);\n}\n#dice .bottom.inner {\n transform: rotateX(-90deg) translateZ(98px);\n}\n.dot {\n position:absolute;\n width:46px;\n height:46px;\n border-radius:23px;\n background:#444;\n box-shadow:inset 5px 0 10px #000;\n}\n.dot.center {\n margin:77px 0 0 77px;\n}\n.dot.dtop {\n margin-top:20px;\n}\n.dot.dleft {\n margin-left:134px;\n}\n.dot.dright {\n margin-left:20px;\n}\n.dot.dbottom {\n margin-top:134px;\n}\n.dot.center.dleft {\n margin:77px 0 0 20px;\n}\n.dot.center.dright {\n margin:77px 0 0 134px;\n}\n\n#background {\n position:fixed;\n z-index:-1;\n width:100%;\n height:100%;\n background: #071a1e;\n background: -moz-linear-gradient(top, #071a1e 0%, #274249 100%);\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#071a1e), color-stop(100%,#274249));\n background: -webkit-linear-gradient(top, #071a1e 0%,#274249 100%);\n background: linear-gradient(to bottom, #071a1e 0%,#274249 100%);\n}\nlabel, input[type=checkbox]:before {\n position: absolute;\n overflow:hidden;\n top:40px;\n left:40px;\n display:block;\n width:120px;\n padding-top:9px;\n height:31px;\n cursor:pointer;\n text-align:center;\n font-size:1.2em;\n font-weight:bold;\n color:#fff;\n border-radius:6px;\n border:1px solid;\n}\ninput[type=checkbox]:before {\n background:transparent;\n border-color:transparent;\n}\ninput[type=checkbox] {\n display:none;\n}\nlabel {\n opacity:.5;\n transition:all .3s ease;\n}\nlabel:hover {\n opacity:1;\n box-shadow:0 0 18px rgba(255,255,255,.5);\n}\nlabel[for=roll] {\n z-index:1;\n text-shadow:0 -1px 0 #006699;\n border-color:#17C7EC;\n background: -moz-linear-gradient(top, #0099CC 0%, #006699 100%);\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0099CC), color-stop(100%,#006699));\n background: -webkit-linear-gradient(top, #0099CC 0%,#006699 100%);\n background: linear-gradient(to bottom, #0099CC 0%,#006699 100%);\n}\nlabel[for=secondroll] {\n margin-top:-100px;\n text-shadow:0 -1px 0 #CC0033;\n border-color:#FF8298;\n background: -moz-linear-gradient(top, #FF6666 0%, #CC0033 100%);\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF6666), color-stop(100%,#CC0033));\n background: -webkit-linear-gradient(top, #FF6666 0%,#CC0033 100%);\n background: linear-gradient(to bottom, #FF6666 0%,#CC0033 100%);\n}\n#roll:checked ~ label[for=roll] {\n margin-top:-100px;\n}\n#roll:checked ~ label[for=secondroll] {\n margin-top:0px;\n}\n#secondroll:checked ~ label[for=secondroll] {\n text-shadow:0 -1px 0 #336633;\n border-color:#66FF99;\n background: -moz-linear-gradient(top, #66CC66 0%, #336633 100%);\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#66CC66), color-stop(100%,#336633));\n background: -webkit-linear-gradient(top, #66CC66 0%,#336633 100%);\n background: linear-gradient(to bottom, #66CC66 0%,#336633 100%);\n}\n#secondroll:checked ~ label[for=secondroll] span {\n display:none;\n}\n#secondroll:checked ~ label[for=secondroll]:after {\n content:\"Keep rollin'!\";\n}\n\n","url","link_url","/p/hwr4tjev9ui4x566hrs5","versioned_link_url","/p/hwr4tjev9ui4x566hrs5/1","yapping","page_description","This page features a visually engaging 3D dice rolling animation. The animation simulates the rolling of a dice with interactive controls allowing users…","cursor","eyJpZCI6Imh3cjR0amV2OXVpNHg1NjZocnM1In0","token","included",[],"about",{"_181":-5},"parent","routes/browser/layout","actionData","errors"]