Large performence improvements to Plasma background

public/r/Folder-JS-CSS.json

@@ -13,7 +13,7 @@
 		{
 			"type": "registry:component",
 			"path": "Folder/Folder.jsx",
-			"content": "import { useState } from 'react';\nimport './Folder.css';\n\nconst darkenColor = (hex, percent) => {\n  let color = hex.startsWith('#') ? hex.slice(1) : hex;\n  if (color.length === 3) {\n    color = color\n      .split('')\n      .map(c => c + c)\n      .join('');\n  }\n  const num = parseInt(color, 16);\n  let r = (num >> 16) & 0xff;\n  let g = (num >> 8) & 0xff;\n  let b = num & 0xff;\n  r = Math.max(0, Math.min(255, Math.floor(r * (1 - percent))));\n  g = Math.max(0, Math.min(255, Math.floor(g * (1 - percent))));\n  b = Math.max(0, Math.min(255, Math.floor(b * (1 - percent))));\n  return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();\n};\n\nconst Folder = ({ color = '#5227FF', size = 1, items = [], className = '' }) => {\n  const maxItems = 3;\n  const papers = items.slice(0, maxItems);\n  while (papers.length < maxItems) {\n    papers.push(null);\n  }\n\n  const [open, setOpen] = useState(false);\n  const [paperOffsets, setPaperOffsets] = useState(Array.from({ length: maxItems }, () => ({ x: 0, y: 0 })));\n\n  const folderBackColor = darkenColor(color, 0.08);\n  const paper1 = darkenColor('#ffffff', 0.1);\n  const paper2 = darkenColor('#ffffff', 0.05);\n  const paper3 = '#ffffff';\n\n  const handleClick = () => {\n    setOpen(prev => !prev);\n    if (open) {\n      setPaperOffsets(Array.from({ length: maxItems }, () => ({ x: 0, y: 0 })));\n    }\n  };\n\n  const handlePaperMouseMove = (e, index) => {\n    if (!open) return;\n    const rect = e.currentTarget.getBoundingClientRect();\n    const centerX = rect.left + rect.width / 2;\n    const centerY = rect.top + rect.height / 2;\n    const offsetX = (e.clientX - centerX) * 0.15;\n    const offsetY = (e.clientY - centerY) * 0.15;\n    setPaperOffsets(prev => {\n      const newOffsets = [...prev];\n      newOffsets[index] = { x: offsetX, y: offsetY };\n      return newOffsets;\n    });\n  };\n\n  const handlePaperMouseLeave = (e, index) => {\n    setPaperOffsets(prev => {\n      const newOffsets = [...prev];\n      newOffsets[index] = { x: 0, y: 0 };\n      return newOffsets;\n    });\n  };\n\n  const folderStyle = {\n    '--folder-color': color,\n    '--folder-back-color': folderBackColor,\n    '--paper-1': paper1,\n    '--paper-2': paper2,\n    '--paper-3': paper3\n  };\n\n  const folderClassName = `folder ${open ? 'open' : ''}`.trim();\n  const scaleStyle = { transform: `scale(${size})` };\n\n  return (\n    <div style={scaleStyle} className={className}>\n      <div\n        className={folderClassName}\n        style={folderStyle}\n        onClick={handleClick}\n        onKeyDown={e => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n\n            handleClick();\n          }\n        }}\n        tabIndex={0}\n        role=\"button\"\n        aria-expanded={open}\n        aria-label={open ? 'Close folder' : 'Open folder'}\n      >\n        <div className=\"folder__back\">\n          {papers.map((item, i) => (\n            <div\n              key={i}\n              className={`paper paper-${i + 1}`}\n              onMouseMove={e => handlePaperMouseMove(e, i)}\n              onMouseLeave={e => handlePaperMouseLeave(e, i)}\n              style={\n                open\n                  ? {\n                      '--magnet-x': `${paperOffsets[i]?.x || 0}px`,\n                      '--magnet-y': `${paperOffsets[i]?.y || 0}px`\n                    }\n                  : {}\n              }\n            >\n              {item}\n            </div>\n          ))}\n          <div className=\"folder__front\"></div>\n          <div className=\"folder__front right\"></div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default Folder;\n"
+			"content": "import { useState } from 'react';\nimport './Folder.css';\n\nconst darkenColor = (hex, percent) => {\n  let color = hex.startsWith('#') ? hex.slice(1) : hex;\n  if (color.length === 3) {\n    color = color\n      .split('')\n      .map(c => c + c)\n      .join('');\n  }\n  const num = parseInt(color.slice(0, 6), 16);\n  let r = (num >> 16) & 0xff;\n  let g = (num >> 8) & 0xff;\n  let b = num & 0xff;\n  r = Math.max(0, Math.min(255, Math.floor(r * (1 - percent))));\n  g = Math.max(0, Math.min(255, Math.floor(g * (1 - percent))));\n  b = Math.max(0, Math.min(255, Math.floor(b * (1 - percent))));\n  return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();\n};\n\nconst Folder = ({ color = '#5227FF', size = 1, items = [], className = '' }) => {\n  const maxItems = 3;\n  const papers = items.slice(0, maxItems);\n  while (papers.length < maxItems) {\n    papers.push(null);\n  }\n\n  const [open, setOpen] = useState(false);\n  const [paperOffsets, setPaperOffsets] = useState(Array.from({ length: maxItems }, () => ({ x: 0, y: 0 })));\n\n  const folderBackColor = darkenColor(color, 0.08);\n  const paper1 = darkenColor('#ffffff', 0.1);\n  const paper2 = darkenColor('#ffffff', 0.05);\n  const paper3 = '#ffffff';\n\n  const handleClick = () => {\n    setOpen(prev => !prev);\n    if (open) {\n      setPaperOffsets(Array.from({ length: maxItems }, () => ({ x: 0, y: 0 })));\n    }\n  };\n\n  const handlePaperMouseMove = (e, index) => {\n    if (!open) return;\n    const rect = e.currentTarget.getBoundingClientRect();\n    const centerX = rect.left + rect.width / 2;\n    const centerY = rect.top + rect.height / 2;\n    const offsetX = (e.clientX - centerX) * 0.15;\n    const offsetY = (e.clientY - centerY) * 0.15;\n    setPaperOffsets(prev => {\n      const newOffsets = [...prev];\n      newOffsets[index] = { x: offsetX, y: offsetY };\n      return newOffsets;\n    });\n  };\n\n  const handlePaperMouseLeave = (e, index) => {\n    setPaperOffsets(prev => {\n      const newOffsets = [...prev];\n      newOffsets[index] = { x: 0, y: 0 };\n      return newOffsets;\n    });\n  };\n\n  const folderStyle = {\n    '--folder-color': color,\n    '--folder-back-color': folderBackColor,\n    '--paper-1': paper1,\n    '--paper-2': paper2,\n    '--paper-3': paper3\n  };\n\n  const folderClassName = `folder ${open ? 'open' : ''}`.trim();\n  const scaleStyle = { transform: `scale(${size})` };\n\n  return (\n    <div style={scaleStyle} className={className}>\n      <div\n        className={folderClassName}\n        style={folderStyle}\n        onClick={handleClick}\n        onKeyDown={e => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n\n            handleClick();\n          }\n        }}\n        tabIndex={0}\n        role=\"button\"\n        aria-expanded={open}\n        aria-label={open ? 'Close folder' : 'Open folder'}\n      >\n        <div className=\"folder__back\">\n          {papers.map((item, i) => (\n            <div\n              key={i}\n              className={`paper paper-${i + 1}`}\n              onMouseMove={e => handlePaperMouseMove(e, i)}\n              onMouseLeave={e => handlePaperMouseLeave(e, i)}\n              style={\n                open\n                  ? {\n                      '--magnet-x': `${paperOffsets[i]?.x || 0}px`,\n                      '--magnet-y': `${paperOffsets[i]?.y || 0}px`\n                    }\n                  : {}\n              }\n            >\n              {item}\n            </div>\n          ))}\n          <div className=\"folder__front\"></div>\n          <div className=\"folder__front right\"></div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default Folder;\n"
 		}
 	],
 	"registryDependencies": [],

