galaxy-uniapp-mcp-server/data/components/loaders/0xnihilism_brown-puma-30.json

Galaxy组件库到UniApp组件转换MCP服务器 - 支持跨平台组件转换、兼容性分析和项目集成

{
  "id": "0xnihilism_brown-puma-30",
  "name": "brown-puma-30",
  "category": "loaders",
  "author": "0xnihilism",
  "description": "brown-puma-30 组件 (loading, loader, animated, light&dark, brutalism, orwellian, animation, gradient)",
  "tags": [
    "loading",
    "loader",
    "animated",
    "light&dark",
    "brutalism",
    "orwellian",
    "animation",
    "gradient"
  ],
  "original": {
    "html": "<div class=\"orwellian-container\">\n  <div class=\"orwellian-loader\">\n    <div class=\"eye\">\n      <div class=\"pupil\"></div>\n      <div class=\"eyelid\"></div>\n    </div>\n    <div class=\"spotlight\"></div>\n    <div class=\"text\">BIG BROTHER IS LOADING</div>\n    <div class=\"scan-lines\"></div>\n    <div class=\"tv-effect\"></div>\n  </div>\n</div>",
    "css": "/* From Uiverse.io by 0xnihilism  - Tags: loading, loader, animated, light&dark, brutalism, orwellian */\n.orwellian-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  margin: 0;\n  overflow: hidden;\n  font-family: \"Arial Black\", \"Helvetica Neue\", Arial, sans-serif;\n  font-weight: 900;\n}\n.orwellian-container .orwellian-loader {\n  width: 280px;\n  height: 280px;\n  background-color: #000;\n  border: 10px solid #333;\n  position: relative;\n  overflow: hidden;\n  padding: 20px;\n  box-sizing: border-box;\n}\n\n.orwellian-container .eye {\n  width: 160px;\n  height: 60px;\n  background-color: #fff;\n  border-radius: 50%;\n  position: absolute;\n  top: 30%;\n  left: 50%;\n  transform: translate(-50%, -60%);\n  animation: pulse 2s infinite;\n  overflow: hidden;\n  z-index: 10;\n}\n\n.orwellian-container .pupil {\n  width: 50px;\n  height: 50px;\n  background-color: #000;\n  border-radius: 50%;\n  position: absolute;\n  top: 33%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  animation: look-diagonal 4s infinite ease-in-out;\n}\n\n.orwellian-container .pupil::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 30px;\n  height: 30px;\n  background: radial-gradient(circle, rgb(255, 0, 0) 0%, transparent 70%);\n  border-radius: 50%;\n  transform: translate(-50%, -50%);\n  opacity: 0.7;\n}\n\n.orwellian-container .eyelid {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background-color: #000;\n  animation: blink 4s infinite;\n}\n\n.orwellian-container .spotlight {\n  position: absolute;\n  top: 30%;\n  left: 50%;\n  width: 47px;\n  height: 200px;\n  background: linear-gradient(to bottom, rgba(255, 0, 0, 0.8), transparent);\n  filter: blur(8px);\n  transform-origin: top;\n  animation: spotlight-sweep-diagonal 4s infinite ease-in-out;\n}\n\n.orwellian-container .text {\n  position: absolute;\n  bottom: 20px;\n  left: 10px;\n  right: 10px;\n  text-align: center;\n  font-size: 20px;\n  font-weight: bold;\n  color: #f8d17c;\n  text-transform: uppercase;\n  letter-spacing: 1px;\n  animation: glitch 1s infinite;\n  z-index: 20;\n}\n\n.orwellian-container .scan-lines {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: linear-gradient(\n    to bottom,\n    transparent 50%,\n    rgba(0, 0, 0, 0.3) 50%\n  );\n  background-size: 100% 4px;\n  animation: scan 10s linear infinite;\n  z-index: 30;\n  opacity: 0.3;\n  pointer-events: none;\n}\n\n.orwellian-container .tv-effect {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),\n    linear-gradient(\n      90deg,\n      rgba(255, 0, 0, 0.06),\n      rgba(0, 255, 0, 0.02),\n      rgba(0, 0, 255, 0.06)\n    );\n  background-size: 100% 2px, 3px 100%;\n  animation: tv-flicker 0.15s infinite;\n  z-index: 35;\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n.orwellian-container .orwellian-loader::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: repeating-linear-gradient(\n    0deg,\n    rgba(255, 255, 255, 0.03),\n    rgba(255, 255, 255, 0.03) 1px,\n    transparent 1px,\n    transparent 2px\n  );\n  pointer-events: none;\n  z-index: 40;\n}\n\n.orwellian-container .orwellian-loader::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: radial-gradient(\n    circle at center,\n    transparent 30%,\n    rgba(0, 0, 0, 0.5) 90%\n  );\n  z-index: 35;\n  pointer-events: none;\n}\n\n@keyframes look-diagonal {\n  0%,\n  100% {\n    transform: translateX(-50%) rotate(0deg);\n  }\n  25% {\n    transform: translateX(-40%) rotate(-15deg);\n  }\n  75% {\n    transform: translateX(-60%) rotate(15deg);\n  }\n}\n\n@keyframes spotlight-sweep-diagonal {\n  0%,\n  100% {\n    transform: translateX(-50%) rotate(0deg);\n  }\n  25% {\n    transform: translateX(-40%) rotate(-15deg);\n  }\n  75% {\n    transform: translateX(-60%) rotate(15deg);\n  }\n}\n\n@keyframes pulse {\n  0%,\n  100% {\n    transform: translate(-50%, -60%) scale(1);\n  }\n  50% {\n    transform: translate(-50%, -60%) scale(1.05);\n  }\n}\n\n@keyframes glitch {\n  0%,\n  100% {\n    transform: translate(0, 0);\n    opacity: 1;\n  }\n  25% {\n    transform: translate(-2px, 2px);\n    opacity: 0.75;\n  }\n  50% {\n    transform: translate(2px, -2px);\n    opacity: 0.5;\n  }\n  75% {\n    transform: translate(-2px, -2px);\n    opacity: 0.75;\n  }\n}\n\n@keyframes blink {\n  0%,\n  90%,\n  100% {\n    height: 0;\n  }\n  95% {\n    height: 100%;\n  }\n}\n\n@keyframes scan {\n  0% {\n    background-position: 0 0;\n  }\n  100% {\n    background-position: 0 100%;\n  }\n}\n\n@keyframes tv-flicker {\n  0% {\n    opacity: 0.27049;\n  }\n  5% {\n    opacity: 0.34801;\n  }\n  10% {\n    opacity: 0.23175;\n  }\n  15% {\n    opacity: 0.40923;\n  }\n  20% {\n    opacity: 0.29481;\n  }\n  25% {\n    opacity: 0.38584;\n  }\n  30% {\n    opacity: 0.24928;\n  }\n  35% {\n    opacity: 0.32451;\n  }\n  40% {\n    opacity: 0.37031;\n  }\n  45% {\n    opacity: 0.26941;\n  }\n  50% {\n    opacity: 0.35755;\n  }\n  55% {\n    opacity: 0.29288;\n  }\n  60% {\n    opacity: 0.31821;\n  }\n  65% {\n    opacity: 0.39726;\n  }\n  70% {\n    opacity: 0.25294;\n  }\n  75% {\n    opacity: 0.36898;\n  }\n  80% {\n    opacity: 0.28995;\n  }\n  85% {\n    opacity: 0.3398;\n  }\n  90% {\n    opacity: 0.38703;\n  }\n  95% {\n    opacity: 0.24619;\n  }\n  100% {\n    opacity: 0.35762;\n  }\n}\n\n/* Additional styles to ensure full coverage */\n.orwellian-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  min-height: 300px; /* Ensures a minimum height for the container */\n}\n\n/* Responsive adjustments */\n@media (max-width: 480px) {\n  .orwellian-container .orwellian-loader {\n    width: 240px;\n    height: 240px;\n  }\n\n  .orwellian-container .eye {\n    width: 140px;\n    height: 50px;\n  }\n\n  .orwellian-container .pupil {\n    width: 40px;\n    height: 40px;\n  }\n\n  .orwellian-container .spotlight {\n    width: 40px;\n    height: 160px;\n  }\n\n  .orwellian-container .text {\n    font-size: 16px;\n  }\n}\n\n/* Accessibility improvements */\n.orwellian-container .text {\n  user-select: none; /* Prevents text selection */\n}\n\n.orwellian-container .orwellian-loader:focus {\n  outline: 2px solid #fff;\n  outline-offset: 2px;\n}\n\n.orwellian-container .orwellian-loader {\n  animation: subtle-rotate 6s infinite ease-in-out;\n}\n\n/* Enhance TV effect */\n.orwellian-container .tv-effect::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: radial-gradient(\n      circle at center,\n      rgba(255, 255, 255, 0.1) 0%,\n      transparent 80%\n    ),\n    repeating-radial-gradient(\n      circle at center,\n      rgba(0, 0, 0, 0) 0,\n      rgba(0, 0, 0, 0.1) 1px,\n      transparent 1px,\n      transparent 4px\n    );\n  background-size: 100% 100%, 3px 3px;\n  pointer-events: none;\n}\n\n/* Improve text readability */\n.orwellian-container .text {\n  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5),\n    0 0 10px rgba(255, 255, 255, 0.3), 0 0 15px rgba(255, 255, 255, 0.2);\n}\n\n/* Enhance spotlight effect */\n.orwellian-container .spotlight::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: radial-gradient(\n    circle at top,\n    rgba(255, 255, 255, 0.2) 0%,\n    transparent 70%\n  );\n  filter: blur(5px);\n}\n\n/* Add a pulsating glow to the eye */\n@keyframes eye-glow {\n  0%,\n  100% {\n    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);\n  }\n  50% {\n    box-shadow: 0 0 20px rgba(255, 0, 0, 0.8);\n  }\n}\n\n.orwellian-container .eye {\n  animation: pulse 2s infinite, eye-glow 4s infinite;\n}",
    "file_path": "/mnt/persist/workspace/loaders/0xnihilism_brown-puma-30.html"
  },
  "uniapp": {
    "template": "<view class=\"orwellian-container\"></view>\n  <view class=\"orwellian-loader\"></view>\n    <view class=\"eye\"></view>\n      <view class=\"pupil\"></view>\n      <view class=\"eyelid\"></view>\n    </div>\n    <view class=\"spotlight\"></view>\n    <view class=\"text\">BIG BROTHER IS LOADING</view>\n    <view class=\"scan-lines\"></view>\n    <view class=\"tv-effect\"></view>\n  </div>\n</div>",
    "script": "export default {\n  name: 'GalaxyBrownPuma30',\n  props: {\n    // 根据组件类型动态生成props\n  },\n  data() {\n    return {\n      // 组件状态\n    };\n  },\n  methods: {\n    // 组件方法\n  }\n}",
    "style": "\n/* From Uiverse.io by 0xnihilism  - Tags: loading, loader, animated, light&dark, brutalism, orwellian */\n.orwellian-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n  margin: 0;\n  overflow: hidden;\n  font-family: \"Arial Black\", \"Helvetica Neue\", Arial, sans-serif;\n  font-weight: 900;\n}\n.orwellian-container .orwellian-loader {\n  width: 560rpx;\n  height: 560rpx;\n  background-color: #000;\n  border: 20rpx solid #333;\n  position: relative;\n  overflow: hidden;\n  padding: 40rpx;\n  box-sizing: border-box;\n}\n\n.orwellian-container .eye {\n  width: 320rpx;\n  height: 120rpx;\n  background-color: #fff;\n  border-radius: 50%;\n  position: absolute;\n  top: 30%;\n  left: 50%;\n  transform: translate(-50%, -60%);\n  animation: pulse 2s infinite;\n  overflow: hidden;\n  z-index: 10;\n}\n\n.orwellian-container .pupil {\n  width: 100rpx;\n  height: 100rpx;\n  background-color: #000;\n  border-radius: 50%;\n  position: absolute;\n  top: 33%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  animation: look-diagonal 4s infinite ease-in-out;\n}\n\n.orwellian-container .pupil::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 60rpx;\n  height: 60rpx;\n  background: radial-gradient(circle, rgb(255, 0, 0) 0%, transparent 70%);\n  border-radius: 50%;\n  transform: translate(-50%, -50%);\n  opacity: 0.7;\n}\n\n.orwellian-container .eyelid {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background-color: #000;\n  animation: blink 4s infinite;\n}\n\n.orwellian-container .spotlight {\n  position: absolute;\n  top: 30%;\n  left: 50%;\n  width: 94rpx;\n  height: 400rpx;\n  background: linear-gradient(to bottom, rgba(255, 0, 0, 0.8), transparent);\n  \n  transform-origin: top;\n  animation: spotlight-sweep-diagonal 4s infinite ease-in-out;\n}\n\n.orwellian-container .text {\n  position: absolute;\n  bottom: 40rpx;\n  left: 20rpx;\n  right: 20rpx;\n  text-align: center;\n  font-size: 40rpx;\n  font-weight: bold;\n  color: #f8d17c;\n  text-transform: uppercase;\n  letter-spacing: 2rpx;\n  animation: glitch 1s infinite;\n  z-index: 20;\n}\n\n.orwellian-container .scan-lines {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: linear-gradient(\n    to bottom,\n    transparent 50%,\n    rgba(0, 0, 0, 0.3) 50%\n  );\n  background-size: 100% 8rpx;\n  animation: scan 10s linear infinite;\n  z-index: 30;\n  opacity: 0.3;\n  pointer-events: none;\n}\n\n.orwellian-container .tv-effect {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),\n    linear-gradient(\n      90deg,\n      rgba(255, 0, 0, 0.06),\n      rgba(0, 255, 0, 0.02),\n      rgba(0, 0, 255, 0.06)\n    );\n  background-size: 100% 4rpx, 6rpx 100%;\n  animation: tv-flicker 0.15s infinite;\n  z-index: 35;\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n.orwellian-container .orwellian-loader::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: repeating-linear-gradient(\n    0deg,\n    rgba(255, 255, 255, 0.03),\n    rgba(255, 255, 255, 0.03) 2rpx,\n    transparent 2rpx,\n    transparent 4rpx\n  );\n  pointer-events: none;\n  z-index: 40;\n}\n\n.orwellian-container .orwellian-loader::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: radial-gradient(\n    circle at center,\n    transparent 30%,\n    rgba(0, 0, 0, 0.5) 90%\n  );\n  z-index: 35;\n  pointer-events: none;\n}\n\n@keyframes look-diagonal {\n  0%,\n  100% {\n    transform: translateX(-50%) rotate(0deg);\n  }\n  25% {\n    transform: translateX(-40%) rotate(-15deg);\n  }\n  75% {\n    transform: translateX(-60%) rotate(15deg);\n  }\n}\n\n@keyframes spotlight-sweep-diagonal {\n  0%,\n  100% {\n    transform: translateX(-50%) rotate(0deg);\n  }\n  25% {\n    transform: translateX(-40%) rotate(-15deg);\n  }\n  75% {\n    transform: translateX(-60%) rotate(15deg);\n  }\n}\n\n@keyframes pulse {\n  0%,\n  100% {\n    transform: translate(-50%, -60%) scale(1);\n  }\n  50% {\n    transform: translate(-50%, -60%) scale(1.05);\n  }\n}\n\n@keyframes glitch {\n  0%,\n  100% {\n    transform: translate(0, 0);\n    opacity: 1;\n  }\n  25% {\n    transform: translate(-4rpx, 4rpx);\n    opacity: 0.75;\n  }\n  50% {\n    transform: translate(4rpx, -4rpx);\n    opacity: 0.5;\n  }\n  75% {\n    transform: translate(-4rpx, -4rpx);\n    opacity: 0.75;\n  }\n}\n\n@keyframes blink {\n  0%,\n  90%,\n  100% {\n    height: 0;\n  }\n  95% {\n    height: 100%;\n  }\n}\n\n@keyframes scan {\n  0% {\n    background-position: 0 0;\n  }\n  100% {\n    background-position: 0 100%;\n  }\n}\n\n@keyframes tv-flicker {\n  0% {\n    opacity: 0.27049;\n  }\n  5% {\n    opacity: 0.34801;\n  }\n  10% {\n    opacity: 0.23175;\n  }\n  15% {\n    opacity: 0.40923;\n  }\n  20% {\n    opacity: 0.29481;\n  }\n  25% {\n    opacity: 0.38584;\n  }\n  30% {\n    opacity: 0.24928;\n  }\n  35% {\n    opacity: 0.32451;\n  }\n  40% {\n    opacity: 0.37031;\n  }\n  45% {\n    opacity: 0.26941;\n  }\n  50% {\n    opacity: 0.35755;\n  }\n  55% {\n    opacity: 0.29288;\n  }\n  60% {\n    opacity: 0.31821;\n  }\n  65% {\n    opacity: 0.39726;\n  }\n  70% {\n    opacity: 0.25294;\n  }\n  75% {\n    opacity: 0.36898;\n  }\n  80% {\n    opacity: 0.28995;\n  }\n  85% {\n    opacity: 0.3398;\n  }\n  90% {\n    opacity: 0.38703;\n  }\n  95% {\n    opacity: 0.24619;\n  }\n  100% {\n    opacity: 0.35762;\n  }\n}\n\n/* Additional styles to ensure full coverage */\n.orwellian-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  min-height: 600rpx; /* Ensures a minimum height for the container */\n}\n\n/* Responsive adjustments */\n@media (max-width: 960rpx) {\n  .orwellian-container .orwellian-loader {\n    width: 480rpx;\n    height: 480rpx;\n  }\n\n  .orwellian-container .eye {\n    width: 280rpx;\n    height: 100rpx;\n  }\n\n  .orwellian-container .pupil {\n    width: 80rpx;\n    height: 80rpx;\n  }\n\n  .orwellian-container .spotlight {\n    width: 80rpx;\n    height: 320rpx;\n  }\n\n  .orwellian-container .text {\n    font-size: 32rpx;\n  }\n}\n\n/* Accessibility improvements */\n.orwellian-container .text {\n  user-select: none; /* Prevents text selection */\n}\n\n.orwellian-container .orwellian-loader:focus {\n  outline: 4rpx solid #fff;\n  outline-offset: 4rpx;\n}\n\n.orwellian-container .orwellian-loader {\n  animation: subtle-rotate 6s infinite ease-in-out;\n}\n\n/* Enhance TV effect */\n.orwellian-container .tv-effect::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: radial-gradient(\n      circle at center,\n      rgba(255, 255, 255, 0.1) 0%,\n      transparent 80%\n    ),\n    repeating-radial-gradient(\n      circle at center,\n      rgba(0, 0, 0, 0) 0,\n      rgba(0, 0, 0, 0.1) 2rpx,\n      transparent 2rpx,\n      transparent 8rpx\n    );\n  background-size: 100% 100%, 6rpx 6rpx;\n  pointer-events: none;\n}\n\n/* Improve text readability */\n.orwellian-container .text {\n  /* #ifdef H5 */\n  text-shadow: 0 0 10rpx rgba(255, 255, 255, 0.5),\n    0 0 20rpx rgba(255, 255, 255, 0.3), 0 0 30rpx rgba(255, 255, 255, 0.2);\n  /* #endif */\n}\n\n/* Enhance spotlight effect */\n.orwellian-container .spotlight::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: radial-gradient(\n    circle at top,\n    rgba(255, 255, 255, 0.2) 0%,\n    transparent 70%\n  );\n  \n}\n\n/* Add a pulsating glow to the eye */\n@keyframes eye-glow {\n  0%,\n  100% {\n    /* #ifdef H5 */\n  /* #ifdef H5 */\n  box-shadow: 0 0 20rpx rgba(255, 0, 0, 0.5);\n  /* #endif */\n  /* #ifdef MP */\n  border: 1rpx solid rgba(0,0,0,0.1);\n  /* #endif */\n  /* #endif */\n  }\n  50% {\n    /* #ifdef H5 */\n  /* #ifdef H5 */\n  box-shadow: 0 0 40rpx rgba(255, 0, 0, 0.8);\n  /* #endif */\n  /* #ifdef MP */\n  border: 1rpx solid rgba(0,0,0,0.1);\n  /* #endif */\n  /* #endif */\n  }\n}\n\n.orwellian-container .eye {\n  animation: pulse 2s infinite, eye-glow 4s infinite;\n}\n\n",
    "component_name": "GalaxyBrownPuma30"
  },
  "platforms": {
    "h5": true,
    "mp-weixin": true,
    "mp-alipay": true,
    "mp-baidu": true,
    "mp-toutiao": true,
    "app-plus": true
  },
  "props": [
    {
      "name": "disabled",
      "type": "Boolean",
      "default": false,
      "required": false,
      "description": "是否禁用"
    }
  ],
  "events": [],
  "slots": [
    {
      "name": "",
      "description": "",
      "props": []
    }
  ],
  "compatibility": {
    "h5": {
      "supported": true,
      "issues": [],
      "alternatives": []
    },
    "mp-weixin": {
      "supported": true,
      "issues": [
        "不支持 box-shadow 属性",
        "不支持 text-shadow 属性",
        "不支持 filter 属性"
      ],
      "alternatives": []
    },
    "mp-alipay": {
      "supported": true,
      "issues": [
        "不支持 box-shadow 属性",
        "不支持 text-shadow 属性",
        "不支持 filter 属性"
      ],
      "alternatives": []
    },
    "app-plus": {
      "supported": true,
      "issues": [],
      "alternatives": []
    }
  },
  "performance": {
    "complexity": "high",
    "bundle_size": 7793,
    "render_cost": "high",
    "memory_usage": "high"
  },
  "dependencies": [],
  "examples": [
    {
      "title": "",
      "description": "",
      "code": ""
    }
  ],
  "created_at": "2025-07-31T07:55:38.784Z",
  "updated_at": "2025-07-31T07:55:38.784Z"
}