Erasure Poetry

A blackout poem is when a poet takes a marker (usually black marker) to already established text—like in a newspaper—and starts redacting words until a poem is formed. The key thing with a blackout poem is that the text AND redacted text form a sort of visual poem.

"Erasure and Blackout Poems", Robert Lee Brewer (Writer's Digest)

This year, I’ve been playing around a lot with erasure poetry, which is a form that works very well with the Documentary Poetry medium. I like this medium because I really enjoy digging into primary sources for history, and finding little jewels in the archives. Poetry is a more liberating form than academic history because it allows room for creative interpretation and emotional impact.

Inspired by friends like Warren Longmire, and his book BIRD/DIZ, which, navigates the personal and artistic lives of Charlie Parker and Dizzy Gillespie, I am currently playing primarily with this form for my Lighthouse Poetry Collective manuscript.

In searching for interesting examples of erasure poetry combined with computer interfaces, I found this beautiful piece on the New Yorker: “The Ferguson Report: An Erasure” by Nicole Sealey, published on July 24, 2023.

The animation effect on this page makes the words dissapear from the original text as the reader scrolls down the page.

Recreating this effect

I spent some time yesterday playing around with GreenSock to recreate this effect for my own web anthology. Here is the script I came up with which mimics this interaction using the ScrollTrigger plugin in GreenSock:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Blackout Poetry Animation</title>
    <style>
        body { font-family: Arial, sans-serif; }
        .poem { max-width: 600px; margin: 20px auto; }
        .line { opacity: 0; }
        .highlight {
            transition: background-color 0.5s ease;
            background-color: yellow; /* Initial blackout color */
        }

        .blackout {
            background-color: black !important; /* Color to "erase" the text */
            color: black !important;
        }
    </style>
</head>
<body>
<div id="poetry" class="poem">
    <!-- Your poem lines here -->
    <div class="line">This is a <span class="blackout">blackouted phrase</span> in the poem.</div>
    <div class="line">Another line with a <span class="blackout">blackouted part</span>.</div>
    <div class="line">This is a <span class="blackout">blackouted phrase</span> in the poem.</div>
    <div class="line">Another line with a <span class="blackout">blackouted part</span>.</div>
    <div class="line">This is a <span class="blackout">blackouted phrase</span> in the poem.</div>
    <div class="line">Another line with a <span class="blackout">blackouted part</span>.</div>
    <div class="line">This is a <span class="blackout">blackouted phrase</span> in the poem.</div>
    <div class="line">Another line with a <span class="blackout">blackouted part</span>.</div>
    <div class="line">Another line with a <span class="blackout">blackouted part</span>.</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

<script>
gsap.registerPlugin(ScrollTrigger);

// Animate poem lines
gsap.utils.toArray(".line").forEach(line => {
    gsap.fromTo(line, 
        { opacity: 0 }, 
        {
            opacity: 1, 
            scrollTrigger: {
                trigger: line,
                start: "top 80%",
                end: "bottom 20%",
                toggleActions: "play none none reverse",
            }
        }
    );
});

// Animate blackouted words/phrases to be "blacked out"
gsap.utils.toArray(".blackout").forEach(blackout => {
    ScrollTrigger.create({
        trigger: blackout,
        start: "top 75%", // start point
        end: "top 30%", // end point
        onEnter: () => blackout.classList.add('blackout'),
        onLeaveBack: () => blackout.classList.remove('blackout'), // Optional: reverse effect if reader scrolls back up
        markers: false // scroll marks for debugging purposes in development
    });
});

</script>

Virginia Woolf’s Suicide Note

Here is my version of the scroll animation effect, as applied to Virginia Woolf’s suicide letter to her husband, Leonard Woolf – as an erasure poem:



Building a Library

This script will be the first in a package of interactive text functions that I will be putting together as an NPM package for poets interested in presenting their work in a hypertext format that allows for user interactions. The key will be to create effects that adheres to some of the main conventions of poetic form and publications, in particular in the documentary poetry and found poetry genres, while allowing for new interactions possible through a web interface.

Looking forward to using this Digital Garden as a fertile space for growing the seeds of this project.