{"html":"

Protected by magic !

Grab me if you can...

Magic disabled...

Eh wait ! Grab me again !

\n \n

\n","css":"/*************/\n/* Container */\n/*************/\n\n/* Container - Variables */\n.track-container {\n --clip-path: ellipse(50% 50% at 50% 50%);\n --cursor: grab;\n}\n\n/* Container - Base */\n.track-container {\n filter: drop-shadow(1px 4px 3px #000);\n height: 10rem;\n position: relative;\n width: 20rem;\n}\n/* Container - Background */\n.track-container::before {\n background: #555;\n clip-path: var(--clip-path);\n content: \"\";\n height: 100%;\n position: absolute;\n width: 100%;\n}\n\n/******/\n/* UI */\n/******/\n\n/* Common */\n/**********/\n\n/* Common - Variables */\n.track-ui {\n --angle: 60deg;\n}\n\n/* Text */\n/********/\n\n/* Text - Variables */\n.track-ui__text {\n --color-fill: #fff;\n --color-glow: #f00;\n\n --height: 2em;\n --width: 100%;\n}\n\n/* Text - Base */\n.track-ui__text {\n opacity: 0;\n}\n\n/* Text - Title */\n.track-ui__text-title {\n background: var(--color-fill);\n background-clip: text;\n color: transparent;\n display: flex;\n font-size: 1.5rem;\n font-weight: 700;\n height: var(--height);\n justify-content: center;\n left: 0;\n position: absolute;\n filter: drop-shadow(0 0 5px var(--color-glow));\n width: var(--width);\n}\n\n/* Text - Title - Mapping */\n.track-ui__text-title:nth-child(1) {\n top: calc(-1 * var(--height));\n}\n.track-ui__text-title:nth-child(2) {\n bottom: calc(-1.25 * var(--height));\n}\n\n/* Character */\n/*************/\n\n/* Character - Variables */\n.track-ui__char {\n --radius: 1.5rem;\n --height: calc(2 * var(--radius));\n --width: calc(2 * var(--radius));\n\n --pos-x: 4;\n --pos-y: 4;\n}\n\n/* Character - Base */\n.track-ui__char {\n border-radius: var(--radius);\n\n bottom: 50%;\n height: var(--height);\n left: calc(50% - var(--height) / 2);\n position: absolute;\n width: var(--width);\n z-index: calc(10 * var(--pos-y));\n}\n\n/* Character - Ball */\n.track-ui__char-ball {\n --color-glow: #f00;\n --float: 5%;\n\n background: #000;\n border-radius: inherit;\n bottom: 0;\n cursor: inherit;\n height: 100%;\n left: 0;\n overflow: hidden;\n position: absolute;\n transform: translateY(var(--float));\n width: 100%;\n}\n.track-ui__char-ball::before {\n background: radial-gradient(\n circle at center,\n var(--color-glow),\n transparent 60%\n );\n border-radius: inherit;\n content: \"\";\n height: 100%;\n left: 0;\n opacity: 0;\n position: absolute;\n top: 0;\n width: 100%;\n}\n.track-ui__char-ball::after {\n --ratio: 15%;\n\n background: radial-gradient(circle at center, #fff, transparent);\n border-radius: inherit;\n box-shadow:\n 0 0 0.3rem #fff,\n 0 0 0.8rem rgba(255, 255, 255, 0.5),\n 0 0 1rem rgba(255, 255, 255, 0.5);\n content: \"\";\n height: var(--ratio);\n left: 20%;\n position: absolute;\n top: 20%;\n width: var(--ratio);\n}\n\n/* Character - Shadow */\n.track-ui__char-shadow {\n --float: 0.05;\n --ratio: 105%;\n\n background: radial-gradient(\n circle at center,\n rgba(0, 0, 0, 0.8) 25%,\n transparent\n );\n border-radius: inherit;\n bottom: calc(0% - (var(--ratio) * (1.1 + var(--float))) / 2);\n height: calc(var(--ratio) * (1.1 + var(--float)));\n left: calc(50% - (var(--ratio) * (1.1 + var(--float))) / 2);\n position: absolute;\n transform: rotateX(var(--angle));\n width: calc(var(--ratio) * (1.1 + var(--float)));\n}\n\n/* Spell */\n/*********/\n\n/* Spell - Variables */\n.track-ui__spell {\n --color-border: #111;\n --color-fill: #333;\n --color-line: #fff;\n --color-glow: #90f;\n\n --radius: 2rem;\n --height: calc(2 * var(--radius));\n --width: calc(2 * var(--radius));\n}\n\n/* Spell - Source */\n.track-ui__spell-source {\n display: none;\n}\n\n/* Spell - Magic circle */\n.track-ui__spell-circle {\n --height: calc(2 * var(--radius));\n --radius: 4rem;\n --width: calc(2 * var(--radius));\n\n border: 2px solid var(--color-line);\n border-radius: var(--radius);\n filter: drop-shadow(0 0 0.2rem var(--color-glow));\n height: var(--height);\n left: calc(50% - var(--radius));\n opacity: 0;\n overflow: hidden;\n position: absolute;\n top: calc(50% - var(--radius));\n transform: rotateX(var(--angle));\n width: var(--width);\n}\n/* Spell - Magic circle - Lines */\n.track-ui__spell-circle__line {\n --line-offset: 100%;\n --line-width: 0%;\n --radius: 4;\n --side: calc(1rem * sqrt(2 * pow(var(--radius), 2)));\n\n display: flex;\n height: var(--side);\n left: calc(50% - var(--side) / 2);\n position: absolute;\n top: calc(50% - var(--side) / 2);\n transform: rotate(calc(45deg * var(--index)));\n width: var(--side);\n}\n.track-ui__spell-circle__line::before,\n.track-ui__spell-circle__line::after {\n content: \"\";\n height: 0.1rem;\n}\n.track-ui__spell-circle__line::before {\n width: var(--line-offset);\n}\n.track-ui__spell-circle__line::after {\n background: var(--color-line);\n width: var(--line-width);\n}\n/* Spell - Magic circle - Lines mapping */\n.track-ui__spell-circle__line:nth-child(1) {\n --index: 0;\n}\n.track-ui__spell-circle__line:nth-child(2) {\n --index: 1;\n}\n.track-ui__spell-circle__line:nth-child(3) {\n --index: 2;\n}\n.track-ui__spell-circle__line:nth-child(4) {\n --index: 3;\n}\n.track-ui__spell-circle__line:nth-child(5) {\n --index: 4;\n}\n.track-ui__spell-circle__line:nth-child(6) {\n --index: 5;\n}\n.track-ui__spell-circle__line:nth-child(7) {\n --index: 6;\n}\n.track-ui__spell-circle__line:nth-child(8) {\n --index: 7;\n}\n\n/* Tornado */\n/***********/\n\n/* Tornado - Variables */\n.track-ui__tornado {\n --color-line: #afa;\n --color-glow: #0f0;\n\n --wind-nb: 8;\n\n --radius: 1rem;\n --height: calc(2 * var(--radius));\n --width: calc(2 * var(--radius));\n --pos-x: 4;\n --pos-y: 4;\n}\n\n/* Tornado - Base */\n.track-ui__tornado {\n border: none;\n border-radius: var(--radius);\n opacity: 0;\n position: absolute;\n z-index: calc(10 * var(--pos-y) + 1);\n}\n\n/* Tornado - Wind */\n.track-ui__tornado-wind {\n --ratio: calc((var(--index) + 2) / var(--wind-nb));\n --height: calc(100% * var(--ratio));\n --width: calc(200% * var(--ratio));\n\n border-radius: var(--width);\n filter: drop-shadow(0 0 0.05rem var(--color-glow));\n height: var(--height);\n left: calc(50% - var(--width) / 2);\n position: absolute;\n top: calc(50% - var(--height) / 2);\n width: var(--width);\n}\n.track-ui__tornado-wind::before,\n.track-ui__tornado-wind::after {\n border-radius: inherit;\n bottom: calc(25% * var(--index));\n box-shadow: inset 0 var(--offset-direction) 0 0.01rem var(--color-line);\n content: \"\";\n height: 100%;\n left: 0;\n position: absolute;\n width: 100%;\n}\n/* Tornado - Wind mapping - Direction */\n.track-ui__tornado-wind::before {\n --offset-direction: 0.1rem;\n}\n.track-ui__tornado-wind::after {\n --offset-direction: -0.1rem;\n}\n/* Tornado - Wind mapping - Offset */\n.track-ui__tornado-wind:nth-child(1) {\n --index: 0;\n}\n.track-ui__tornado-wind:nth-child(2) {\n --index: 1;\n}\n.track-ui__tornado-wind:nth-child(3) {\n --index: 2;\n}\n.track-ui__tornado-wind:nth-child(4) {\n --index: 3;\n}\n.track-ui__tornado-wind:nth-child(5) {\n --index: 4;\n}\n.track-ui__tornado-wind:nth-child(6) {\n --index: 5;\n}\n.track-ui__tornado-wind:nth-child(7) {\n --index: 6;\n}\n.track-ui__tornado-wind:nth-child(8) {\n --index: 7;\n}\n\n/****************/\n/* Interactions */\n/****************/\n\n/* Text */\n/*********/\n\n/* Text */\n.track-ui__text {\n transition: all 200ms linear;\n}\n/* Switched:checked - Show corresponding title when enabled */\n.track-container:has(.track-ui__spell-source:checked):not(:hover)\n .track-ui__text.text-enabled {\n opacity: 1;\n}\n/* Switched:not(:checked) - Show corresponding title when disabled */\n.track-container:not(:has(.track-ui__spell-source:checked))\n .track-ui__text.text-disabled {\n opacity: 1;\n}\n\n/* Character */\n/*************/\n\n/* Character */\n.track-ui__char {\n pointer-events: all;\n transition: all 200ms linear;\n}\n\n/* Character - Ball */\n.track-ui__char-ball {\n transition: all 200ms linear;\n}\n.track-ui__char-ball:active {\n cursor: grabbing;\n}\n.track-ui__char-ball::before {\n transition: all 500ms ease-out;\n}\n/* Container:hover - Makes ball float */\n.track-container:has(.track-ui__spell-source:checked) .track-ui__char-ball {\n animation: ballFloat 2s infinite linear;\n opacity: 1;\n}\n/* Character:hover - Makes ball glow */\n.track-container:has(.track-ui__spell-source:checked)\n .track-ui__char-ball:hover::before {\n opacity: 1;\n}\n\n/* Character - Shadow */\n.track-ui__char-shadow {\n transition: all 200ms linear;\n}\n/* Container:hover - Makes ball float */\n.track-container:has(.track-ui__spell-source:checked) .track-ui__char-shadow {\n animation: ballShadowFloat 2s infinite linear;\n opacity: 1;\n}\n\n/* Spell */\n/*********/\n\n/* Spell - Magic circle */\n.track-ui__spell-circle {\n transition: all 0.5s ease-out;\n}\n/* Spell - Magic circle - Lines */\n.track-ui__spell-circle__line::before {\n transition: all 0.5s linear;\n}\n.track-ui__spell-circle__line::after {\n transition: all 0.5s 0.25s linear;\n}\n/* Container:hover - Makes magic circle fade in */\n.track-container:has(.track-ui__spell-source:checked):hover\n .track-ui__spell-circle {\n opacity: 1;\n}\n/* Container:hover - Draws magic circle's lines */\n.track-container:has(.track-ui__spell-source:checked):hover\n .track-ui__spell-circle\n .track-ui__spell-circle__line {\n animation: circleDraw 0.5s forwards linear;\n}\n\n/* Tornado */\n/***********/\n\n/* Tornado - Base */\n.track-ui__tornado {\n transition:\n all 0.5s linear,\n opacity 0.5s linear 1.5s;\n}\n/* Container:hover - Makes tornado fade in and follow cursor */\n.track-container:has(.track-ui__spell-source:checked):hover .track-ui__tornado {\n --pos-x: var(--cursor-pos-x, 4);\n --pos-y: var(--cursor-pos-y, 4);\n\n opacity: 1;\n}\n\n/* Tornado - Wind */\n.track-ui__tornado-wind::before,\n.track-ui__tornado-wind::after {\n animation-delay: calc(var(--index) * 1s / var(--wind-nb));\n animation-duration: 0.5s;\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n}\n/* Tornado - Wind - Direction */\n.track-ui__tornado-wind::before {\n animation-name: windBlowLeft;\n transition: all 0.5s linear;\n}\n.track-ui__tornado-wind::after {\n animation-name: windBlowRight;\n}\n/* Tornado - Wind - Pass behind the ball */\n.track-ui__tornado-wind:nth-child(-n + 6)::before {\n opacity: min(1, pow(var(--pos-x) - 4, 2) + pow(var(--pos-y) - 4, 2));\n}\n\n/**************/\n/* Animations */\n/**************/\n\n/* Character */\n/*************/\n\n/* Char - Floats ball */\n@keyframes ballFloat {\n 0% {\n transform: translateY(calc(-1 * var(--float)));\n }\n\n 25% {\n transform: translateY(calc(-2 * var(--float)));\n }\n\n 50% {\n transform: translateY(calc(-1 * var(--float)));\n }\n\n 75% {\n transform: translateY(calc(0 * var(--float)));\n }\n\n 100% {\n transform: translateY(calc(-1 * var(--float)));\n }\n}\n\n/* Char - Adapts ball's shadow to its floating */\n@keyframes ballShadowFloat {\n 0% {\n bottom: calc(0% - var(--ratio) / 2);\n height: var(--ratio);\n left: calc(50% - var(--ratio) / 2);\n width: var(--ratio);\n }\n\n 25% {\n bottom: calc(0% - (var(--ratio) * (1 - var(--float))) / 2);\n height: calc(var(--ratio) * (1 - var(--float)));\n left: calc(50% - (var(--ratio) * (1 - var(--float))) / 2);\n width: calc(var(--ratio) * (1 - var(--float)));\n }\n\n 50% {\n bottom: calc(0% - var(--ratio) / 2);\n height: var(--ratio);\n left: calc(50% - var(--ratio) / 2);\n width: var(--ratio);\n }\n\n 75% {\n bottom: calc(0% - (var(--ratio) * (1 + var(--float))) / 2);\n height: calc(var(--ratio) * (1 + var(--float)));\n left: calc(50% - (var(--ratio) * (1 + var(--float))) / 2);\n width: calc(var(--ratio) * (1 + var(--float)));\n }\n\n 100% {\n bottom: calc(0% - var(--ratio) / 2);\n height: var(--ratio);\n left: calc(50% - var(--ratio) / 2);\n width: var(--ratio);\n }\n}\n\n/* Spell */\n/*********/\n\n/* Spell - Magic circle - Draws a line */\n@keyframes circleDraw {\n 0% {\n --line-offset: 0%;\n --line-width: 0%;\n }\n\n 100% {\n --line-offset: 0%;\n --line-width: 100%;\n }\n}\n\n/* Tornado */\n/***********/\n\n/* Tornado - Wind - Blows wind from right to left */\n@keyframes windBlowLeft {\n 0% {\n clip-path: inset(0 0 0 100%);\n }\n\n 25% {\n clip-path: inset(0 0 0 50%);\n }\n\n 50% {\n clip-path: inset(0 25% 0 25%);\n }\n\n 75% {\n clip-path: inset(0 50% 0 0);\n }\n\n 100% {\n clip-path: inset(0 100% 0 0);\n }\n}\n\n/* Tornado - Wind - Blows wind from left to right */\n@keyframes windBlowRight {\n 0% {\n clip-path: inset(0 100% 0 0);\n }\n\n 25% {\n clip-path: inset(0 50% 0 0);\n }\n\n 50% {\n clip-path: inset(0 25% 0 25%);\n }\n\n 75% {\n clip-path: inset(0 0 0 50%);\n }\n\n 100% {\n clip-path: inset(0 0 0 100%);\n }\n}\n\n/************/\n/* Tracking */\n/************/\n\n/* Style */\n/*********/\n\n/* Grid's variable, for sizing and positionning */\n.track-container {\n --grid-size-length: 9;\n --grid-size-unit: calc(100% / var(--grid-size-length));\n}\n/* Ensure grid and UI are properly sized and positioned */\n.track-container .track-grid,\n.track-container .track-ui {\n border-radius: inherit;\n cursor: var(--cursor);\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n}\n\n/* Limit grid to container */\n.track-container .track-grid {\n border-radius: inherit;\n clip-path: var(--clip-path);\n display: flex;\n flex-wrap: wrap;\n overflow: hidden;\n}\n\n/* Disable pointer events for UI's container, to allow sensors hovering */\n.track-container .track-ui {\n pointer-events: none;\n}\n\n/* Tracker's size and position */\n.track-container .tracker {\n --tracker-height: var(--height, var(--grid-size-unit));\n --tracker-width: var(--width, var(--grid-size-unit));\n\n height: var(--tracker-height);\n left: calc(\n (var(--pos-x) + 0.5) * var(--grid-size-unit) - var(--tracker-width) / 2\n );\n position: absolute;\n top: calc(\n (var(--pos-y) + 0.5) * var(--grid-size-unit) - var(--tracker-height) / 2\n );\n width: var(--tracker-width);\n}\n\n/* Sensor's size and position */\n.track-grid__sensor {\n height: var(--grid-size-unit);\n width: var(--grid-size-unit);\n}\n\n/* Calculations */\n/****************/\n\n.track-container .tracker {\n /* Distance to cursor, on X and Y axis */\n --vector-x: calc(var(--cursor-pos-x, var(--pos-x)) - var(--pos-x));\n --vector-y: calc(var(--cursor-pos-y, var(--pos-y)) - var(--pos-y));\n\n /* Maximum distance to grid's edge */\n --vector-limit: max(\n var(--pos-x),\n calc(var(--grid-size-length) - var(--pos-x)),\n var(--pos-y),\n calc(var(--grid-size-length) - var(--pos-y))\n );\n\n /* Maximum distance to cursor */\n --vector-max: max(\n var(--vector-x),\n calc(var(--vector-x) * -1),\n var(--vector-y),\n calc(var(--vector-y) * -1)\n );\n /* Prevent division by 0, for angle calculation */\n --vector-fix: calc(max(1, var(--vector-max)) - var(--vector-max));\n --vector-safe-max: calc(var(--vector-max) + var(--vector-fix));\n\n /* Distance to cursor, on X and Y axis, relative to position */\n --vector-lin-x: calc(var(--vector-x) / var(--vector-limit));\n --vector-lin-y: calc(var(--vector-y) / var(--vector-limit));\n /* Cosinus and sinus of cursor, relative to position */\n --vector-rad-cos: calc(var(--vector-x) / var(--vector-safe-max));\n --vector-rad-sin: calc(\n -1 * (var(--vector-y) - var(--vector-fix)) / var(--vector-safe-max)\n );\n\n /* Transformation - Rotation needed to point at cursor */\n --trans-rot-angle: atan2(var(--vector-rad-cos), var(--vector-rad-sin));\n /* Transformation - Translation in direction of cursor, within a circle */\n --trans-trc-ratio: calc(\n 1 / sqrt(pow(var(--vector-rad-cos), 2) + pow(var(--vector-rad-sin), 2))\n );\n --trans-trc-x: calc(var(--vector-lin-x) * var(--trans-trc-ratio));\n --trans-trc-y: calc(var(--vector-lin-y) * var(--trans-trc-ratio));\n}\n\n/* Mapping */\n/***********/\n\n/* Cursor position, on X axis */\n.track-grid__sensor:nth-of-type(9n + 1),\n.track-container:has(.track-grid__sensor:nth-of-type(9n + 1):hover) {\n --cursor-pos-x: 0;\n}\n.track-grid__sensor:nth-of-type(9n + 2),\n.track-container:has(.track-grid__sensor:nth-of-type(9n + 2):hover) {\n --cursor-pos-x: 1;\n}\n.track-grid__sensor:nth-of-type(9n + 3),\n.track-container:has(.track-grid__sensor:nth-of-type(9n + 3):hover) {\n --cursor-pos-x: 2;\n}\n.track-grid__sensor:nth-of-type(9n + 4),\n.track-container:has(.track-grid__sensor:nth-of-type(9n + 4):hover) {\n --cursor-pos-x: 3;\n}\n.track-grid__sensor:nth-of-type(9n + 5),\n.track-container:has(.track-grid__sensor:nth-of-type(9n + 5):hover) {\n --cursor-pos-x: 4;\n}\n.track-grid__sensor:nth-of-type(9n + 6),\n.track-container:has(.track-grid__sensor:nth-of-type(9n + 6):hover) {\n --cursor-pos-x: 5;\n}\n.track-grid__sensor:nth-of-type(9n + 7),\n.track-container:has(.track-grid__sensor:nth-of-type(9n + 7):hover) {\n --cursor-pos-x: 6;\n}\n.track-grid__sensor:nth-of-type(9n + 8),\n.track-container:has(.track-grid__sensor:nth-of-type(9n + 8):hover) {\n --cursor-pos-x: 7;\n}\n.track-grid__sensor:nth-of-type(9n),\n.track-container:has(.track-grid__sensor:nth-of-type(9n):hover) {\n --cursor-pos-x: 8;\n}\n\n/* Cursor position, on Y axis */\n.track-grid__sensor:nth-of-type(n + 1):nth-of-type(-n + 9),\n.track-container:has(\n .track-grid__sensor:nth-of-type(n + 1):nth-of-type(-n + 9):hover\n ) {\n --cursor-pos-y: 0;\n}\n.track-grid__sensor:nth-of-type(n + 10):nth-of-type(-n + 18),\n.track-container:has(\n .track-grid__sensor:nth-of-type(n + 10):nth-of-type(-n + 18):hover\n ) {\n --cursor-pos-y: 1;\n}\n.track-grid__sensor:nth-of-type(n + 19):nth-of-type(-n + 27),\n.track-container:has(\n .track-grid__sensor:nth-of-type(n + 19):nth-of-type(-n + 27):hover\n ) {\n --cursor-pos-y: 2;\n}\n.track-grid__sensor:nth-of-type(n + 28):nth-of-type(-n + 36),\n.track-container:has(\n .track-grid__sensor:nth-of-type(n + 28):nth-of-type(-n + 36):hover\n ) {\n --cursor-pos-y: 3;\n}\n.track-grid__sensor:nth-of-type(n + 37):nth-of-type(-n + 45),\n.track-container:has(\n .track-grid__sensor:nth-of-type(n + 37):nth-of-type(-n + 45):hover\n ) {\n --cursor-pos-y: 4;\n}\n.track-grid__sensor:nth-of-type(n + 46):nth-of-type(-n + 54),\n.track-container:has(\n .track-grid__sensor:nth-of-type(n + 46):nth-of-type(-n + 54):hover\n ) {\n --cursor-pos-y: 5;\n}\n.track-grid__sensor:nth-of-type(n + 55):nth-of-type(-n + 63),\n.track-container:has(\n .track-grid__sensor:nth-of-type(n + 55):nth-of-type(-n + 63):hover\n ) {\n --cursor-pos-y: 6;\n}\n.track-grid__sensor:nth-of-type(n + 64):nth-of-type(-n + 72),\n.track-container:has(\n .track-grid__sensor:nth-of-type(n + 64):nth-of-type(-n + 72):hover\n ) {\n --cursor-pos-y: 7;\n}\n.track-grid__sensor:nth-of-type(n + 73):nth-of-type(-n + 81),\n.track-container:has(\n .track-grid__sensor:nth-of-type(n + 73):nth-of-type(-n + 81):hover\n ) {\n --cursor-pos-y: 8;\n}\n"}

giant-ladybug-95

👁 实时预览

📝 源代码