Loading Component...

Loading

More Components

View All
Part of

Animated Matrix Logged Out

Oops! Something went wrong while submitting the form.
Animated Matrix Logged Out
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"e2030b8c-58ec-6267-d158-612c008cdb5b","type":"Block","tag":"div","classes":["85181dd0-b57e-a2c3-ead9-1e4620e2ab01"],"children":["e2030b8c-58ec-6267-d158-612c008cdb5c"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"e2030b8c-58ec-6267-d158-612c008cdb5c","type":"Block","tag":"div","classes":["85181dd0-b57e-a2c3-ead9-1e4620e2aaff"],"children":["e2030b8c-58ec-6267-d158-612c008cdb5d","3d9a477f-7982-9840-1393-0dac1f48b18d"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":"yourDiv"},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"e2030b8c-58ec-6267-d158-612c008cdb5d","type":"HtmlEmbed","tag":"div","classes":["85181dd0-b57e-a2c3-ead9-1e4620e2ab07"],"children":[],"v":"<canvas></canvas>","data":{"insideRTE":false,"embed":{"type":"html","meta":{"html":"<canvas></canvas>","div":false,"iframe":false,"script":false,"compilable":false}},"search":{"exclude":true}}},{"_id":"3d9a477f-7982-9840-1393-0dac1f48b18d","type":"Block","tag":"div","classes":["3d0777cd-2feb-32ee-6a08-dbdb5b0bf488"],"children":["9ec09288-fe5d-26d8-0838-a661c6dddd1f","1889e42f-2b8c-7995-9369-90f37d13e602","fe3b6fc6-f1d4-1417-08d7-1ee0726ebec2"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9ec09288-fe5d-26d8-0838-a661c6dddd1f","type":"Heading","tag":"h1","classes":["d5e6ec04-26b1-5827-135e-aa3a86143f84"],"children":["9ec09288-fe5d-26d8-0838-a661c6dddd20"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"h1"}},{"_id":"9ec09288-fe5d-26d8-0838-a661c6dddd20","text":true,"v":"You've logged out"},{"_id":"1889e42f-2b8c-7995-9369-90f37d13e602","type":"Paragraph","tag":"p","classes":["6d345404-41b4-ce85-4d44-2a3f40f53b96"],"children":["1889e42f-2b8c-7995-9369-90f37d13e603"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"1889e42f-2b8c-7995-9369-90f37d13e603","text":true,"v":"Your session on this device has been logged out. You can log back in anytime."},{"_id":"fe3b6fc6-f1d4-1417-08d7-1ee0726ebec2","type":"Link","tag":"a","classes":["9b295c4b-25f3-b077-1945-44115324d69a"],"children":["fe3b6fc6-f1d4-1417-08d7-1ee0726ebec3"],"data":{"search":{"exclude":true},"xattr":[],"block":"","displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"button":true,"link":{"mode":"external","url":"#"}}},{"_id":"fe3b6fc6-f1d4-1417-08d7-1ee0726ebec3","text":true,"v":"Log back in"}],"styles":[{"_id":"85181dd0-b57e-a2c3-ead9-1e4620e2ab01","fake":false,"type":"class","name":"main-wrapper","namespace":"","comb":"","styleLess":"display: grid; overflow: hidden; width: 100%; height: 100vh; align-items: stretch; grid-auto-columns: 1fr; grid-column-gap: 0px; grid-row-gap: 0px; grid-template-columns: 1fr; grid-template-rows: 1fr;","variants":{"small":{"styleLess":"width: 100%; grid-template-columns: 100%;"}},"children":[],"createdBy":"61762b90096bcb6ce64aaba8","selector":null},{"_id":"85181dd0-b57e-a2c3-ead9-1e4620e2aaff","fake":false,"type":"class","name":"section_tip","namespace":"","comb":"","styleLess":"position: relative; left: 0%; top: 0%; right: 0%; bottom: 0%; display: flex; justify-content: center; align-items: center;","variants":{"small":{"styleLess":"overflow: auto; align-items: center;"},"tiny":{"styleLess":"overflow: visible;"}},"children":[],"createdBy":"61762b90096bcb6ce64aaba8","selector":null},{"_id":"85181dd0-b57e-a2c3-ead9-1e4620e2ab07","fake":false,"type":"class","name":"matrix-animation_component","namespace":"","comb":"","styleLess":"position: absolute; left: 0%; top: 0%; right: 0%; bottom: 0%; display: block;","variants":{},"children":[],"createdBy":"61762b90096bcb6ce64aaba8","selector":null},{"_id":"3d0777cd-2feb-32ee-6a08-dbdb5b0bf488","fake":false,"type":"class","name":"container","namespace":"","comb":"","styleLess":"position: relative; z-index: 10; max-width: 400px; padding-top: 40px; padding-right: 40px; padding-bottom: 40px; padding-left: 40px; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(0, 0.00%, 18.67%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(0, 0.00%, 18.67%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(0, 0.00%, 18.67%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(0, 0.00%, 18.67%, 1.00); border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; background-color: hsla(0, 0.00%, 0.00%, 0.00); box-shadow: 0 5px 20px 0 rgba(0,0,0,0.2); backdrop-filter: blur(5px);","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"d5e6ec04-26b1-5827-135e-aa3a86143f84","fake":false,"type":"class","name":"h1","namespace":"","comb":"","styleLess":"margin-top: 0px; color: hsla(0, 0.00%, 100.00%, 1.00); font-weight: 500;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"6d345404-41b4-ce85-4d44-2a3f40f53b96","fake":false,"type":"class","name":"p","namespace":"","comb":"","styleLess":"margin-bottom: 20px; color: hsla(0, 0.00%, 100.00%, 1.00); font-size: 16px; line-height: 1.6; font-weight: 300;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"9b295c4b-25f3-b077-1945-44115324d69a","fake":false,"type":"class","name":"button","namespace":"","comb":"","styleLess":"padding-top: 13px; padding-right: 30px; padding-bottom: 13px; padding-left: 30px; border-top-left-radius: 50px; border-top-right-radius: 50px; border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; background-color: hsla(126, 84.60%, 69.70%, 1.00); color: hsla(0, 0.00%, 0.00%, 1.00);","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}
Clone in Webflow
Copy Component
{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"e2030b8c-58ec-6267-d158-612c008cdb5b","type":"Block","tag":"div","classes":["85181dd0-b57e-a2c3-ead9-1e4620e2ab01"],"children":["e2030b8c-58ec-6267-d158-612c008cdb5c"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"e2030b8c-58ec-6267-d158-612c008cdb5c","type":"Block","tag":"div","classes":["85181dd0-b57e-a2c3-ead9-1e4620e2aaff"],"children":["e2030b8c-58ec-6267-d158-612c008cdb5d","3d9a477f-7982-9840-1393-0dac1f48b18d"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":"yourDiv"},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"e2030b8c-58ec-6267-d158-612c008cdb5d","type":"HtmlEmbed","tag":"div","classes":["85181dd0-b57e-a2c3-ead9-1e4620e2ab07"],"children":[],"v":"<canvas></canvas>","data":{"insideRTE":false,"embed":{"type":"html","meta":{"html":"<canvas></canvas>","div":false,"iframe":false,"script":false,"compilable":false}},"search":{"exclude":true}}},{"_id":"3d9a477f-7982-9840-1393-0dac1f48b18d","type":"Block","tag":"div","classes":["3d0777cd-2feb-32ee-6a08-dbdb5b0bf488"],"children":["9ec09288-fe5d-26d8-0838-a661c6dddd1f","1889e42f-2b8c-7995-9369-90f37d13e602","fe3b6fc6-f1d4-1417-08d7-1ee0726ebec2"],"data":{"search":{"exclude":false},"xattr":[],"text":false,"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"div"}},{"_id":"9ec09288-fe5d-26d8-0838-a661c6dddd1f","type":"Heading","tag":"h1","classes":["d5e6ec04-26b1-5827-135e-aa3a86143f84"],"children":["9ec09288-fe5d-26d8-0838-a661c6dddd20"],"data":{"search":{"exclude":false},"xattr":[],"displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"tag":"h1"}},{"_id":"9ec09288-fe5d-26d8-0838-a661c6dddd20","text":true,"v":"You've logged out"},{"_id":"1889e42f-2b8c-7995-9369-90f37d13e602","type":"Paragraph","tag":"p","classes":["6d345404-41b4-ce85-4d44-2a3f40f53b96"],"children":["1889e42f-2b8c-7995-9369-90f37d13e603"],"data":{"displayName":"","attr":{"id":""},"xattr":[],"search":{"exclude":false},"visibility":{"conditions":[]},"devlink":{"runtimeProps":{},"slot":""}}},{"_id":"1889e42f-2b8c-7995-9369-90f37d13e603","text":true,"v":"Your session on this device has been logged out. You can log back in anytime."},{"_id":"fe3b6fc6-f1d4-1417-08d7-1ee0726ebec2","type":"Link","tag":"a","classes":["9b295c4b-25f3-b077-1945-44115324d69a"],"children":["fe3b6fc6-f1d4-1417-08d7-1ee0726ebec3"],"data":{"search":{"exclude":true},"xattr":[],"block":"","displayName":"","devlink":{"runtimeProps":{},"slot":""},"attr":{"id":""},"visibility":{"conditions":[]},"button":true,"link":{"mode":"external","url":"#"}}},{"_id":"fe3b6fc6-f1d4-1417-08d7-1ee0726ebec3","text":true,"v":"Log back in"}],"styles":[{"_id":"85181dd0-b57e-a2c3-ead9-1e4620e2ab01","fake":false,"type":"class","name":"main-wrapper","namespace":"","comb":"","styleLess":"display: grid; overflow: hidden; width: 100%; height: 100vh; align-items: stretch; grid-auto-columns: 1fr; grid-column-gap: 0px; grid-row-gap: 0px; grid-template-columns: 1fr; grid-template-rows: 1fr;","variants":{"small":{"styleLess":"width: 100%; grid-template-columns: 100%;"}},"children":[],"createdBy":"61762b90096bcb6ce64aaba8","selector":null},{"_id":"85181dd0-b57e-a2c3-ead9-1e4620e2aaff","fake":false,"type":"class","name":"section_tip","namespace":"","comb":"","styleLess":"position: relative; left: 0%; top: 0%; right: 0%; bottom: 0%; display: flex; justify-content: center; align-items: center;","variants":{"small":{"styleLess":"overflow: auto; align-items: center;"},"tiny":{"styleLess":"overflow: visible;"}},"children":[],"createdBy":"61762b90096bcb6ce64aaba8","selector":null},{"_id":"85181dd0-b57e-a2c3-ead9-1e4620e2ab07","fake":false,"type":"class","name":"matrix-animation_component","namespace":"","comb":"","styleLess":"position: absolute; left: 0%; top: 0%; right: 0%; bottom: 0%; display: block;","variants":{},"children":[],"createdBy":"61762b90096bcb6ce64aaba8","selector":null},{"_id":"3d0777cd-2feb-32ee-6a08-dbdb5b0bf488","fake":false,"type":"class","name":"container","namespace":"","comb":"","styleLess":"position: relative; z-index: 10; max-width: 400px; padding-top: 40px; padding-right: 40px; padding-bottom: 40px; padding-left: 40px; border-top-style: solid; border-top-width: 1px; border-top-color: hsla(0, 0.00%, 18.67%, 1.00); border-right-style: solid; border-right-width: 1px; border-right-color: hsla(0, 0.00%, 18.67%, 1.00); border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: hsla(0, 0.00%, 18.67%, 1.00); border-left-style: solid; border-left-width: 1px; border-left-color: hsla(0, 0.00%, 18.67%, 1.00); border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; background-color: hsla(0, 0.00%, 0.00%, 0.00); box-shadow: 0 5px 20px 0 rgba(0,0,0,0.2); backdrop-filter: blur(5px);","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"d5e6ec04-26b1-5827-135e-aa3a86143f84","fake":false,"type":"class","name":"h1","namespace":"","comb":"","styleLess":"margin-top: 0px; color: hsla(0, 0.00%, 100.00%, 1.00); font-weight: 500;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"6d345404-41b4-ce85-4d44-2a3f40f53b96","fake":false,"type":"class","name":"p","namespace":"","comb":"","styleLess":"margin-bottom: 20px; color: hsla(0, 0.00%, 100.00%, 1.00); font-size: 16px; line-height: 1.6; font-weight: 300;","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null},{"_id":"9b295c4b-25f3-b077-1945-44115324d69a","fake":false,"type":"class","name":"button","namespace":"","comb":"","styleLess":"padding-top: 13px; padding-right: 30px; padding-bottom: 13px; padding-left: 30px; border-top-left-radius: 50px; border-top-right-radius: 50px; border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; background-color: hsla(126, 84.60%, 69.70%, 1.00); color: hsla(0, 0.00%, 0.00%, 1.00);","variants":{},"children":[],"createdBy":"633c39086cc87120cfb65542","selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}
Browser not supported. Use
CC Chrome or SS Safari.

About this component

AI Generated

Component Description (Generated by AI)

The Animated Matrix Logged Out component provides a visually engaging experience for users who have logged out, featuring an animated background and clear messaging.

Key Features:

  • Full-screen animated background using a canvas element
  • Responsive design suitable for various screen sizes
  • Clear messaging indicating the user has logged out
  • Call-to-action button to log back in

Design Elements:

  • Grid layout for structured content display
  • Dark color scheme with white text for high contrast
  • Rounded corners and shadow effects for a modern look
  • Flexbox alignment for centered content

Potential Use Cases:

  • Web applications requiring user authentication
  • E-commerce sites needing a logout confirmation page
  • Social media platforms managing user sessions
  • Online services with user accounts

Conclusion: The Animated Matrix Logged Out component is a versatile and visually appealing solution for enhancing user experience during the logout process, making it suitable for various web applications.

Similar Components

View All