Image wipe reveal

<div class="frame"><div class="img"></div></div>

.frame{width:min(380px,88vw);aspect-ratio:4/3;overflow:hidden;border-radius:14px;
  animation:wipe 1.3s cubic-bezier(.77,0,.18,1) both}
.frame .img{width:100%;height:100%;
  background:radial-gradient(circle at 25% 30%,#ffd166 0 12%,transparent 13%),
             linear-gradient(160deg,#e5603a,#8a3a22 60%,#3a0804);
  animation:zoom 1.6s cubic-bezier(.2,.8,.2,1) both}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes zoom{from{transform:scale(1.35)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.frame,.frame .img{animation:none}}

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Image wipe reveal</title>
<style>
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{display:grid;place-items:center;background:#140807;color:#fffffc;font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
.frame{width:min(380px,88vw);aspect-ratio:4/3;overflow:hidden;border-radius:14px;
  animation:wipe 1.3s cubic-bezier(.77,0,.18,1) both}
.frame .img{width:100%;height:100%;
  background:radial-gradient(circle at 25% 30%,#ffd166 0 12%,transparent 13%),
             linear-gradient(160deg,#e5603a,#8a3a22 60%,#3a0804);
  animation:zoom 1.6s cubic-bezier(.2,.8,.2,1) both}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes zoom{from{transform:scale(1.35)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.frame,.frame .img{animation:none}}
</style></head>
<body><div class="frame"><div class="img"></div></div></body></html>