[{"id":71,"created_at":"2023-09-23T10:28:12.182594+00:00","html":"\n\n\n\n \n \n Moon And Moon Shine Animation\n \n\n\n

\n \n Source\n

\n\n

Poem

\n\n \n\n\n\n\n\n","css":"* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family:sans-serif;\n}\n\nbody {\n height: 100%;\n width: 100%;\n text-align: center;\n background: linear-gradient(#161a1b, #000);\n --width: 100px;\n --height: 100px;\n /* overflow: hidden; */\n\n}\n\n.moon-outer {\n display: flex;\n margin-top: 50px;\n justify-content: center;\n\n}\n\n.moon {\n width: var(--width);\n height: var(--height);\n border-radius: 50%;\n animation: shine 5s ease-in-out infinite;\n background-color: rgb(230, 224, 224);\n box-shadow: 0px 0px 8px 2px rgba(235, 235, 231, 0.301);\n position: relative;\n overflow: hidden;\n /* Apply the animation */\n}\n\n.details {\n width: var(--width);\n height: var(--height);\n border-radius: 50%;\n background-color: rgba(165, 165, 165, 0.089);\n}\n\n.details.one {\n position: absolute;\n top: 20px;\n left: 40px;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background-color: transparent;\n box-shadow: inset 2px 0 4px rgba(167, 167, 167, 0.685);\n}\n\n.details.two {\n position: absolute;\n top: 60px;\n left: 16px;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background-color: transparent;\n box-shadow: inset -2px 0 4px rgba(167, 167, 167, 0.685);\n}\n\n.details.three {\n position: absolute;\n top: 70px;\n left: 70px;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background-color: transparent;\n box-shadow: inset 2px 0 4px rgba(167, 167, 167, 0.685);\n}\n\n.details.four.small {\n position: absolute;\n top: 40px;\n left: 60px;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: transparent;\n box-shadow: inset 2px 0 4px rgba(167, 167, 167, 0.585);\n}\n\n\n@keyframes shine {\n 0% {\n box-shadow: 0px 0px 4px 2px rgba(235, 235, 231, 0.301);\n }\n\n 50% {\n box-shadow: 0px 0px 10px 11px rgba(235, 235, 231, 0.301);\n }\n\n 100% {\n box-shadow: 0px 0px 4px 2px rgba(235, 235, 231, 0.301);\n }\n}\n\n.source>a {\n text-decoration: none;\n color: wheat;\n\n}\n\n.source {\n padding: 5px;\n border: 1px solid wheat;\n width: fit-content;\n border-radius: 4px;\n position: sticky;\n top: 0px;\n margin: 10px;\n display: flex;\n align-items: center;\n gap: 5px;\n}\n\n.source:hover {\n opacity: 70%;\n}\n\n.poem-body {\n display: flex;\n align-items: center;\n margin: 60px;\n flex-direction: column;\n}\n\n.poem-title {\n color: rgb(230, 224, 224);\n margin-block:30px;\n}\n\n.poem {\n color: gray;\n}\n\n\n","js":"// code here","user_id":"1c3624cd-ae3b-4b60-946f-65ea8f296ff7","project_key":"aDDzMU","description":" Moon And Moon Shine Animation","plugins":[{"css":{"tailwind":false,"bootstrap":false,"fontawesome":false,"materialicons":true,"googlefonts":false,"bulma":false},"js":{"animejs":false,"gsap":false,"framermotion":false,"threejs":false,"velocity":false,"popmotion":false,"scrollreveal":false}}],"public":true,"config":{"tags": [], "cssProcessor": false},"tags":[],"hide_js":false,"hide_css":false,"messages":"[{\"messageId\":\"DEVCANVAS_INITIAL_MESSAGE\",\"role\":\"user\",\"content\":\"This is my current code\"},{\"messageId\":\"DEVCANVAS_INITIAL_CODE\",\"role\":\"user\",\"content\":\"\\n\\t\\n\\n\\t\\n\\t\\t\\n\\t\\t\\n\\t\\t Moon And Moon Shine Animation\\n\\t\\t\\n\\t\\t\\n\\t\\t\\n\\t\\t\\n\\t\\t\\n\\n \\n\\t\\n\\t\\n\\t\\t

\\r\\n \\r\\n Source\\r\\n

\\r\\n\\r\\n

\\r\\n

\\r\\n\\r\\n\\r\\n

\\r\\n

Poem

\\r\\n

\\r\\n\\r\\n The moon, how it shines so bright,
\\r\\n In the vas expanse of night,
\\r\\n A gentle orb that graces the sky,
\\r\\n Casting a soft, ethereal light
\\r\\n
\\r\\n\\r\\n It beauty is a thing to behold,
\\r\\n A wonder that never gets old,
\\r\\n A tranquil presence, calm and serene,
\\r\\n A sight to cherish, to have and to hold
\\r\\n
\\r\\n\\r\\n The moon, a symbol of mystery and grace,
\\r\\n A celestial jewel in the sky's embrace,
\\r\\n It illuminates the darkend land,
\\r\\n And brings a sense of peace to every place\\r\\n

\\r\\n

\\n\\t\\t\\n \\n\\t\\n\"},{\"messageId\":\"489e5ad5-5f28-4fce-80f5-44cbec515691\",\"role\":\"user\",\"content\":\"make the peom apears to read line by line\"},{\"messageId\":\"624fadbd-f817-453f-bc8f-2dd978b6a566\",\"role\":\"assistant\",\"content\":\"Here's the updated code with a line-by-line poem reveal animation:\\n\\n```html\\n\\n\\n\\n\\n \\n \\n Moon And Moon Shine Animation\\n \\n\\n\\n

\\n \\n Source\\n

\\n\\n

\\n

\\n\\n

\\n

Poem

\\n

\\n\\n \\n\\n\\n\\n```\\n\\nThis updated version:\\n\\n1. Creates each line of the poem as a separate div element\\n2. Applies a fade-in and slide-up animation to each line\\n3. Staggers the animations with increasing delays (0.5s between each line)\\n4. Maintains all the original styling and moon animation\\n5. The poem title fades in first, followed by each line appearing one after another\\n6. Empty lines are preserved to maintain the poem's structure\\n\\nThe poem will now appear to be \\\"typed out\\\" line by line with a smooth animation effect.\"}]","view":[{"views":1840}],"profiles":{"username":"devcanvas"}}]