Custom CSS in Spirals

Custom CSS is a powerful tool in spiral sessions that let you edit virtually anything style-wise in a session.

Some key elements are:

.distractor - Classic Distractors
```
.distractor {
  color: white
}
```

.focus-line - Contains the text that is center-focused on the screen

.focus-line {
  animation: breathing 4s linear infinite;
  font-family: sans-serif;
  color: #DDE;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  font-size: 4vh;
  text-wrap: none;
  overflow: hidden;
  z-index: 30;
  text-align: center;
  margin-top: -0.25em;
}

#spiral-gif - Contains the Spiral if the Spiral is an Image (.gif) (If in VR Mode, use .gif-fit). By default, the spiral is:

#spiral-gif, .gif-fit {
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    opacity: .3;
    z-index: 1;
    background: url(/static/utils/large.gif) no-repeat center center;
    background-size: cover;
    overflow: hidden;
    text-align: center;
}

#image - Contains the Breathing Image Background. Images are set in the style attribute of the #image <div> as a background.

#image {
    animation: _ngcontent-ng-c139187180_zoomin 1.5s linear infinite;
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background-repeat: repeat;
    background-position: center center;
    background-size: contain;
    overflow-x: hidden;
    overflow-y: hidden;
    overflow: hidden;
}

Additional Baked-in Fonts

heartFont - Makes font appear in block lettering with hearts.
```
.focus-line {
  font-family: 'heartFont', sans-serif;
}
```
dumbassFont - Makes font appear with some characters randomly rotating backwards
```
.focus-line {
  font-family: 'dumbassFont', sans-serif;
}
```

Baked-in Animations

breathing - Makes text or images appear to be breathing in and out.
Example Usage:
```
.focus-line {
  animation: breathing 4s linear infinite;
}
```

Back to top