apple-intelligence-glow/dist/css/border-glow.css.map

A JavaScript and CSS implementation of the Apple Intelligence border glow effect

{"version":3,"sources":["border-glow.css"],"names":[],"mappings":"AACA,MAEI,qBAAsB,CACtB,uBAAwB,CACxB,uBAAwB,CAGxB,iCAAsC,CACtC,+BAAoC,CACpC,iCAAsC,CAGtC,+BAAoC,CACpC,kCAAuC,CACvC,8BAAmC,CAGnC,iCAAsC,CACtC,gCAAqC,CACrC,iCACJ,CAGA,uBAOI,kBAAmB,CACnB,0BAA2B,CAJ3B,YAAa,CACb,eAAgB,CAFhB,eAAgB,CAGhB,eAAgB,CALhB,iBAAkB,CAClB,UAOJ,CAGA,mBAEI,YAAa,CADb,eAEJ,CAGA,oBAGI,kBAAmB,CADnB,YAAa,CADb,eAGJ,CAGA,oBAGI,eAAkB,CADlB,YAAa,CADb,eAGJ,CAGA,cAYI,kBAAmB,CANnB,qBAAsB,CADtB,UAAW,CAIX,YAAa,CACb,qBAAsB,CAGtB,gBAAiB,CAFjB,sBAAuB,CARvB,QAAS,CAWT,eAAgB,CAbhB,iBAAkB,CAGlB,SAAU,CAFV,OAAQ,CAMR,UAOJ,CAEA,+CAVI,kBAYJ,CAEA,kCACI,kBACJ,CAEA,kCACI,eACJ,CAGA,YAQI,sCAAwC,CADxC,4BAA6B,CAF7B,wBAAyB,CAFzB,UAAW,CAOX,qBAAsB,CADtB,UAAY,CARZ,iBAAkB,CAClB,SAAU,CAEV,uBAOJ,CAEA,2CAPI,kBASJ,CAEA,gCACI,kBACJ,CAEA,gCACI,eACJ,CAGA,cAEI,gBAAiB,CADjB,SAEJ,CAGA,cAEI,iBAAkB,CADlB,SAEJ,CAGA,cAEI,iBAAkB,CADlB,SAEJ,CAGA,cAEI,iBAAkB,CADlB,SAEJ,CAGA,oCACI,+EASJ,CAEA,oCACI,gFASJ,CAEA,oCACI,+EASJ,CAEA,oCACI,gFASJ,CAGA,iCACI,+EASJ,CAEA,iCACI,gFASJ,CAEA,iCACI,+EASJ,CAEA,iCACI,gFASJ,CAGA,kCACI,+EASJ,CAEA,kCACI,gFASJ,CAEA,kCACI,+EASJ,CAEA,kCACI,gFASJ,CAGA,yBACI,GAAK,uBAA4B,CACjC,GAAO,0BAA8B,CACzC,CAEA,yBACI,GAAK,uBAA4B,CACjC,GAAO,0BAA8B,CACzC,CAEA,yBACI,GAAK,uBAA4B,CACjC,GAAO,6BAAgC,CAC3C,CAEA,yBACI,GAAK,uBAA4B,CACjC,GAAO,8BAAiC,CAC5C,CAGA,MACI,wBAAyB,CACzB,yBAA0B,CAC1B,yBAA0B,CAC1B,yBACJ,CAEA,wBAEI,kEAEJ,CAEA,gDALI,yBAA0B,CAE1B,+BAOJ,CAJA,wBAEI,kEAEJ,CAEA,wBAEI,kEAEJ,CAEA,gDALI,yBAA0B,CAE1B,+BAOJ,CAJA,wBAEI,kEAEJ,CAEA,wFAII,2BACJ","file":"border-glow.css","sourcesContent":["/* Apple Intelligence Border Glow Effect CSS - Animated Border Only */\n:root {\n    /* Animation timing variables */\n    --pulse-duration-1: 4s;\n    --pulse-duration-2: 4.2s;\n    --pulse-duration-3: 3.8s;\n    \n    /* Default color scheme */\n    --color-purple: rgba(153, 0, 255, 0.8);\n    --color-pink: rgba(255, 0, 102, 0.8);\n    --color-orange: rgba(255, 102, 0, 0.8);\n    \n    /* Blue color scheme */\n    --color-blue: rgba(0, 153, 255, 0.8);\n    --color-magenta: rgba(255, 0, 204, 0.8);\n    --color-navy: rgba(0, 51, 255, 0.8);\n    \n    /* Green color scheme */\n    --color-green: rgba(102, 255, 51, 0.8);\n    --color-lime: rgba(204, 255, 51, 0.8);\n    --color-yellow: rgba(255, 204, 0, 0.8);\n}\n\n/* Border glow container */\n.border-glow-container {\n    position: relative;\n    width: 100%;\n    max-width: 380px;\n    height: 700px;\n    margin: 5px auto;\n    overflow: hidden;\n    border-radius: 50px;\n    contain: layout style paint; /* Performance optimization */\n}\n\n/* Small size variation */\n.border-glow-small {\n    max-width: 300px;\n    height: 550px;\n}\n\n/* Tablet size variation */\n.border-glow-tablet {\n    max-width: 500px;\n    height: 700px;\n    border-radius: 30px;\n}\n\n/* Laptop size variation - no border radius */\n.border-glow-laptop {\n    max-width: 800px;\n    height: 500px;\n    border-radius: 0px;\n}\n\n/* Main content area */\n.content-area {\n    position: absolute;\n    top: 4px;\n    left: 4px;\n    right: 4px;\n    bottom: 4px;\n    background-color: #000;\n    border-radius: 47px;\n    z-index: 10;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    font-size: 1.5rem;\n    overflow: hidden;\n}\n\n.border-glow-small .content-area {\n    border-radius: 47px;\n}\n\n.border-glow-tablet .content-area {\n    border-radius: 27px;\n}\n\n.border-glow-laptop .content-area {\n    border-radius: 0px;\n}\n\n/* Glow layers */\n.glow-layer {\n    position: absolute;\n    top: -10px;\n    left: -10px;\n    width: calc(100% + 20px);\n    height: calc(100% + 20px);\n    border-radius: 60px;\n    background-origin: border-box;\n    background-clip: content-box, border-box;\n    opacity: 0.9;\n    mix-blend-mode: screen;\n}\n\n.border-glow-small .glow-layer {\n    border-radius: 60px;\n}\n\n.border-glow-tablet .glow-layer {\n    border-radius: 40px;\n}\n\n.border-glow-laptop .glow-layer {\n    border-radius: 0px;\n}\n\n/* Layer 1 - Base glow layer */\n.glow-layer-1 {\n    z-index: 1;\n    filter: blur(5px);\n}\n\n/* Layer 2 - Second glow layer */\n.glow-layer-2 {\n    z-index: 2;\n    filter: blur(10px);\n}\n\n/* Layer 3 - Third glow layer */\n.glow-layer-3 {\n    z-index: 3;\n    filter: blur(15px);\n}\n\n/* Layer 4 - Fourth glow layer for complete coverage */\n.glow-layer-4 {\n    z-index: 4;\n    filter: blur(20px);\n}\n\n/* Default color scheme - Purple to orange */\n.color-scheme-default .glow-layer-1 {\n    background: linear-gradient(\n        90deg,\n        #6600ff 0%,\n        #9900ff 20%,\n        #cc00ff 40%,\n        #ff0066 60%,\n        #ff6600 80%,\n        #6600ff 100%\n    );\n}\n\n.color-scheme-default .glow-layer-2 {\n    background: linear-gradient(\n        180deg,\n        #9900ff 0%,\n        #cc00ff 20%,\n        #ff0066 40%,\n        #ff6600 60%,\n        #ffcc00 80%,\n        #9900ff 100%\n    );\n}\n\n.color-scheme-default .glow-layer-3 {\n    background: linear-gradient(\n        45deg,\n        #cc00ff 0%,\n        #ff0066 20%,\n        #ff6600 40%,\n        #ffcc00 60%,\n        #6600ff 80%,\n        #cc00ff 100%\n    );\n}\n\n.color-scheme-default .glow-layer-4 {\n    background: linear-gradient(\n        -45deg,\n        #ff0066 0%,\n        #ff6600 20%,\n        #ffcc00 40%,\n        #6600ff 60%,\n        #9900ff 80%,\n        #ff0066 100%\n    );\n}\n\n/* Blue color scheme */\n.color-scheme-blue .glow-layer-1 {\n    background: linear-gradient(\n        90deg,\n        #0033ff 0%,\n        #0099ff 20%,\n        #00ccff 40%,\n        #ff00cc 60%,\n        #ff0066 80%,\n        #0033ff 100%\n    );\n}\n\n.color-scheme-blue .glow-layer-2 {\n    background: linear-gradient(\n        180deg,\n        #0099ff 0%,\n        #00ccff 20%,\n        #ff00cc 40%,\n        #ff0066 60%,\n        #ff3300 80%,\n        #0099ff 100%\n    );\n}\n\n.color-scheme-blue .glow-layer-3 {\n    background: linear-gradient(\n        45deg,\n        #00ccff 0%,\n        #ff00cc 20%,\n        #ff0066 40%,\n        #ff3300 60%,\n        #0033ff 80%,\n        #00ccff 100%\n    );\n}\n\n.color-scheme-blue .glow-layer-4 {\n    background: linear-gradient(\n        -45deg,\n        #ff00cc 0%,\n        #ff0066 20%,\n        #ff3300 40%,\n        #0033ff 60%,\n        #0099ff 80%,\n        #ff00cc 100%\n    );\n}\n\n/* Green color scheme */\n.color-scheme-green .glow-layer-1 {\n    background: linear-gradient(\n        90deg,\n        #00ff33 0%,\n        #66ff33 20%,\n        #99ff33 40%,\n        #ccff33 60%,\n        #ffcc00 80%,\n        #00ff33 100%\n    );\n}\n\n.color-scheme-green .glow-layer-2 {\n    background: linear-gradient(\n        180deg,\n        #66ff33 0%,\n        #99ff33 20%,\n        #ccff33 40%,\n        #ffcc00 60%,\n        #ff9900 80%,\n        #66ff33 100%\n    );\n}\n\n.color-scheme-green .glow-layer-3 {\n    background: linear-gradient(\n        45deg,\n        #99ff33 0%,\n        #ccff33 20%,\n        #ffcc00 40%,\n        #ff9900 60%,\n        #00ff33 80%,\n        #99ff33 100%\n    );\n}\n\n.color-scheme-green .glow-layer-4 {\n    background: linear-gradient(\n        -45deg,\n        #ccff33 0%,\n        #ffcc00 20%,\n        #ff9900 40%,\n        #00ff33 60%,\n        #66ff33 80%,\n        #ccff33 100%\n    );\n}\n\n/* Animation for layers */\n@keyframes moveGradient1 {\n    0% { background-position: 0% 0%; }\n    100% { background-position: 200% 0%; }\n}\n\n@keyframes moveGradient2 {\n    0% { background-position: 0% 0%; }\n    100% { background-position: 0% 200%; }\n}\n\n@keyframes moveGradient3 {\n    0% { background-position: 0% 0%; }\n    100% { background-position: 200% 200%; }\n}\n\n@keyframes moveGradient4 {\n    0% { background-position: 0% 0%; }\n    100% { background-position: 200% -200%; }\n}\n\n/* Add variables for gradient animations */\n:root {\n    --gradient-duration-1: 8s;\n    --gradient-duration-2: 10s;\n    --gradient-duration-3: 12s;\n    --gradient-duration-4: 14s;\n}\n\n.animated .glow-layer-1 {\n    background-size: 200% 200%;\n    animation: moveGradient1 var(--gradient-duration-1) linear infinite;\n    will-change: background-position;\n}\n\n.animated .glow-layer-2 {\n    background-size: 200% 200%;\n    animation: moveGradient2 var(--gradient-duration-2) linear infinite;\n    will-change: background-position;\n}\n\n.animated .glow-layer-3 {\n    background-size: 200% 200%;\n    animation: moveGradient3 var(--gradient-duration-3) linear infinite;\n    will-change: background-position;\n}\n\n.animated .glow-layer-4 {\n    background-size: 200% 200%;\n    animation: moveGradient4 var(--gradient-duration-4) linear infinite;\n    will-change: background-position;\n}\n\n.paused .glow-layer-1,\n.paused .glow-layer-2,\n.paused .glow-layer-3,\n.paused .glow-layer-4 {\n    animation-play-state: paused;\n}\n"]}