Byㅤ AriadnesThreadAriadnesThread
Published on 14 Apr 2023 16:51

[[iftags +component]]

This is a component that animates the ACS header upon loading.

How to use:

Put this in anywhere in the article:

[[include :scp-wiki:component:acs-animation]]

And you're done!

Example: SCP-5935


- Two variables, --timeScale and --timeDelay, control the timings of the animation. For example:

[[module CSS]]
:root {
--timeScale: 2;
--timeDelay: 0.5s;

--timeScale slows down the entire animation by a factor of 2, and --timeDelay delays the starting point of the animation by half a second. Default values are 1 and 0s, respectively.

To change the default values, put the above after the [[include]]. --timeDelay is recommended if the ACS isn't the first content element, or you're using it in conjunction with other animation modules (a la Fade In.)

- Likely incompatible with other types of ACS headers*.

*To use with PeppersGhostPeppersGhost's ACS Lite, add the following patch after the [[include]]:

[[module CSS]]
/*-- ACS Lite Animation Compatibility Patch --*/
.anom-bar > .bottom-box::before { display: none; }
.anom-bar > .bottom-box { box-shadow: none!important; }
div.diamond-part { clip-path: none; animation: none; box-shadow: none!important; }
@media (max-width: 480px) { { clip-path: polygon(0% -30%, 100% -30%, 100% 130%, 0% 130%); }

- Inspired by the works of AnAnomalousWriterAnAnomalousWriter.

Source Code:

:root {
    --timeScale: 1;
    --timeDelay: 0s;
/* Converting middle divider from box-shadow to ::before pseudo-element */
.anom-bar > div.bottom-box { box-shadow: none; position: relative; }
.anom-bar > div.bottom-box::before {
    position: absolute;
    content: " ";
    width: 100%;
    height: 0.5rem;
    bottom: 100%; left: 0;
    background-color: rgb(var(--swatch-menubg-black-color, 12, 12, 12));
.anom-bar > .bottom-box::before {
    animation-name: divider;
    animation-duration: calc(0.74s * var(--timeScale));
    animation-delay: calc(0.1s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.32,.38,.39,.94);
    animation-fill-mode: backwards;
    animation-name: bar;
    animation-duration: calc(0.45s * var(--timeScale));
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: backwards;
} > :nth-child(1) { animation-delay: calc(0.2s * var(--timeScale) + var(--timeDelay)); } > :nth-child(2) { animation-delay: calc(0.32s * var(--timeScale) + var(--timeDelay)); } > :nth-child(3) { animation-delay: calc(0.45s * var(--timeScale) + var(--timeDelay)); } > :nth-child(4) { animation-delay: calc(0.61s * var(--timeScale) + var(--timeDelay)); } > :nth-child(5) { animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay)); } > :nth-child(6) { animation-delay: calc(0.95s * var(--timeScale) + var(--timeDelay)); }
/* TOP TEXT */, {
    clip-path: polygon( 0% -50%, 150% -50%, 150% 100%, 0% 100%);
} > *, > * {
    position: relative;
    animation-name: bottomup;
    animation-duration: calc(0.65s * var(--timeScale));
    animation-delay: calc(0.5s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: backwards;
div.text-part > * {
    clip-path: polygon( 0% 0%, 100% 0%, 100% 100%, 0% 100%);
    animation-name: expand2;
    animation-duration: calc(0.5s * var(--timeScale));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.12,.41,.27,.99);
    animation-fill-mode: backwards;
div.text-part > :nth-child(1) {
    animation-name: expand1;
div.text-part > :nth-child(1) { animation-delay: calc(0.6s * var(--timeScale) + var(--timeDelay)); }
div.text-part > :nth-child(2) { animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay)); }
div.text-part > :nth-child(3) { animation-delay: calc(0.86s * var(--timeScale) + var(--timeDelay)); }
div.main-class::before, div.main-class::after {
    animation-name: iconslide;
    animation-duration: calc(0.45s * var(--timeScale));
    animation-delay: calc(0.8s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.12,.41,.27,.99);
    animation-fill-mode: backwards;
div.main-class > *,  div.disrupt-class > *, div.risk-class > * {
    white-space: nowrap;
    animation-name: flowIn;
    animation-duration: calc(0.42s * var(--timeScale));
    animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: backwards;
div.arrows {
    animation-name: arrowspin;
    animation-duration: calc(0.65s * var(--timeScale));
    animation-delay: calc(0.55s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.12,.41,.27,.99);
    animation-fill-mode: backwards;
div.quadrants > * {
    animation-name: fade;
    animation-duration: calc(0.3s * var(--timeScale));
    animation-delay: calc(1.4s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.12,.41,.27,.99);
    animation-fill-mode: backwards;
}, div.right-icon, div.left-icon, div.bottom-icon {
    animation-name: nodegrow;
    animation-duration: calc(0.4s * var(--timeScale));
    animation-delay: calc(1.4s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.12,.41,.27,.99);
    animation-fill-mode: backwards;
.bottom-box > div.diamond-part {
    box-shadow: none;
.bottom-box > div.diamond-part::before {
    content: "";
    position: absolute;
    width: 0.5rem; height: 100%;
    top: 0; right: 100%;
    background-color: rgb(var(--swatch-menubg-black-color, 12, 12, 12));
    animation-name: diamondBorder;
    animation-duration: calc(0.475s * var(--timeScale));
    animation-delay: calc(0.775s * var(--timeScale) + var(--timeDelay));
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(.28,.72,.55,.91);
    animation-fill-mode: backwards;
@media (max-width: 480px ) {
    .anom-bar > div.bottom-box { position: initial; }
    .anom-bar > div.bottom-box::before { bottom: initial; top: 40vw; }  > * {
        animation-name: bar-mobile;
        animation-duration: calc(0.9s * var(--timeScale));
    } > :nth-child(1) { animation-delay: calc(0.1s * var(--timeScale) + var(--timeDelay)); } > :nth-child(2) { animation-delay: calc(0.2s * var(--timeScale) + var(--timeDelay)); } > :nth-child(3) { animation-delay: calc(0.3s * var(--timeScale) + var(--timeDelay)); } > :nth-child(4) { animation-delay: calc(0.4s * var(--timeScale) + var(--timeDelay)); } > :nth-child(5) { animation-delay: calc(0.5s * var(--timeScale) + var(--timeDelay)); } > :nth-child(6) { animation-delay: calc(0.6s * var(--timeScale) + var(--timeDelay)); }
/*--- Motion Accessibility ---*/
@media screen and (prefers-reduced-motion: reduce) {
    div.anom-bar-container { --timeScale: 0!important; }
@keyframes divider {
    from { max-width: 0%;  }
    to { max-width: 100%; }
@keyframes bar {
    from { max-width: 0%; }
    to { max-width: 100%; }
@keyframes bar-mobile {
    from { max-height: 0%; }
    to { max-height: 100%; }
@keyframes bottomup {
    from { top: 100px; }
    to { top: 0; }
@keyframes expand1 {
    from { opacity: 0; clip-path: inset(0 calc(100% - 0.75rem) 0 0); }
    to { opacity: 1; clip-path: inset(0); }
@keyframes iconslide {
    from { opacity: 0; transform: translateX(-5rem); }
    to { opacity: 1; transform: translateX(0); }
@keyframes expand2 {
    from { opacity: 0; width: 1%; }
    to { opacity: 1; width: calc(100% - 0.25rem); }
@keyframes fade {
    from { opacity: 0; }
    to { opacity: 1; }
@keyframes flowIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
@keyframes arrowspin {
    from { clip-path: circle(0%); transform: rotate(135deg); }
    to { clip-path: circle(75%); transform: rotate(0deg); }
@keyframes nodegrow {
    from { transform: scale(0);}
    to {  transform: scale(1);}
@keyframes diamondBorder {
    from { height: 0; }
    to { height: 100%; }

rating: +51+x

What this is

A bunch of miscellaneous CSS 'improvements' that I, CroquemboucheCroquembouche, use on a bunch of pages because I think it makes them easier to deal with.

The changes this component makes are bunch of really trivial modifications to ease the writing experience and to make documenting components/themes a bit easier (which I do a lot). It doesn't change anything about the page visually for the reader — the changes are for the writer.

I wouldn't expect translations of articles that use this component to also use this component, unless the translator likes it and would want to use it anyway.

This component probably won't conflict with other components or themes, and even if it does, it probably won't matter too much.


On any wiki:

[[include :scp-wiki:component:croqstyle]]

This component is designed to be used on other components. When using on another component, be sure to add this inside the component's [[iftags]] block, so that users of your component are not forced into also using Croqstyle.

Related components

Other personal styling components (which change just a couple things):

Personal styling themes (which are visual overhauls):

CSS changes

Reasonably-sized footnotes

Stops footnotes from being a million miles wide, so that you can actually read them.

.hovertip { max-width: 400px; }

Monospace edit/code

Makes the edit textbox monospace, and also changes all monospace text to Fira Code, the obviously superior monospace font.

@import url(';700&display=swap');
:root { --mono-font: "Fira Code", Cousine, monospace; }
#edit-page-textarea, .code pre, .code p, .code, tt, .page-source { font-family: var(--mono-font); }
.code pre * { white-space: pre; }
.code *, .pre * { font-feature-settings: unset; }

Teletype backgrounds

Adds a light grey background to <tt> elements ({{text}}), so code snippets stand out more.

tt {
  background-color: var(--swatch-something-bhl-idk-will-fix-later, #f4f4f4);
  font-size: 85%;
  padding: 0.2em 0.4em;
  margin: 0;
  border-radius: 6px;

No more bigfaces

Stops big pictures from appearing when you hover over someone's avatar image, because they're stupid and really annoying and you can just click on them if you want to see the big version.

.avatar-hover { display: none !important; }

Breaky breaky

Any text inside a div with class nobreak has line-wrapping happen between every letter.

.nobreak { word-break: break-all; }

Code colours

Add my terminal's code colours as variables. Maybe I'll change this to a more common terminal theme like Monokai or something at some point, but for now it's just my personal theme, which is derived from Tomorrow Night Eighties.

Also, adding the .terminal class to a fake code block as [[div class="code terminal"]] gives it a sort of pseudo-terminal look with a dark background. Doesn't work with [[code]], because Wikidot inserts a bunch of syntax highlighting that you can't change yourself without a bunch of CSS. Use it for non-[[code]] code snippets only.

Quick tool to colourise a 'standard' Wikidot component usage example with the above vars: link

:root {
  --c-bg: #393939;
  --c-syntax: #e0e0e0;
  --c-comment: #999999;
  --c-error: #f2777a;
  --c-value: #f99157;
  --c-symbol: #ffcc66;
  --c-string: #99cc99;
  --c-operator: #66cccc;
  --c-builtin: #70a7df;
  --c-keyword: #cc99cc;
.terminal, .terminal > .code {
  color: var(--c-syntax);
  background: var(--c-bg);
  border: 0.4rem solid var(--c-comment);
  border-radius: 1rem;

Debug mode

Draw lines around anything inside .debug-mode. The colour of the lines is red but defers to CSS variable --debug-colour.

You can also add div.debug-info.over and div.debug-info.under inside an element to annotate the debug boxes — though you'll need to make sure to leave enough vertical space that the annotation doesn't overlap the thing above or below it.

…like this!

.debug-mode, .debug-mode *, .debug-mode *::before, .debug-mode *::after {
  outline: 1px solid var(--debug-colour, red);
  position: relative;
.debug-info {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Fira Code', monospace;
  font-size: 1rem;
  white-space: nowrap;
.debug-info.over { top: -2.5rem; }
.debug-info.under { bottom: -2.5rem; }
.debug-info p { margin: 0; }

rating: +51+x

Item#: 7801
Containment Class:
Secondary Class:
Disruption Class:
Risk Class:

Dire Dawa, Ethiopia

The mouth of a cave atop a desert plateau.

Porc-Épic Cave dig site. Location of initial SCP-7801 discovery.

SPECIAL CONTAINMENT PROCEDURES The remains comprising SCP-7801 are to be held at Site-89 Reliquary Facilities. In order to protect from accidental exposure to artificial or natural lighting, remains will be kept in lockdown within a standard Euclid storage chamber, size 9, with infrared lighting in the two preceding chambers. Further research upon the remains must be approved in writing by Site Director Ababe prior to examination or experimentation.

In the event of any disruption to containment or transformation of the remains, the SORCIER Protocol is to be enacted immediately. See Proposal 7801.7 document for further information.

Pending Upgrade to Keter, see Incident Report for more detail.

DESCRIPTION SCP-7801 is the designation for the fossilized complete remains of an early hominid, possibly related to H. sapiens neanderthalensis found by a University College Dublin archaeological field school working at the Porc-Épic Cave dig site (Dire Dawa, Ethiopia). While the skull shape suggests H. sapiens neanderthalensis most clearly, relative dating places the remains during the Middle Paleolithic (approx. 300,000 BCE) which is further complicated by grave goods found in situ with the remains during recovery which denote a level of religious behaviorism not seen until significantly later during the Upper Paleolithic cultures (approx. 50,000 BCE)..It must also be noted that H. sapiens neanderthalensis remains have not been confirmed as being found farther south than 31°N.

Discovered in the same grave site was a cache of grave goods (designated SCP-7801-2), placed in an organic container of some nature (either a crude basket or satchel of cloth) which has since carbonized. Foundation archaeologists have compared the composition and placement of these grave goods to those found at the Сунгирь archaeological site,.Sungir, Russia. Notable as one of the more complete Upper Paleolithic (roughly between 32,050 and 28,550 BCE) with H. sapiens remains showing intentional, elaborate postmortem decoration. particularly with the elaborate ivory bead-work on animal bones, creating what is believed to be some sort of ritualistic object due to its disproportionately high level of emission of Akiva radiation.

The remains themselves are clothed in a crudely tailored tunic (designated SCP-7801-3) which ends below the knees, made of an unknown anomalous material which has mineralized during the fossilization process and cannot be removed from the skeletal structure. Radiometric dating cannot be confirmed as the material of the tunic has resisted all attempts to collect a sample, and samples from the skeletal remains are outside the effective range of radiocarbon testing. The tunic emits the same high levels of Akiva radiation as the ritual items placed around the fossilized remains.

Fossilized animal bones decorated with intricate bead-work were found embedded into the hominid skeleton at five points; one per limb with a fifth and final implement impaling the skull..It should be noted that the decorated bones are not identifiable to any known species and do not show the typical damage one would expect from impact trauma of this nature. Two of the implements were found precisely at the midpoint of the skeleton's forearms, resting between the ulnar and radial bones. An additional two were found bisecting the tibiae and fibulae. The final implement was found in the skull, piercing the frontal bone at the midpoint between the temples half a centimeter above the pronounced brow ridge before traversing the cranial vault to emerge from the occipital bone in the midpoint of what may represent the supraniac fossa.

Endochondral ossification can be observed ringing the sites of impalement, suggesting remodeling after the injuries and indicating the subject may have survived for a significant amount of time. There is an additional site of healing seen in the sternum, ringing a puncture site with dimensions which match the other implements, though no corresponding fossilized animal bone was found at the site. Of note, the endochondral ossification is more pronounced in the skull and at the sternum, compared to the leg bones.

Inscriptions in an unknown language or symbology have been carved into the left femur with an unknown tool or procedure which would be equivalent to modern CNC machining in technique and precision, although as with the other injuries there is evidence of endochondral ossification around the margins. Efforts to translate the text as well as research into how this etching would have been possible with neolithic tools is ongoing.

While kept in a state of complete darkness, SCP-7801 will remain inert while emitting a constant, abnormal Hume field fluctuating between 2.5-6.7 with no noticeable changes to local reality. If SCP-7801 is exposed to any light on the visible spectrum, the remains will begin to distort local reality at an increasingly accelerating rate that could theoretically create a localized ZK-Class Reality Failure Scenario with possible global repercussions if spread is not halted. However, if returned to complete darkness before roughly one hour of exposure has passed, this acceleration is halted with local reality returning to acceptable Hume levels over the course of roughly 72 hours. It should be noted that changes on any organic or synthetic life caught in the field will not be reverted, and that these changes seem to favor lifeforms over either natural or synthetic objects within the field. See Recovery Video Transcript for further detail.


Note: Footage was recovered by Foundation personnel from a partially damaged Canon SLR Camera found at the site on an upended tripod, likely set up by one of the UCD researchers working on the Porc-Épic Cave who initially uncovered SCP-7801. The majority of footage was corrupted presumably by the artifact's inadvertent activation by the researchers, however a small window of recording survived.

17:51 Prior to this point, footage only showed static with the occasional graphical artifact glitching. Footage resolves almost immediately to a clear picture of four individuals with their backs to the camera, roughly ten or so feet away from the tripod, looking down at a fifth person, who is low to the ground with a large brush and trowel in hand, examining a large STP (shovel test pit) near the back of the cave chamber the camera was found in. No audio is captured.

17:53:01 Footage continues for two minutes without incident or marked changes. It should also be noted that all five individuals are wearing head lanterns typically seen in field work, although only the individual working in the pit has their lantern turned on. At this mark, one of the individuals on the left side of the group pulls out a large flashlight, aiming it directly into the pit when the individual who had been bent over working, presumably on uncovering SCP-7801 suddenly moves as if standing up straight, but with strain evident in all limbs, as if being held by an invisible force. Individual affected is visibly distressed but does not appear to be capable of vocalization. Other individuals express confusion but appear unaffected at this point.

17:55:10 Individual initially digging in the pit and then held by the invisible force disappears near instantly, although drastically slowing the footage shows that they are pulled apart in a seeming vaporization at the atomic level. The other four individuals are visibly panicking at this point and begin to turn in an attempt to escape. The flashlight points now at the far cave wall, which begins to melt slowly.

17:55:15 The two individuals on the far left of the field of vision fall to the ground as their legs appear to vanish in the same manner as the initial individual's vaporization, but the remainder of their bodies turn into quartz, starting from the waist up, over the following 40 seconds. The remaining two individuals appear to turn into flame and vapor respectively over the same 40 seconds before disappearing completely. The cave wall has begun to melt upward now at a faster pace.

17:55:55 No movement beside the melting of the cave wall is detected as the light continues to shine exclusively on the rock. This continues until the flashlight begins to flicker and dim roughly thirty-seven minutes into recording, presumably due to loss of battery life.

18:32:05 The light from the flashlight flares at full strength for two seconds and a humanoid figure, translucent and possibly consisting of either smoke or shadow is seen against the cave wall, which has been flattened to a nearly mirrored surface, which the figure appears to be trying to see itself in.

18:32:07 The flashlight dies.

Note: The remains of the two individuals transformed into quartz were recovered and found to be inert with no Hume or Akiva fluctuations noted. These remains, the camera, and all other personal artifacts of the UCD team are to be housed at Site-89 to be monitored for possible changes. The cave itself shows no changes to its structure and is to be likewise monitored for any changes.

UPDATE On 22/5/25, a disturbance was recorded in Site-89's reliquary Euclid storage by Foundation security forces, manifesting as local reality disrupts. No entities breached during this event, but the resulting earthquake appeared to be centered on the container housing SCP-7801's remains. Upon inspection (via infrared scanning), the bone previously piercing the frontal lobe is now missing. 24-hour video monitoring of the remains is now required.

Additionally, due to a possible connection to other known deistic anomalies in the region, the Department of Tactical Theology was consulted for a review of the artifacts, in particular the remaining four bones impaled in the skeleton. Dr. Ariadne Cooper presented her findings to Site-89 personnel on 5/6/25.


In attendance are Site Director Zala Ababe, Lead Researcher Sylvia Jones Endrick-McCallow with her team of senior and junior researchers, as well as several other site personnel and visiting researchers from Tactical Theology's headquarters. Junior Researcher Cooper stands at the head of the table to present.

COOPER "Good afternoon, if we could just get started… for those of you who have not met me, I am Dr. Cooper from Tactical Theology, and I am here to update you all on the team's progress regarding SCP-7801."

Projector shows the live feed of the remains via infrared scanning, the fossils inert and the only active thermal imaging coming from the ivory decorations on the bones impaling the skeleton and grave good ritual fetishes at the side of the remains.

COOPER "As many of you know, 7801 has always presented somewhat of a frustrating mixture of contradicting information. Relative dating has allowed us some assurance that the remains were set in place roughly three hundred thousand years ago, although this would be at the most extreme end of the span we normally see Neanderthal remains as well as the first to be definitively identified this far south of the equator. Furthermore, even the intentional burial itself is out of place, let alone of this complexity. Even without the anomalous effects, this hominid would stand out like a sore thumb with academic archaeologists, possibly even dismissed as an elaborate forgery."

ENDRICK-MCCALLOW "Excuse me, Dr. Cooper, but this is all information that we've already established. Could we move forward with the briefing?"

COOPER "With respect, I believe it is important to be thorough, particularly with a contradictory object like 7801. It was the grave goods that caught the attention of some of the TactTheo researchers, as their resemblance to what was found at the Sungir site near Moscow borders on uncanny. While no anomalous events have been recorded at Sungir, research by Foundation theologians have found that each of the burials with decorations similar to those we found on the bones impaling 7801 have been shown to emit Akiva radiation, although at a lesser degree. Shamanistic practices in the area mirror this particular use of animal bones used as somewhat effective reality anchors, and while we can in no way prove a direct link, nor explain the techniques for creating these artifacts or the inscription made on 7801's femur, there is strong enough evidence to suggest a connection worth exploring."

ABABE "It's not necessary just this second for us to explain why we're seeing the same thing in Russia and Ethiopia in the distant past, only that we learn what is happening right now to ensure containment."

COOPER "We believe that can be credited to the grave goods, although it seems inaccurate to classify them as such as we now firmly believe these items were placed with the entity in order to ensure that it stayed there."

ENDRICK-MCCALLOW "Are you implying this was some sort of — what, paleolithic containment attempt?"

COOPER "I'm not implying anything, I am stating clearly that these items, as poorly understood as they are, were an attempt to contain a Type Green reality bender, and that it mostly worked. However, the excavation at Porc-Épic likely disturbed the remains enough to allow whatever is left of the entity to begin a regeneration cycle, however slowly."

There are multiple attempts to ask questions all at once, the room erupting into loud speech with no single voice standing out until COOPER regains order.

COOPER "I recognize that this news is unwelcome, but we need to assume that the initial discovery either somehow destroyed or dislodged the missing implement which caused the sternum fracturing, which has resulted in the destabilization of this shamanistic containment field these ancient practitioners had created. Now with the incident last month and the loss of another implement by what has to be assumed to be anomalous circumstances, it is more critical than ever to examine the markings on the fossils themselves as well as the implements used to secure the entity in the first place so we can hope to create a similar containment strategy. It should go without saying that if someone worked this hard to keep this thing in the ground, so should we."

ABABE "What do you propose?"

COOPER "I believe on-site researchers were already attempting to reverse engineer the technology for the implements themselves, but I propose adding a Foundation shaman to your efforts. I also recommend using cross-testing with other anomalies in an attempt to decipher the markings on the femur, if possible. I'm willing to head up that effort, as I know that you're rather short-staffed at the moment."

ABABE "Yes, thank you for that. Send over the list of your people to add to our containment researchers, and I'll ensure you get access to the appropriate anomalies for translation. Any questions? Send them in email. We've got work to do. Dismissed."

Cross Test Addendum 7801.57

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License