Bereal Profile Viewer __exclusive__ Jun 2026
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>BeReal Profile Viewer</title> <script src="https://cdn.tailwindcss.com"></script> <link rel="preconnect" href="https://fonts.googleapis.com"> <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"> <style> :root { --bg: #0a0a0a; --surface: #141414; --card: #1a1a1a; --border: #2a2a2a; --fg: #f5f5f0; --muted: #777; --accent: #e8e0d4; --accent2: #c4a882; --toast-bg: #222; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Outfit', sans-serif; background: var(--bg); color: var(--fg); min-height: 100vh; overflow-x: hidden; }
/* Subtle background texture */ body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(196,168,130,0.06) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 80% 100%, rgba(196,168,130,0.03) 0%, transparent 50%); pointer-events: none; z-index: 0; } bereal profile viewer
.phone-frame { width: 390px; max-width: 100vw; min-height: 100vh; margin: 0 auto; position: relative; z-index: 1; background: var(--surface); border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
@media (min-width: 768px) { body { display: flex; align-items: center; justify-content: center; padding: 20px; } .phone-frame { min-height: 844px; max-height: 90vh; border-radius: 40px; border: 1px solid var(--border); box-shadow: 0 0 0 4px #0a0a0a, 0 40px 80px rgba(0,0,0,0.6), 0 0 120px rgba(196,168,130,0.04); overflow: hidden; } }
.scroll-area { overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; } .scroll-area::-webkit-scrollbar { display: none; } &lt;
/* Story ring */ .story-ring { background: conic-gradient(var(--accent2), #e8e0d4, var(--accent2)); padding: 2.5px; border-radius: 50%; transition: transform 0.3s ease, opacity 0.3s ease; } .story-ring.viewed { background: var(--border); opacity: 0.6; } .story-ring:hover { transform: scale(1.05); } .story-ring-inner { background: var(--surface); padding: 2px; border-radius: 50%; }
/* Bereal photo style */ .bereal-post { position: relative; border-radius: 16px; overflow: hidden; cursor: pointer; transition: transform 0.3s ease; } .bereal-post:hover { transform: scale(1.01); } .bereal-post img { width: 100%; height: 100%; object-fit: cover; display: block; } .bereal-small { position: absolute; top: 12px; left: 12px; width: 80px; height: 80px; border-radius: 10px; overflow: hidden; border: 2px solid rgba(0,0,0,0.5); box-shadow: 0 4px 12px rgba(0,0,0,0.4); z-index: 2; } .bereal-small img { width: 100%; height: 100%; object-fit: cover; } .bereal-time { position: absolute; bottom: 12px; left: 12px; background: rgba(0,0,0,0.6); backdrop-filter: blur(10px); padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; z-index: 2; display: flex; align-items: center; gap: 4px; } .bereal-reactions { position: absolute; bottom: 12px; right: 12px; background: rgba(0,0,0,0.6); backdrop-filter: blur(10px); padding: 4px 10px; border-radius: 20px; font-size: 12px; z-index: 2; display: flex; align-items: center; gap: 4px; }
/* Modal overlay */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 100; display: none; align-items: center; justify-content: center; backdrop-filter: blur(20px); animation: fadeIn 0.2s ease; } .modal-overlay.active { display: flex; } .modal-content { position: relative; max-width: 420px; width: 90%; animation: scaleIn 0.3s ease; } BeReal Profile Viewer&
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes scaleIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
.slide-up { animation: slideUp 0.4s ease forwards; } .slide-up-d1 { animation-delay: 0.05s; opacity: 0; } .slide-up-d2 { animation-delay: 0.1s; opacity: 0; } .slide-up-d3 { animation-delay: 0.15s; opacity: 0; } .slide-up-d4 { animation-delay: 0.2s; opacity: 0; }