Created
April 16, 2026 01:42
-
-
Save acg/e6b7d44f87d7d5dddb32e01967643395 to your computer and use it in GitHub Desktop.
Allbirds 2026 brand redesign.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <style> | |
| :root { | |
| --disappear: 3s; | |
| --glow: 3s; | |
| } | |
| @font-face { | |
| font-family: 'Enfantine'; | |
| font-weight: 400; | |
| src: url('Enfantine-Regular.ttf'); | |
| /* get the trial font from: https://productiontype.com/font/enfantine */ | |
| } | |
| html { | |
| font-size: 20vw; | |
| font-family: 'Enfantine'; | |
| } | |
| body { | |
| overflow: hidden; | |
| animation: var(--glow) ease-in-out var(--disappear) invert; | |
| animation-fill-mode: forwards; | |
| } | |
| div { | |
| width: 100vw; | |
| height: 100vh; | |
| text-align: center; | |
| display: table-cell; | |
| vertical-align: middle; | |
| } | |
| u, em { | |
| font-style: italic; | |
| font-weight: 400; | |
| text-decoration: none; | |
| } | |
| u { | |
| animation: var(--glow) ease-out var(--disappear) glow; | |
| animation-fill-mode: forwards; | |
| } | |
| em { | |
| animation: var(--disappear) ease-out 1s fade; | |
| animation-fill-mode: forwards; | |
| } | |
| @keyframes fade { | |
| 0% { | |
| opacity: 1; | |
| letter-spacing: 0; | |
| } | |
| 65% { | |
| opacity: 0; | |
| letter-spacing: 0; | |
| } | |
| 100% { | |
| opacity: 0; | |
| letter-spacing: -0.45em; | |
| } | |
| } | |
| @keyframes invert { | |
| 0% { | |
| background-color: white; | |
| transform: scale(1); | |
| } | |
| 25% { | |
| background-color: #3f303f; | |
| } | |
| 100% { | |
| background-color: #120012; | |
| transform: scale(2); | |
| } | |
| } | |
| @keyframes glow { | |
| 0% { | |
| color: black; | |
| text-shadow: 0 0 0 rgba(0, 0, 0, 0.0); | |
| } | |
| 25% { | |
| color: white; | |
| text-shadow: 0 0 0.025em rgba(255, 255, 255, 0.1); | |
| } | |
| 75% { | |
| color: white; | |
| text-shadow: 0 0 0.025em rgba(255, 255, 255, 0.25); | |
| } | |
| 85% { | |
| color: white; | |
| text-shadow: 0 0 0.025em rgba(255, 255, 255, 0.25); | |
| } | |
| 100% { | |
| color: white; | |
| text-shadow: 0 0 0.10em rgba(255, 255, 255, 0.75); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div> | |
| <u>a</u><em>l</em><em>l</em><em>b</em><u>i</u><em>r</em><em>d</em><em>s</em> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment