4 files changed, 75 insertions, 1 deletions
diff --git a/frontend/site/projects/museum/constants.js b/frontend/site/projects/museum/constants.js
index 27b2044..259603e 100644
--- a/frontend/site/projects/museum/constants.js
+++ b/frontend/site/projects/museum/constants.js
@@ -341,7 +341,7 @@ export const ARTISTS = {
       `,
       de: `
         <p>
-          Ich wählte den Ort wegen seiner ursprünglich vorgesehenen Funktion: ein Krematorium. Dies war eines der ehrgeizigen, aber leider unvollendeten Projekte, die von Ghanas Kwame-Nkrumah-Regierung in den 1970er-Jahren initiiert wurden. Das Gebäude ist bis heute verlassen. 
+          Ich wählte den Ort wegen seiner ursprünglich vorgesehenen Funktion: ein Krematorium. Dies war eines der ehrgeizigen, aber leider unvollendeten Projekte, die von Ghanas Kwame-Nkrumah-Regierung in den 1970er-Jahren initiiert wurden. Das Gebäude ist bis heute verlassen.
         </p>
         <p>
           Ich interessiere mich sehr für die raue Ästhetik des Betons, die mit den zerkratzten Wänden einhergeht und die sich in den letzten fünfzig Jahren entwickelt hat. Der Eindruck, den das Gebäude erweckt, hat etwas Historisches und erinnert mich an das Ausgangsmaterial für ein Werk, das ich aus Grabmalereien entnommen habe: das altägyptische Totenbuch.
@@ -374,3 +374,9 @@ export const ESSAY_ORDER = [
   "nadim", "statements",
 ]
 
+export const MARQUEES = {
+  'opoku-1-hail-to-you': {
+    en: 'Hail to you, lords of truth, free from wrongdoing, who exist forever and forever. I have reached you because I am an akh with my forms. I am powerful through my magic. Going forth by day / Papyrus of Sobekmose / Book of the Dead ...',
+    de: 'Seid gegrüßt, ihr Herren der Wahrheit, frei von Unrecht, die ihr für immer und ewig existiert. Ich habe euch erreicht, weil ich mit meinen Formen ein akh bin. Ich bin mächtig durch meine Magie. Weitergehen bei Tag / Papyrus des Sobekmose / Totenbuch ...',
+  }
+}
diff --git a/frontend/site/projects/museum/views/marquee.css b/frontend/site/projects/museum/views/marquee.css
new file mode 100644
index 0000000..2fcfd5a
--- /dev/null
+++ b/frontend/site/projects/museum/views/marquee.css
@@ -0,0 +1,15 @@
+.marquee-container {
+  position: fixed;
+  bottom: 4rem;
+  height: 40px;
+  width: 100vw;
+  pointer-events: none;
+}
+.marquee-text {
+  white-space: nowrap;
+  padding-left: 100vw;
+  width: 6500px;
+  font-family: "Druk Wide", sans-serif;
+  font-size: 30px;
+  color: #fff;
+}
diff --git a/frontend/site/projects/museum/views/marquee.js b/frontend/site/projects/museum/views/marquee.js
new file mode 100644
index 0000000..5d031eb
--- /dev/null
+++ b/frontend/site/projects/museum/views/marquee.js
@@ -0,0 +1,51 @@
+import React, { Component } from 'react'
+import Marquee from "react-fast-marquee"
+
+import "./marquee.css"
+
+import { MARQUEES } from "site/projects/museum/constants"
+
+export default class MarqueeContainer extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+    }
+  }
+
+  componentDidMount() {
+    this.load()
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.location.pathname !== prevProps.location.pathname) {
+      this.load()
+    }
+  }
+
+  load() {
+    const { match } = this.props
+    const { page_name } = match.params
+    if (!(page_name in MARQUEES)) {
+      this.setState({ message: null })
+    }
+    this.setState({ message: MARQUEES[page_name] })
+  }
+
+  render() {
+    const { language } = this.props
+    if (!this.state.message) return null
+    return (
+      <div className="marquee-container">
+        <Marquee
+          direction="left"
+          speed={412}
+          gradient={false}
+        >
+          <span className="marquee-text">
+            {this.state.message[language]}
+          </span>
+        </Marquee>
+      </div>
+    )
+  }
+}
diff --git a/frontend/site/projects/museum/views/nav.overlay.js b/frontend/site/projects/museum/views/nav.overlay.js
index 501b5af..804837d 100644
--- a/frontend/site/projects/museum/views/nav.overlay.js
+++ b/frontend/site/projects/museum/views/nav.overlay.js
@@ -9,6 +9,7 @@ import TextOverlay from './text.overlay'
 import JakrawalLinks from './jakrawal.links'
 import TitlesOverlay from './titles.overlay'
 import Flash from './flash'
+import Marquee from './marquee'
 import { ARTISTS, ARTIST_ORDER, PROJECT_PAGE_SET } from "site/projects/museum/constants"
 import { ArrowLeft, ArrowRight } from "site/projects/museum/icons"
 import MuteButton from "site/audio/mute.button"
@@ -179,6 +180,7 @@ class NavOverlay extends Component {
             <div className="footer no-artist" ref={this.footerRef} />
           )
         )}
+        <Marquee location={this.props.location} match={this.props.match} language={this.props.language} />
         <TitlesOverlay location={this.props.location} match={this.props.match} />
         <div className="home-corner">
           {showHome && (