public/r/Folder-JS-TW.json

@@ -8,7 +8,7 @@
 		{
 			"type": "registry:component",
 			"path": "Folder/Folder.jsx",
-			"content": "import { useState } from 'react';\n\nconst darkenColor = (hex, percent) => {\n  let color = hex.startsWith('#') ? hex.slice(1) : hex;\n  if (color.length === 3) {\n    color = color\n      .split('')\n      .map(c => c + c)\n      .join('');\n  }\n  const num = parseInt(color, 16);\n  let r = (num >> 16) & 0xff;\n  let g = (num >> 8) & 0xff;\n  let b = num & 0xff;\n  r = Math.max(0, Math.min(255, Math.floor(r * (1 - percent))));\n  g = Math.max(0, Math.min(255, Math.floor(g * (1 - percent))));\n  b = Math.max(0, Math.min(255, Math.floor(b * (1 - percent))));\n  return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();\n};\n\nconst Folder = ({ color = '#5227FF', size = 1, items = [], className = '' }) => {\n  const maxItems = 3;\n  const papers = items.slice(0, maxItems);\n  while (papers.length < maxItems) {\n    papers.push(null);\n  }\n\n  const [open, setOpen] = useState(false);\n  const [paperOffsets, setPaperOffsets] = useState(Array.from({ length: maxItems }, () => ({ x: 0, y: 0 })));\n\n  const folderBackColor = darkenColor(color, 0.08);\n  const paper1 = darkenColor('#ffffff', 0.1);\n  const paper2 = darkenColor('#ffffff', 0.05);\n  const paper3 = '#ffffff';\n\n  const handleClick = () => {\n    setOpen(prev => !prev);\n    if (open) {\n      setPaperOffsets(Array.from({ length: maxItems }, () => ({ x: 0, y: 0 })));\n    }\n  };\n\n  const handlePaperMouseMove = (e, index) => {\n    if (!open) return;\n    const rect = e.currentTarget.getBoundingClientRect();\n    const centerX = rect.left + rect.width / 2;\n    const centerY = rect.top + rect.height / 2;\n    const offsetX = (e.clientX - centerX) * 0.15;\n    const offsetY = (e.clientY - centerY) * 0.15;\n    setPaperOffsets(prev => {\n      const newOffsets = [...prev];\n      newOffsets[index] = { x: offsetX, y: offsetY };\n      return newOffsets;\n    });\n  };\n\n  const handlePaperMouseLeave = (e, index) => {\n    setPaperOffsets(prev => {\n      const newOffsets = [...prev];\n      newOffsets[index] = { x: 0, y: 0 };\n      return newOffsets;\n    });\n  };\n\n  const folderStyle = {\n    '--folder-color': color,\n    '--folder-back-color': folderBackColor,\n    '--paper-1': paper1,\n    '--paper-2': paper2,\n    '--paper-3': paper3\n  };\n\n  const scaleStyle = { transform: `scale(${size})` };\n\n  const getOpenTransform = index => {\n    if (index === 0) return 'translate(-120%, -70%) rotate(-15deg)';\n    if (index === 1) return 'translate(10%, -70%) rotate(15deg)';\n    if (index === 2) return 'translate(-50%, -100%) rotate(5deg)';\n    return '';\n  };\n\n  return (\n    <div style={scaleStyle} className={className}>\n      <div\n        className={`group relative transition-all duration-200 ease-in cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 ${\n          !open ? 'hover:-translate-y-2' : ''\n        }`}\n        style={{\n          ...folderStyle,\n          transform: open ? 'translateY(-8px)' : undefined\n        }}\n        onClick={handleClick}\n        onKeyDown={e => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n\n            handleClick();\n          }\n        }}\n        tabIndex={0}\n        role=\"button\"\n        aria-expanded={open}\n        aria-label={open ? 'Close folder' : 'Open folder'}\n      >\n        <div\n          className=\"relative w-[100px] h-[80px] rounded-tl-0 rounded-tr-[10px] rounded-br-[10px] rounded-bl-[10px]\"\n          style={{ backgroundColor: folderBackColor }}\n        >\n          <span\n            className=\"absolute z-0 bottom-[98%] left-0 w-[30px] h-[10px] rounded-tl-[5px] rounded-tr-[5px] rounded-bl-0 rounded-br-0\"\n            style={{ backgroundColor: folderBackColor }}\n          ></span>\n          {papers.map((item, i) => {\n            let sizeClasses = '';\n            if (i === 0) sizeClasses = open ? 'w-[70%] h-[80%]' : 'w-[70%] h-[80%]';\n            if (i === 1) sizeClasses = open ? 'w-[80%] h-[80%]' : 'w-[80%] h-[70%]';\n            if (i === 2) sizeClasses = open ? 'w-[90%] h-[80%]' : 'w-[90%] h-[60%]';\n\n            const transformStyle = open\n              ? `${getOpenTransform(i)} translate(${paperOffsets[i].x}px, ${paperOffsets[i].y}px)`\n              : undefined;\n\n            return (\n              <div\n                key={i}\n                onMouseMove={e => handlePaperMouseMove(e, i)}\n                onMouseLeave={e => handlePaperMouseLeave(e, i)}\n                className={`absolute z-20 bottom-[10%] left-1/2 transition-all duration-300 ease-in-out ${\n                  !open ? 'transform -translate-x-1/2 translate-y-[10%] group-hover:translate-y-0' : 'hover:scale-110'\n                } ${sizeClasses}`}\n                style={{\n                  ...(!open ? {} : { transform: transformStyle }),\n                  backgroundColor: i === 0 ? paper1 : i === 1 ? paper2 : paper3,\n                  borderRadius: '10px'\n                }}\n              >\n                {item}\n              </div>\n            );\n          })}\n          <div\n            className={`absolute z-30 w-full h-full origin-bottom transition-all duration-300 ease-in-out ${\n              !open ? 'group-hover:[transform:skew(15deg)_scaleY(0.6)]' : ''\n            }`}\n            style={{\n              backgroundColor: color,\n              borderRadius: '5px 10px 10px 10px',\n              ...(open && { transform: 'skew(15deg) scaleY(0.6)' })\n            }}\n          ></div>\n          <div\n            className={`absolute z-30 w-full h-full origin-bottom transition-all duration-300 ease-in-out ${\n              !open ? 'group-hover:[transform:skew(-15deg)_scaleY(0.6)]' : ''\n            }`}\n            style={{\n              backgroundColor: color,\n              borderRadius: '5px 10px 10px 10px',\n              ...(open && { transform: 'skew(-15deg) scaleY(0.6)' })\n            }}\n          ></div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default Folder;\n"
+			"content": "import { useState } from 'react';\n\nconst darkenColor = (hex, percent) => {\n  let color = hex.startsWith('#') ? hex.slice(1) : hex;\n  if (color.length === 3) {\n    color = color\n      .split('')\n      .map(c => c + c)\n      .join('');\n  }\n  const num = parseInt(color.slice(0, 6), 16);\n  let r = (num >> 16) & 0xff;\n  let g = (num >> 8) & 0xff;\n  let b = num & 0xff;\n  r = Math.max(0, Math.min(255, Math.floor(r * (1 - percent))));\n  g = Math.max(0, Math.min(255, Math.floor(g * (1 - percent))));\n  b = Math.max(0, Math.min(255, Math.floor(b * (1 - percent))));\n  return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();\n};\n\nconst Folder = ({ color = '#5227FF', size = 1, items = [], className = '' }) => {\n  const maxItems = 3;\n  const papers = items.slice(0, maxItems);\n  while (papers.length < maxItems) {\n    papers.push(null);\n  }\n\n  const [open, setOpen] = useState(false);\n  const [paperOffsets, setPaperOffsets] = useState(Array.from({ length: maxItems }, () => ({ x: 0, y: 0 })));\n\n  const folderBackColor = darkenColor(color, 0.08);\n  const paper1 = darkenColor('#ffffff', 0.1);\n  const paper2 = darkenColor('#ffffff', 0.05);\n  const paper3 = '#ffffff';\n\n  const handleClick = () => {\n    setOpen(prev => !prev);\n    if (open) {\n      setPaperOffsets(Array.from({ length: maxItems }, () => ({ x: 0, y: 0 })));\n    }\n  };\n\n  const handlePaperMouseMove = (e, index) => {\n    if (!open) return;\n    const rect = e.currentTarget.getBoundingClientRect();\n    const centerX = rect.left + rect.width / 2;\n    const centerY = rect.top + rect.height / 2;\n    const offsetX = (e.clientX - centerX) * 0.15;\n    const offsetY = (e.clientY - centerY) * 0.15;\n    setPaperOffsets(prev => {\n      const newOffsets = [...prev];\n      newOffsets[index] = { x: offsetX, y: offsetY };\n      return newOffsets;\n    });\n  };\n\n  const handlePaperMouseLeave = (e, index) => {\n    setPaperOffsets(prev => {\n      const newOffsets = [...prev];\n      newOffsets[index] = { x: 0, y: 0 };\n      return newOffsets;\n    });\n  };\n\n  const folderStyle = {\n    '--folder-color': color,\n    '--folder-back-color': folderBackColor,\n    '--paper-1': paper1,\n    '--paper-2': paper2,\n    '--paper-3': paper3\n  };\n\n  const scaleStyle = { transform: `scale(${size})` };\n\n  const getOpenTransform = index => {\n    if (index === 0) return 'translate(-120%, -70%) rotate(-15deg)';\n    if (index === 1) return 'translate(10%, -70%) rotate(15deg)';\n    if (index === 2) return 'translate(-50%, -100%) rotate(5deg)';\n    return '';\n  };\n\n  return (\n    <div style={scaleStyle} className={className}>\n      <div\n        className={`group relative transition-all duration-200 ease-in cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 ${\n          !open ? 'hover:-translate-y-2' : ''\n        }`}\n        style={{\n          ...folderStyle,\n          transform: open ? 'translateY(-8px)' : undefined\n        }}\n        onClick={handleClick}\n        onKeyDown={e => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n\n            handleClick();\n          }\n        }}\n        tabIndex={0}\n        role=\"button\"\n        aria-expanded={open}\n        aria-label={open ? 'Close folder' : 'Open folder'}\n      >\n        <div\n          className=\"relative w-[100px] h-[80px] rounded-tl-0 rounded-tr-[10px] rounded-br-[10px] rounded-bl-[10px]\"\n          style={{ backgroundColor: folderBackColor }}\n        >\n          <span\n            className=\"absolute z-0 bottom-[98%] left-0 w-[30px] h-[10px] rounded-tl-[5px] rounded-tr-[5px] rounded-bl-0 rounded-br-0\"\n            style={{ backgroundColor: folderBackColor }}\n          ></span>\n          {papers.map((item, i) => {\n            let sizeClasses = '';\n            if (i === 0) sizeClasses = open ? 'w-[70%] h-[80%]' : 'w-[70%] h-[80%]';\n            if (i === 1) sizeClasses = open ? 'w-[80%] h-[80%]' : 'w-[80%] h-[70%]';\n            if (i === 2) sizeClasses = open ? 'w-[90%] h-[80%]' : 'w-[90%] h-[60%]';\n\n            const transformStyle = open\n              ? `${getOpenTransform(i)} translate(${paperOffsets[i].x}px, ${paperOffsets[i].y}px)`\n              : undefined;\n\n            return (\n              <div\n                key={i}\n                onMouseMove={e => handlePaperMouseMove(e, i)}\n                onMouseLeave={e => handlePaperMouseLeave(e, i)}\n                className={`absolute z-20 bottom-[10%] left-1/2 transition-all duration-300 ease-in-out ${\n                  !open ? 'transform -translate-x-1/2 translate-y-[10%] group-hover:translate-y-0' : 'hover:scale-110'\n                } ${sizeClasses}`}\n                style={{\n                  ...(!open ? {} : { transform: transformStyle }),\n                  backgroundColor: i === 0 ? paper1 : i === 1 ? paper2 : paper3,\n                  borderRadius: '10px'\n                }}\n              >\n                {item}\n              </div>\n            );\n          })}\n          <div\n            className={`absolute z-30 w-full h-full origin-bottom transition-all duration-300 ease-in-out ${\n              !open ? 'group-hover:[transform:skew(15deg)_scaleY(0.6)]' : ''\n            }`}\n            style={{\n              backgroundColor: color,\n              borderRadius: '5px 10px 10px 10px',\n              ...(open && { transform: 'skew(15deg) scaleY(0.6)' })\n            }}\n          ></div>\n          <div\n            className={`absolute z-30 w-full h-full origin-bottom transition-all duration-300 ease-in-out ${\n              !open ? 'group-hover:[transform:skew(-15deg)_scaleY(0.6)]' : ''\n            }`}\n            style={{\n              backgroundColor: color,\n              borderRadius: '5px 10px 10px 10px',\n              ...(open && { transform: 'skew(-15deg) scaleY(0.6)' })\n            }}\n          ></div>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default Folder;\n"
 		}
 	],
 	"registryDependencies": [],