Embed

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css">
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script>

<style>
  .s55-wrap {
    width: 100%;
    background: #000;           /* page section bg */
    padding: 28px 2vw 36px;
  }
  .s55-title {
    color:#fff; text-align:center; font-weight:800; letter-spacing:.02em;
    margin:0 0 18px; font-size:28px;
  }
  .s55-sub { color:#aaa; text-align:center; margin:0 auto 28px; max-width:900px; }

  /* Full-width grid, fixed 4 columns on desktop, collapses on small screens */
  .s55-grid {
    display:grid; gap:18px;
    grid-template-columns: repeat(4, 1fr);
  }
  @media (max-width: 1100px){
    .s55-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 780px){
    .s55-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 460px){
    .s55-grid { grid-template-columns: 1fr; }
  }

  /* Card */
  .s55-card {
    position:relative; overflow:hidden; border-radius:16px;
    background:#111; aspect-ratio: 1 / 1; /* squares; change to 4/5 or 16/9 if preferred */
    box-shadow: 0 8px 24px rgba(0,0,0,.45);
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .s55-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(0,0,0,.55);
  }

  /* The GIF itself */
  .s55-gif {
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  }

  /* Optional gloss-on-hover */
  .s55-card::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
    transform: translateX(-120%);
    transition: transform .5s ease;
  }
  .s55-card:hover::after{ transform: translateX(120%); }

  /* Tag (bottom-left) */
  .s55-tag {
    position:absolute; left:12px; bottom:12px; z-index:2;
    background:rgba(0,0,0,.6); color:#fff; font-size:12px; padding:6px 10px; border-radius:999px;
    backdrop-filter: blur(4px);
  }
</style>

<div class="s55-wrap">
  <h2 class="s55-title">Studio 55 · Digital Design</h2>
  <p class="s55-sub">Hover for motion. Click to zoom. 4×2 grid, full-width. Powered by lightweight GIFs and Fancybox.</p>

  <div class="s55-grid">
    
    
    <a class="s55-card" data-fancybox="s55" href="https://cdn.commoninja.com/asset/3331f612-3d5a-46c7-9f05-ee4be3000c58.gif" data-caption="Studio 55 · Motion Design 01">
      <img class="s55-gif" alt="Motion Design 01" src="https://cdn.commoninja.com/asset/3331f612-3d5a-46c7-9f05-ee4be3000c58.gif">
      <span class="s55-tag">Motion 01</span>
    </a>

    <a class="s55-card" data-fancybox="s55" href="https://cdn.commoninja.com/asset/d27e521f-2c9d-47db-a53a-2a46dae8aea1.gif" data-caption="Studio 55 · Motion Design 02">
      <img class="s55-gif" alt="Motion Design 02" src="https://cdn.commoninja.com/asset/d27e521f-2c9d-47db-a53a-2a46dae8aea1.gif">
      <span class="s55-tag">Motion 02</span>
    </a>

    <a class="s55-card" data-fancybox="s55" href="https://cdn.commoninja.com/asset/3331f612-3d5a-46c7-9f05-ee4be3000c58.gif" data-caption="Studio 55 · Motion Design 03">
      <img class="s55-gif" alt="Motion Design 03" src="https://cdn.commoninja.com/asset/3331f612-3d5a-46c7-9f05-ee4be3000c58.gif">
      <span class="s55-tag">Motion 03</span>
    </a>

    <a class="s55-card" data-fancybox="s55" href="https://cdn.commoninja.com/asset/d27e521f-2c9d-47db-a53a-2a46dae8aea1.gif" data-caption="Studio 55 · Motion Design 04">
      <img class="s55-gif" alt="Motion Design 04" src="https://cdn.commoninja.com/asset/d27e521f-2c9d-47db-a53a-2a46dae8aea1.gif">
      <span class="s55-tag">Motion 04</span>
    </a>

    
    <a class="s55-card" data-fancybox="s55" href="https://cdn.commoninja.com/asset/3331f612-3d5a-46c7-9f05-ee4be3000c58.gif" data-caption="Studio 55 · Motion Design 05">
      <img class="s55-gif" alt="Motion Design 05" src="https://cdn.commoninja.com/asset/3331f612-3d5a-46c7-9f05-ee4be3000c58.gif">
      <span class="s55-tag">Motion 05</span>
    </a>

    <a class="s55-card" data-fancybox="s55" href="https://cdn.commoninja.com/asset/d27e521f-2c9d-47db-a53a-2a46dae8aea1.gif" data-caption="Studio 55 · Motion Design 06">
      <img class="s55-gif" alt="Motion Design 06" src="https://cdn.commoninja.com/asset/d27e521f-2c9d-47db-a53a-2a46dae8aea1.gif">
      <span class="s55-tag">Motion 06</span>
    </a>

    <a class="s55-card" data-fancybox="s55" href="https://cdn.commoninja.com/asset/3331f612-3d5a-46c7-9f05-ee4be3000c58.gif" data-caption="Studio 55 · Motion Design 07">
      <img class="s55-gif" alt="Motion Design 07" src="https://cdn.commoninja.com/asset/3331f612-3d5a-46c7-9f05-ee4be3000c58.gif">
      <span class="s55-tag">Motion 07</span>
    </a>

    <a class="s55-card" data-fancybox="s55" href="https://cdn.commoninja.com/asset/d27e521f-2c9d-47db-a53a-2a46dae8aea1.gif" data-caption="Studio 55 · Motion Design 08">
      <img class="s55-gif" alt="Motion Design 08" src="https://cdn.commoninja.com/asset/d27e521f-2c9d-47db-a53a-2a46dae8aea1.gif">
      <span class="s55-tag">Motion 08</span>
    </a>
  </div>
