D
Digmarket. Preview
Navigation
Log in Sign up
Home › Free

Studio Disk Allocator – Neon Lemon Matte

<div class="fp-creative-agency-disk-memory-allocation-ui">
  <div class="fp-creative-agency-disk-memory-allocation-ui-stage">
    <div class="fp-creative-agency-disk-memory-allocation-ui-ambient"></div>
    <div class="fp-creative-agency-disk-memory-allocation-ui-orbit"></div>
    
    <div class="fp-creative-agency-disk-memory-allocation-ui-card">
      <div class="fp-creative-agency-disk-memory-allocation-ui-header">
        <div class="fp-creative-agency-disk-memory-allocation-ui-title">Studio Vault</div>
        <div class="fp-creative-agency-disk-memory-allocation-ui-badge">Syncing</div>
      </div>
      
      <div class="fp-creative-agency-disk-memory-allocation-ui-visual">
        <div class="fp-creative-agency-disk-memory-allocation-ui-canvas-wrap">
          <canvas class="fp-creative-agency-disk-memory-allocation-ui-canvas"></canvas>
        </div>
        
        <div class="fp-creative-agency-disk-memory-allocation-ui-center-data">
          <div class="fp-creative-agency-disk-memory-allocation-ui-percentage">84.2<span style="font-size: 1.5rem; color: var(--fp-muted-color)">%</span></div>
          <div class="fp-creative-agency-disk-memory-allocation-ui-percentage-sub">Allocated</div>
        </div>
      </div>

      <div class="fp-creative-agency-disk-memory-allocation-ui-footer">
        <div class="fp-creative-agency-disk-memory-allocation-ui-stat">
          <span class="fp-creative-agency-disk-memory-allocation-ui-stat-label">Used Space</span>
          <span class="fp-creative-agency-disk-memory-allocation-ui-stat-val fp-creative-agency-disk-memory-allocation-ui-val-used">8.42 TB</span>
        </div>
        <div class="fp-creative-agency-disk-memory-allocation-ui-stat" style="text-align: right;">
          <span class="fp-creative-agency-disk-memory-allocation-ui-stat-label">Total Capacity</span>
          <span class="fp-creative-agency-disk-memory-allocation-ui-stat-val">10.00 TB</span>
        </div>
      </div>
    </div>
  </div>
</div>
.fp-creative-agency-disk-memory-allocation-ui {
  --fp-container-width: 100%;
  --fp-max-width: 500px;
  --fp-aspect-ratio: 1 / 1;

  --fp-primary-color: #f2f2f3;
  --fp-secondary-color: #e5e5e7;
  --fp-soft-color: #ffffff;
  --fp-muted-color: #88888b;
  --fp-background-color: transparent;

  --fp-info-color: #111111;
  --fp-warning-color: #e6ff00;
  --fp-danger-color: #99cc00;
  --fp-accent-color: #ccff00;

  all: unset;
  display: block;
  width: var(--fp-container-width);
  max-width: var(--fp-max-width);
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  box-sizing: border-box;
  color: var(--fp-info-color);
}

.fp-creative-agency-disk-memory-allocation-ui * {
  box-sizing: border-box;
}

.fp-creative-agency-disk-memory-allocation-ui-stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--fp-aspect-ratio);
  background: var(--fp-primary-color);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--fp-secondary-color);
}

.fp-creative-agency-disk-memory-allocation-ui-ambient {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 50% 50%, rgba(204, 255, 0, 0.05) 0%, transparent 60%);
  animation: fp-creative-agency-disk-memory-allocation-ui-breathe 5s ease-in-out infinite alternate;
  pointer-events: none;
}

.fp-creative-agency-disk-memory-allocation-ui-orbit {
  position: absolute;
  width: 120%;
  height: 120%;
  border-radius: 50%;
  border: 1px dashed var(--fp-secondary-color);
  animation: fp-creative-agency-disk-memory-allocation-ui-spin 30s linear infinite;
  pointer-events: none;
}

