Frame Reveal

<!-- Frame Reveal -->
<figure class="nuda-frame">
  <img class="nuda-frame__img" src="/your-image.jpg" alt="" />
  <span class="nuda-frame__c nuda-frame__c--tl"></span>
  <span class="nuda-frame__c nuda-frame__c--tr"></span>
  <span class="nuda-frame__c nuda-frame__c--bl"></span>
  <span class="nuda-frame__c nuda-frame__c--br"></span>
</figure>

/* Frame Reveal
   Four corner brackets pop in, then the image fades up inside them.
   Great for portfolio tiles, gallery hero, etc.
   Customize: --frame-color, --frame-corner */

.nuda-frame {
  --frame-color: #e4ff54;
  --frame-corner: 16px;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  margin: 0;
  padding: 10px;
}

.nuda-frame__img {
  position: absolute;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  object-fit: cover;
  border-radius: 8px;
  opacity: 0;
  transform: scale(0.96);
  animation: nuda-frame-fade 1s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards;
}

.nuda-frame__c {
  position: absolute;
  width: var(--frame-corner);
  height: var(--frame-corner);
  border: 2px solid var(--frame-color);
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(228, 255, 84, 0.5));
  animation: nuda-frame-corner 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.nuda-frame__c--tl { top: 0;    left: 0;    border-right:  none; border-bottom: none; animation-delay: 0s; }
.nuda-frame__c--tr { top: 0;    right: 0;   border-left:   none; border-bottom: none; animation-delay: 0.1s; }
.nuda-frame__c--bl { bottom: 0; left: 0;    border-right:  none; border-top:    none; animation-delay: 0.2s; }
.nuda-frame__c--br { bottom: 0; right: 0;   border-left:   none; border-top:    none; animation-delay: 0.3s; }

@keyframes nuda-frame-corner {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes nuda-frame-fade {
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-frame__img,
  .nuda-frame__c { opacity: 1; transform: none; animation: none; }
}