</div>

Image grid

Design Your Music Platform

African american audio engineer uses compressor and mixer in professional studio

Video editing timeline showcasing audio and visual elements from a creative project

Shot of a Modern Music Record Studio Control Desk with Computer Screen show User Interface of DAW Software with Song Playing. Equalizer, Mixer and other Professional Equipment.

Audio workplace,recording studio,computer music studio.3d rendering

asian music producer arranging a song on midi keyboard and desktop computer in home studio. music production technology concept

Music producer is recording sound on Computer

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css">
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script>

<style>
  :root{
    --s55-bg:#000; --s55-card:#111; --s55-text:#fff; --s55-sub:#a9a9a9;
    --s55-accent:#27e0a5; --s55-chip:#1b1b1b; --s55-border:#222;
  }
  .s55-portfolio{background:var(--s55-bg); padding:36px 2vw 44px;}
  .s55-title{color:var(--s55-text); text-align:center; font-weight:800; font-size:30px; margin:0 0 8px;}
  .s55-sub{color:var(--s55-sub); text-align:center; margin:0 auto 26px; max-width:920px;}

  /* Controls */
  .s55-controls{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center; margin:0 auto 20px; max-width:1100px}
  .s55-filter{
    background:var(--s55-chip); color:#ddd; border:1px solid var(--s55-border);
    padding:9px 14px; border-radius:999px; font-size:13px; cursor:pointer;
    transition:background .2s ease, color .2s ease, border-color .2s ease, transform .1s;
  }
  .s55-filter:hover{transform:translateY(-1px)}
  .s55-filter.active{background:var(--s55-accent); color:#001a12; border-color:transparent; font-weight:700}

  .s55-search{
    margin-left:auto; margin-right:auto; display:flex; align-items:center; gap:8px;
    background:#0f0f0f; border:1px solid var(--s55-border); border-radius:12px; padding:8px 12px;
    width:min(520px, 96%); color:#ddd;
  }
  .s55-search input{
    background:transparent; border:none; outline:none; color:#eee; font-size:14px; width:100%;
  }

  /* Grid */
  .s55-grid{display:grid; gap:18px; grid-template-columns:repeat(4, 1fr)}
  @media (max-width:1100px){ .s55-grid{grid-template-columns:repeat(3, 1fr)} }
  @media (max-width:780px){ .s55-grid{grid-template-columns:repeat(2, 1fr)} }
  @media (max-width:460px){ .s55-grid{grid-template-columns:1fr} }

  /* Aspect ratio helpers: switch one class to change shape globally */
  .s55-card{position:relative; overflow:hidden; border-radius:16px; background:var(--s55-card);
    box-shadow:0 8px 24px rgba(0,0,0,.45); transition:transform .16s, box-shadow .16s}
  .s55-card.square{aspect-ratio:1/1}
  .s55-card.poster{aspect-ratio:4/5}
  .s55-card.wide{aspect-ratio:16/9}

  .s55-card:hover{transform:translateY(-3px); box-shadow:0 14px 36px rgba(0,0,0,.55)}
  .s55-media{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
  .s55-card::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(120deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
    transform:translateX(-120%); transition:transform .5s ease;
  }
  .s55-card:hover::after{transform:translateX(120%)}

  /* Overlay actions */
  .s55-overlay{
    position:absolute; inset:auto 10px 10px 10px; display:flex; gap:8px; z-index:2; justify-content:flex-end
  }
  .s55-btn{
    background:rgba(0,0,0,.6); color:#fff; border:1px solid rgba(255,255,255,.15);
    padding:6px 10px; font-size:12px; border-radius:10px; backdrop-filter:blur(4px);
    text-decoration:none; transition:transform .12s ease, background .2s ease
  }
  .s55-btn:hover{transform:translateY(-1px); background:rgba(0,0,0,.75)}

  /* Label/Tag bottom-left */
  .s55-tag{
    position:absolute; left:12px; bottom:12px; z-index:2; background:rgba(0,0,0,.6);
    color:#fff; font-size:12px; padding:6px 10px; border-radius:999px; backdrop-filter:blur(4px);
  }

  /* Hidden case-study content styling (displayed inside Fancybox) */
  .s55-case{
    max-width:min(920px, 92vw); color:#eaeaea; background:#0c0c0c; border-radius:16px; overflow:hidden;
    border:1px solid #1e1e1e;
  }
  .s55-case header{padding:18px 18px 6px}
  .s55-case h3{margin:0 0 6px; font-size:20px}
  .s55-case .meta{color:#9e9e9e; font-size:13px}
  .s55-case .body{padding:0 18px 18px; line-height:1.55}
  .s55-case .media{display:grid; grid-template-columns:1fr; gap:10px; padding:0 18px 18px}
  .s55-case .chip{display:inline-block; background:#141414; border:1px solid #232323; color:#cfcfcf;
    font-size:12px; padding:5px 9px; border-radius:999px; margin-right:6px; margin-bottom:6px}

  /* Results count */
  .s55-count{color:#888; text-align:center; margin:12px 0 0; font-size:13px}
</style>

<div class="s55-portfolio" id="s55-portfolio">
  <h2 class="s55-title">Studio 55 · Digital Design Portfolio</h2>
  <p class="s55-sub">Browse our motion branding, social content, album artwork, and campaign visuals. Use filters or search to find what you need.</p>

  
  <div class="s55-controls">
    <button class="s55-filter active" data-filter="all">All</button>
    <button class="s55-filter" data-filter="social">Social Ads</button>
    <button class="s55-filter" data-filter="album">Album Covers</button>
    <button class="s55-filter" data-filter="motion">Motion Flyers</button>
    <button class="s55-filter" data-filter="branding">Branding</button>

    <div class="s55-search">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M21 21l-4.35-4.35M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z" stroke="#8a8a8a" stroke-width="2" stroke-linecap="round"/></svg>
      <input id="s55-search-input" type="text" placeholder="Search titles, tags…">
    </div>
  </div>

  
  <div class="s55-grid" id="s55-grid">

    
    <figure class="s55-card square" data-cat="social motion" data-title="Streetwear Launch Animated Post" data-tags="streetwear, launch, animated, post, social">
      <a data-fancybox="zoom" href="https://cdn.commoninja.com/asset/3331f612-3d5a-46c7-9f05-ee4be3000c58.gif" data-caption="Streetwear Launch · Animated Post">
        <img class="s55-media" alt="Streetwear Launch" src="https://cdn.commoninja.com/asset/3331f612-3d5a-46c7-9f05-ee4be3000c58.gif">
      </a>
      <div class="s55-overlay">
        <a class="s55-btn" data-fancybox data-src="#case-1" href="javascript:;">Details</a>
      </div>
      <span class="s55-tag">Animated Post</span>
    </figure>

    
    <figure class="s55-card square" data-cat="album branding" data-title="New Album Motion Cover" data-tags="album, cover, motion, music">
      <a data-fancybox="zoom" href="https://cdn.commoninja.com/asset/d27e521f-2c9d-47db-a53a-2a46dae8aea1.gif" data-caption="New Album · Motion Cover">
        <img class="s55-media" alt="Album Motion Cover" src="https://cdn.commoninja.com/asset/d27e521f-2c9d-47db-a53a-2a46dae8aea1.gif">
      </a>
      <div class="s55-overlay">
        <a class="s55-btn" data-fancybox data-src="#case-2" href="javascript:;">Details</a>
      </div>
      <span class="s55-tag">Album Cover</span>
    </figure>

    
    <figure class="s55-card square" data-cat="social motion" data-title="Fashion Drop Carousel" data-tags="fashion, carousel, ad">
      <a data-fancybox="zoom" href="https://cdn.commoninja.com/asset/3331f612-3d5a-46c7-9f05-ee4be3000c58.gif" data-caption="Fashion Drop · Carousel Ad">
        <img class="s55-media" alt="Fashion Drop" src="https://cdn.commoninja.com/asset/3331f612-3d5a-46c7-9f05-ee4be3000c58.gif">
      </a>
      <div class="s55-overlay">
        <a class="s55-btn" data-fancybox data-src="#case-3" href="javascript:;">Details</a>
      </div>
      <span class="s55-tag">Carousel Ad</span>
    </figure>

    
    <figure class="s55-card square" data-cat="motion social" data-title="Reel: Behind Glass" data-tags="reel, cinemagraph, glass">
      <a data-fancybox="zoom" href="https://cdn.commoninja.com/asset/d27e521f-2c9d-47db-a53a-2a46dae8aea1.gif" data-caption="Behind Glass · Cinemagraph">
        <img class="s55-media" alt="Behind Glass" src="https://cdn.commoninja.com/asset/d27e521f-2c9d-47db-a53a-2a46dae8aea1.gif">
      </a>
      <div class="s55-overlay">
        <a class="s55-btn" data-fancybox data-src="#case-4" href="javascript:;">Details</a>
      </div>
      <span class="s55-tag">Cinemagraph</span>
    </figure>

    
    <figure class="s55-card square" data-cat="branding" data-title="Type Loop Bold" data-tags="type, kinetic, bold">
      <a data-fancybox="zoom" href="https://cdn.commoninja.com/asset/3331f612-3d5a-46c7-9f05-ee4be3000c58.gif" data-caption="Type Loop · Bold Headlines">
        <img class="s55-media" alt="Type Loop" src="https://cdn.commoninja.com/asset/3331f612-3d5a-46c7-9f05-ee4be3000c58.gif">
      </a>
      <div class="s55-overlay">
        <a class="s55-btn" data-fancybox data-src="#case-5" href="javascript:;">Details</a>
      </div>
      <span class="s55-tag">Branding</span>
    </figure>

    
    <figure class="s55-card square" data-cat="album branding" data-title="Album Teaser Graphic" data-tags="album, teaser, graphic">
      <a data-fancybox="zoom" href="https://cdn.commoninja.com/asset/d27e521f-2c9d-47db-a53a-2a46dae8aea1.gif" data-caption="Album Teaser · Graphic Motion">
        <img class="s55-media" alt="Album Teaser" src="https://cdn.commoninja.com/asset/d27e521f-2c9d-47db-a53a-2a46dae8aea1.gif">
      </a>
      <div class="s55-overlay">
        <a class="s55-btn" data-fancybox data-src="#case-6" href="javascript:;">Details</a>
      </div>
      <span class="s55-tag">Album Teaser</span>
    </figure>

    
    <figure class="s55-card square" data-cat="social motion" data-title="Summer Promo" data-tags="summer, promo, social">
      <a data-fancybox="zoom" href="https://cdn.commoninja.com/asset/3331f612-3d5a-46c7-9f05-ee4be3000c58.gif" data-caption="Summer Promo · Social Cut">
        <img class="s55-media" alt="Summer Promo" src="https://cdn.commoninja.com/asset/3331f612-3d5a-46c7-9f05-ee4be3000c58.gif">
      </a>
      <div class="s55-overlay">
        <a class="s55-btn" data-fancybox data-src="#case-7" href="javascript:;">Details</a>
      </div>
      <span class="s55-tag">Social Cut</span>
    </figure>

    
    <figure class="s55-card square" data-cat="motion branding" data-title="Release Flyer Motion" data-tags="release, flyer, motion">
      <a data-fancybox="zoom" href="https://cdn.commoninja.com/asset/d27e521f-2c9d-47db-a53a-2a46dae8aea1.gif" data-caption="Release Flyer · Motion">
        <img class="s55-media" alt="Release Flyer Motion" src="https://cdn.commoninja.com/asset/d27e521f-2c9d-47db-a53a-2a46dae8aea1.gif">
      </a>
      <div class="s55-overlay">
        <a class="s55-btn" data-fancybox data-src="#case-8" href="javascript:;">Details</a>
      </div>
      <span class="s55-tag">Motion Flyer</span>
    </figure>

  </div>

  <div class="s55-count" id="s55-count">8 results</div>
</div>


<div style="display:none">
  <div id="case-1" class="s55-case">
    <header>
      <h3>Streetwear Launch · Animated Post</h3>
      <div class="meta">Category: Social Ads · Motion | Role: Art Direction, Motion Design</div>
    </header>
    <div class="body">
      Short animated post for a streetwear drop. Emphasis on bold type, rhythm cuts, and product close-ups optimized for IG Reels & TikTok.
      <div style="margin-top:10px">
        <span class="chip">After Effects</span><span class="chip">Premiere</span><span class="chip">Figma</span>
      </div>
    </div>
    <div class="media">
      <img src="https://cdn.commoninja.com/asset/3331f612-3d5a-46c7-9f05-ee4be3000c58.gif" alt="Streetwear Launch">
    </div>
  </div>

  <div id="case-2" class="s55-case">
    <header><h3>New Album · Motion Cover</h3><div class="meta">Category: Album Covers | Role: Creative Direction</div></header>
    <div class="body">Looping motion cover artwork designed for Spotify Canvas, YouTube Music, and Instagram posts.</div>
    <div class="media"><img src="https://cdn.commoninja.com/asset/d27e521f-2c9d-47db-a53a-2a46dae8aea1.gif" alt="Album Cover"></div>
  </div>

  <div id="case-3" class="s55-case"><header><h3>Fashion Drop · Carousel Ad</h3><div class="meta">Category: Social Ads</div></header><div class="body">Kinetic type + product focus across 3–5 frames.</div><div class="media"><img src="https://cdn.commoninja.com/asset/3331f612-3d5a-46c7-9f05-ee4be3000c58.gif"></div></div>
  <div id="case-4" class="s55-case"><header><h3>Behind Glass · Cinemagraph</h3><div class="meta">Category: Motion Flyers</div></header><div class="body">Subtle loop for storefront takeover.</div><div class="media"><img src="https://cdn.commoninja.com/asset/d27e521f-2c9d-47db-a53a-2a46dae8aea1.gif"></div></div>
  <div id="case-5" class="s55-case"><header><h3>Type Loop · Bold Headlines</h3><div class="meta">Category: Branding</div></header><div class="body">Kinetic identity element for campaign toolkit.</div><div class="media"><img src="https://cdn.commoninja.com/asset/3331f612-3d5a-46c7-9f05-ee4be3000c58.gif"></div></div>
  <div id="case-6" class="s55-case"><header><h3>Album Teaser · Graphic Motion</h3><div class="meta">Category: Album Covers, Branding</div></header><div class="body">Animated key art for pre-save push.</div><div class="media"><img src="https://cdn.commoninja.com/asset/d27e521f-2c9d-47db-a53a-2a46dae8aea1.gif"></div></div>
  <div id="case-7" class="s55-case"><header><h3>Summer Promo · Social Cut</h3><div class="meta">Category: Social Ads</div></header><div class="body">Bright, upbeat loop for seasonal offer.</div><div class="media"><img src="https://cdn.commoninja.com/asset/3331f612-3d5a-46c7-9f05-ee4be3000c58.gif"></div></div>
  <div id="case-8" class="s55-case"><header><h3>Release Flyer · Motion</h3><div class="meta">Category: Motion Flyers</div></header><div class="body">High-contrast type focus for event reveal.</div><div class="media"><img src="https://cdn.commoninja.com/asset/d27e521f-2c9d-47db-a53a-2a46dae8aea1.gif"></div></div>
</div>

<script>
  (function(){
    const grid = document.getElementById('s55-grid');
    const cards = Array.from(grid.querySelectorAll('.s55-card'));
    const filters = Array.from(document.querySelectorAll('.s55-filter'));
    const search = document.getElementById('s55-search-input');
    const count = document.getElementById('s55-count');

    let active = 'all';
    let term = '';

    function normalize(s){ return (s||'').toLowerCase().trim(); }

    function apply(){
      const q = normalize(term);
      let visible = 0;

      cards.forEach(card=>{
        const cats = (card.dataset.cat||'').toLowerCase();
        const title = (card.dataset.title||'').toLowerCase();
        const tags = (card.dataset.tags||'').toLowerCase();

        const catOk = (active === 'all') || cats.includes(active);
        const textOk = !q || title.includes(q) || tags.includes(q) || cats.includes(q);

        const show = catOk && textOk;
        card.style.display = show ? '' : 'none';
        if(show) visible++;
      });

      count.textContent = visible + ' result' + (visible===1?'':'s');
    }

    filters.forEach(btn=>{
      btn.addEventListener('click', ()=>{
        filters.forEach(b=>b.classList.remove('active'));
        btn.classList.add('active');
        active = btn.dataset.filter || 'all';
        apply();
      });
    });

    search.addEventListener('input', (e)=>{
      term = e.target.value;
      apply();
    });

    apply();
  })();
</script>