.fp-creative-agency-disk-memory-allocation-ui-orbit::after {
  content: '';
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  border-radius: 50%;
  border: 1px dashed rgba(17, 17, 17, 0.05);
  animation: fp-creative-agency-disk-memory-allocation-ui-spin 20s linear infinite reverse;
}

.fp-creative-agency-disk-memory-allocation-ui-card {
  position: relative;
  z-index: 10;
  width: 80%;
  height: 80%;
  background: var(--fp-soft-color);
  border-radius: 20px;
  box-shadow: 0 24px 48px rgba(17, 17, 17, 0.04), 0 0 0 1px rgba(17, 17, 17, 0.02);
  display: flex;
  flex-direction: column;
  padding: 24px;
}

.fp-creative-agency-disk-memory-allocation-ui-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.fp-creative-agency-disk-memory-allocation-ui-title {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fp-info-color);
  text-transform: uppercase;
}

.fp-creative-agency-disk-memory-allocation-ui-badge {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fp-info-color);
  background: var(--fp-accent-color);
  padding: 4px 10px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(204, 255, 0, 0.4);
}

.fp-creative-agency-disk-memory-allocation-ui-visual {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fp-creative-agency-disk-memory-allocation-ui-canvas-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fp-creative-agency-disk-memory-allocation-ui-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.fp-creative-agency-disk-memory-allocation-ui-center-data {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

.fp-creative-agency-disk-memory-allocation-ui-percentage {
  font-size: 3.5rem;
  font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--fp-info-color);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.fp-creative-agency-disk-memory-allocation-ui-percentage-sub {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--fp-muted-color);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fp-creative-agency-disk-memory-allocation-ui-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed var(--fp-secondary-color);
}

.fp-creative-agency-disk-memory-allocation-ui-stat {
  display: flex;
  flex-direction: column;
}

.fp-creative-agency-disk-memory-allocation-ui-stat-label {
  font-size: 0.7rem;
  color: var(--fp-muted-color);
  margin-bottom: 4px;
}

.fp-creative-agency-disk-memory-allocation-ui-stat-val {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fp-info-color);
  font-variant-numeric: tabular-nums;
}

@keyframes fp-creative-agency-disk-memory-allocation-ui-breathe {
  0% { transform: scale(1); opacity: 0.3; }
  100% { transform: scale(1.05); opacity: 0.8; }
}

@keyframes fp-creative-agency-disk-memory-allocation-ui-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 400px) {
  .fp-creative-agency-disk-memory-allocation-ui-card {
    width: 90%;
    height: 90%;
    padding: 16px;
  }
  .fp-creative-agency-disk-memory-allocation-ui-percentage {
    font-size: 2.8rem;
  }
}
document.querySelectorAll('.fp-creative-agency-disk-memory-allocation-ui').forEach(root => {
  const canvas = root.querySelector('.fp-creative-agency-disk-memory-allocation-ui-canvas');
  const percentageText = root.querySelector('.fp-creative-agency-disk-memory-allocation-ui-percentage');
  const usedText = root.querySelector('.fp-creative-agency-disk-memory-allocation-ui-val-used');
  
  if (!canvas || !percentageText || !usedText) return;

  const ctx = canvas.getContext('2d');
  let animationFrameId;
  let isVisible = true;
  
  let time = 0;
  let currentProgress = 0;
  let targetProgress = 0.842;
  
  const colors = {
    matteBlack: '#111111',
    neonLemon: '#ccff00',
    trackGray: '#e5e5e7'
  };

  const resizeCanvas = () => {
    const rect = canvas.parentElement.getBoundingClientRect();
    canvas.width = rect.width * window.devicePixelRatio;
    canvas.height = rect.height * window.devicePixelRatio;
    ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
  };

  const animate = () => {
    if (!isVisible) return;
    
    time += 0.05;
    currentProgress += (targetProgress - currentProgress) * 0.08;

    const width = canvas.width / window.devicePixelRatio;
    const height = canvas.height / window.devicePixelRatio;
    const cx = width / 2;
    const cy = height / 2;
    const radius = Math.min(width, height) / 2 - 16;

    ctx.clearRect(0, 0, width, height);

    ctx.beginPath();
    ctx.arc(cx, cy, radius, 0, Math.PI * 2);
    ctx.strokeStyle = colors.matteBlack;
    ctx.lineWidth = 14;
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(cx, cy, radius - 16, 0, Math.PI * 2);
    ctx.strokeStyle = colors.trackGray;
    ctx.lineWidth = 1;
    ctx.stroke();

    const startAngle = -Math.PI / 2;
    const endAngle = startAngle + (currentProgress * Math.PI * 2);
    const glowIntensity = 10 + Math.sin(time * 3) * 6;

    ctx.beginPath();
    ctx.arc(cx, cy, radius, startAngle, endAngle);
    ctx.strokeStyle = colors.neonLemon;
    ctx.lineWidth = 14;
    ctx.lineCap = 'round';
    ctx.shadowBlur = glowIntensity;
    ctx.shadowColor = colors.neonLemon;
    ctx.stroke();
    ctx.shadowBlur = 0;

    const dotX = cx + Math.cos(endAngle) * radius;
    const dotY = cy + Math.sin(endAngle) * radius;

    ctx.beginPath();
    ctx.arc(dotX, dotY, 4, 0, Math.PI * 2);
    ctx.fillStyle = colors.matteBlack;
    ctx.fill();

    if (Math.random() < 0.03) {
        targetProgress += (Math.random() * 0.005);
        if (targetProgress > 0.99) targetProgress = 0.842; 
        
        const displayVal = (targetProgress * 100).toFixed(1);
        percentageText.innerHTML = `${displayVal}<span style="font-size: 1.5rem; color: var(--fp-muted-color)">%</span>`;
        usedText.innerText = `${(targetProgress * 10).toFixed(2)} TB`;
    }

    animationFrameId = requestAnimationFrame(animate);
  };

  const handleVisibilityChange = () => {
    isVisible = document.visibilityState === 'visible';
    if (isVisible) {
      animate();
    } else {
      cancelAnimationFrame(animationFrameId);
    }
  };

  const observer = new MutationObserver(() => {
    if (!document.body.contains(root)) {
      cancelAnimationFrame(animationFrameId);
      window.removeEventListener('resize', resizeCanvas);
      document.removeEventListener('visibilitychange', handleVisibilityChange);
      observer.disconnect();
    }
  });

  window.addEventListener('resize', resizeCanvas);
  document.addEventListener('visibilitychange', handleVisibilityChange);
  observer.observe(document.body, { childList: true, subtree: true });

  resizeCanvas();
  animate();
});
Created by Digital Market Created: Apr 29, 2026 • Updated: Apr 29, 2026

Description

Let us look at the Studio Disk Allocator Neon Lemon Matte component. This free UI asset offers a modular card system specifically engineered for the high volume creative agency and digital studio sector. We built this entirely from scratch to handle heavy media storage metrics and project server allocations without the usual framework bloat. You get a sterile DOM structure that integrates cleanly into your existing agency dashboard or asset management architecture.

Creative agencies process massive amounts of high resolution video and design assets daily. This workflow requires absolute reliability during active project cycles. Heavy client side payloads completely ruin the user experience when art directors expect immediate visual feedback on server capacities. This component solves that bottleneck directly. By strictly avoiding external libraries like Tailwind, Bootstrap, or GSAP, it keeps your bundle size minimal. This ensures rapid rendering for developers who need to present active storage states to users on varied studio network speeds.

Technical Architecture & Performance

  • Zero dependency codebase: Built strictly with pure HTML, CSS, and Vanilla JavaScript to keep your front end stack incredibly light.

  • Guaranteed performance metrics: Optimized to help your agency software maintain 90 plus PageSpeed scores and pass Core Web Vitals easily.

  • Safely scoped CSS: All styling is strictly scoped to prevent any class name collisions when you drop these cards into a massive monolithic repository.

  • Sterile DOM markup: Features clean HTML with absolutely no unnecessary wrappers or deep nesting trees to parse.

