Layout floating animation

Tags: animation, profile animation, floating, filter, layouts, cute

Description:

This animation has a floating effect. Literally that's all. It also has a tv filter on it, but you can mess around with the code to remove it if you don't like the filter! (Some layouts manually remove the filter on the animation though, just a quick disclaimer)
If you use it please comment! ty!
Also if you wanna see how the animation looks, just click on this layout, it'll always be here. This animation works on most layouts!!

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by reanna ☆ (https://layouts.spacehey.com/layout?id=33426) -->

<style>

h1{
  animation: type 3s steps(27);
  color: white;
  font-size: 10px;
  font-family: courier;
  white-space: nowrap;
  overflow: hidden;
  }

@keyframes type{
  0%{
    width:0ch;
  }
  
  100%{
    width:27ch;
  }
}

@keyframes blink{
  0%{opacity:1;}
  50%{opacity:0;}
  100%{opacity:1;}
}

body::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgb(82 15 15 / 48%) 50%, rgb(0 0 0 / 0%) 50%);
z-index: 2;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes float {
0% { transform: translate(0, 0px);
}
50% {
transform: translate(0, 8px);
}
100% {
transform: translate(0, -0px);
}

</style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 285 comments ( View all | Add Comment )

ery!!	1772842792 usando! Report Comment
𝒵 υr𝐲	1771666339 Using Report Comment
Ethan (#1 TFB fan)	1770942927 whenever i put it on my profile it makes my floating gif things glitch and my vhs effect glitch :( is there any way to fix that? Report Comment
jeremyyy	1770900613 using Report Comment
𐬾 {ᔕᑭ𖤐𝖱T𝟧Yy} 𐬾	1770563313 Using :] Report Comment
Elliot ! [Kazui's Husband]	1770422186 Using !! Report Comment
ANGELIQUE ！ー♪🦈ྀི༘~・	1769647968 Usinggg ! Report Comment
ナンバー1ファン!!☆	1769285859 Using! Thank you so much! Report Comment
seal	1769228947 usinggg Report Comment
Anartistsmelody	1768851238 using Report Comment
jeremyyy	1768482717 using Report Comment
4b3y_t@lk5	1768044484 usingg !! Report Comment
₊˚꩜ 𝕞𝕠𝕞𝕠𝕜𝕠𝕜𝕠 ✮˚₊	1767486051 using! Report Comment
eri	1767124615 Using! Report Comment
MAYU	1765902125 using!♪ Report Comment
Savior's Abandonment	1765593129 using Report Comment
Ziaek	1765029970 using Report Comment
Esmerei	1765016026 using... heh Report Comment
Junie	1764771690 Using! perfect for the water theme Report Comment
𝓕𝓻𝓮𝓪𝓴𝔂 J☆zz__!!™	1764467360 using Report Comment