Design & Aesthetic Impact

The visual direction utilizes vibrant Neon Lemon tones combined with a flat matte layout to establish a highly modern and energetic environment for the end user. This GenZ inspired aesthetic ensures visual clarity for producers analyzing complex server storage and dense project logs. For the interaction layer, we implemented a custom circular progress ring draw animation. This rhythmic visual transition provides clear feedback for active disk writing and capacity filling states without requiring heavy javascript animation scripts. The final result is a clean user interface that looks premium and functions perfectly for strict enterprise creative platforms.

Enterprise Use Cases

  • Creative server dashboards: Display active disk capacities and media storage limits using the card grid so studio managers can monitor project server health quickly.

  • Agency asset management portals: Build a fast rendering analytics page where art directors can organize and review massive datasets of video file allocations within a lightweight interface.

  • Cloud rendering control panels: Create a responsive control layout for post production teams to track active rendering node capacities and temporary storage quotas across multiple workstations.

Technical Details

  • ElementCards
  • IndustryCreative Agency, Studio
  • StyleMatte Black & Neon
  • AnimationProgress Ring Draw (Circle)
Report Issue

Highlights & Benefits

Copy-Paste Ready

Drop the code straight into your project without configuration.

Zero Dependencies

Built strictly with pure CSS & Vanilla JS for maximum speed.

ADA & WCAG Ready

Constructed with strict adherence to WCAG accessibility standards for perfect contrast and screen-reader support.

Sterile DOM Structure

Utilizes a highly optimized, clean DOM architecture ensuring lightning-fast render and maximum PageSpeed scores.

You need an active subscription or purchase to leave a review for this premium component.
Awaiting product image

Studio Disk Allocator – Neon Lemon Matte

Category:

Description

Let us look at the Studio Disk Allocator Neon Lemon Matte component. This free UI asset offers a modular card system specifically engineered for the high volume creative agency and digital studio sector. We built this entirely from scratch to handle heavy media storage metrics and project server allocations without the usual framework bloat. You get a sterile DOM structure that integrates cleanly into your existing agency dashboard or asset management architecture.

Creative agencies process massive amounts of high resolution video and design assets daily. This workflow requires absolute reliability during active project cycles. Heavy client side payloads completely ruin the user experience when art directors expect immediate visual feedback on server capacities. This component solves that bottleneck directly. By strictly avoiding external libraries like Tailwind, Bootstrap, or GSAP, it keeps your bundle size minimal. This ensures rapid rendering for developers who need to present active storage states to users on varied studio network speeds.

Technical Architecture & Performance

  • Zero dependency codebase: Built strictly with pure HTML, CSS, and Vanilla JavaScript to keep your front end stack incredibly light.

  • Guaranteed performance metrics: Optimized to help your agency software maintain 90 plus PageSpeed scores and pass Core Web Vitals easily.

  • Safely scoped CSS: All styling is strictly scoped to prevent any class name collisions when you drop these cards into a massive monolithic repository.

  • Sterile DOM markup: Features clean HTML with absolutely no unnecessary wrappers or deep nesting trees to parse.

Design & Aesthetic Impact

The visual direction utilizes vibrant Neon Lemon tones combined with a flat matte layout to establish a highly modern and energetic environment for the end user. This GenZ inspired aesthetic ensures visual clarity for producers analyzing complex server storage and dense project logs. For the interaction layer, we implemented a custom circular progress ring draw animation. This rhythmic visual transition provides clear feedback for active disk writing and capacity filling states without requiring heavy javascript animation scripts. The final result is a clean user interface that looks premium and functions perfectly for strict enterprise creative platforms.

Enterprise Use Cases

  • Creative server dashboards: Display active disk capacities and media storage limits using the card grid so studio managers can monitor project server health quickly.

  • Agency asset management portals: Build a fast rendering analytics page where art directors can organize and review massive datasets of video file allocations within a lightweight interface.

  • Cloud rendering control panels: Create a responsive control layout for post production teams to track active rendering node capacities and temporary storage quotas across multiple workstations.

Related products