diff --git a/README.md b/README.md
index e6925ec..f4cb247 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Rumfoords
+# Code Study Boilerplate
 
 **Local Development**
 
diff --git a/app.html b/app.html
index 123f64c..ed57dc5 100644
--- a/app.html
+++ b/app.html
@@ -1,10 +1,3 @@
-<!--
-    /* WEBSITE CREDITS */
-
-    Website Design / Development: CTHDRL
-    Contact: build@cthdrl.co
-    Site: https://cthdrl.co
--->
 <!DOCTYPE html>
 <html {{ HTML_ATTRS }}>
     <head {{ HEAD_ATTRS }}>
diff --git a/assets/scss/_base.scss b/assets/scss/_base.scss
index 2b22558..946dae8 100755
--- a/assets/scss/_base.scss
+++ b/assets/scss/_base.scss
@@ -1,5 +1,5 @@
 @import 'vars';
-@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,700;1,400;1,700&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
 
 html {
     font-size: 16px;
@@ -12,7 +12,7 @@ body {
     --black: #000000;
     --white: #ffffff;
 
-    --font-sans: 'Poppins', sans-serif;
+    --font-sans: 'IBM Plex Sans', sans-serif;
     --font-serif: 'EB Garamond', serif;
 
     @include fontSize(16px);
@@ -107,20 +107,15 @@ a {
     path {
         transition: fill 0.3s;
     }
-
-    @include hover {
-        color: var(--white);
-
-        path {
-            fill: var(--white);
-        }
+    &:hover {
+        text-decoration: underline;
     }
 }
 
 .contained {
     padding-right: var(--margin);
     padding-left: var(--margin);
-    // max-width: 1380px;
+    max-width: 1200px;
     margin-right: auto;
     margin-left: auto;
 }
diff --git a/components/Clippy.vue b/components/Clippy.vue
new file mode 100644
index 0000000..a93a575
--- /dev/null
+++ b/components/Clippy.vue
@@ -0,0 +1,229 @@
+<template>
+    <div class="clippy" :style="textStyles">
+        <!-- HIDDEN DUMMY SVG -->
+        <slot v-if="!defaultSlot.text" />
+
+        <!-- RENDERED SVG -->
+        <svg
+            ref="renderSvg"
+            :class="{ 'text-svg': defaultSlot.text }"
+            :width="svgWidth"
+            :height="svgHeight"
+            viewBox="0 0 28 29"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <defs>
+                <clipPath
+                    :id="pathID"
+                    :clipPathUnits="clipPathUnits"
+                    :transform="clipTransform"
+                >
+                    <!-- TEXT -->
+                    <text
+                        v-if="defaultSlot.text"
+                        x="0"
+                        :y="fontSize"
+                        ref="text"
+                    >
+                        {{ defaultSlot.text }}
+                    </text>
+
+                    <!-- SVG PATH -->
+                    <component
+                        v-for="(child, i) in svgChildren"
+                        :is="child.tagName"
+                        v-bind="getDrawAttribute(child)"
+                        :key="i"
+                    />
+                </clipPath>
+            </defs>
+        </svg>
+
+        <!-- BACKGROUND -->
+        <transition name="fade">
+            <div
+                v-if="pathID"
+                :class="['clip-container', { 'show-on-hover': showOnHover }]"
+                :style="clipStyles"
+            >
+                <transition name="fade">
+                    <img v-if="!videoSrc.length" :src="imageSrc" key="image" />
+                    <video
+                        v-else
+                        :src="videoSrc"
+                        muted
+                        autoplay
+                        loop
+                        key="video"
+                    />
+                </transition>
+
+                <div class="color-bg" />
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script>
+import _camelCase from 'lodash/camelCase'
+
+/**
+ * Text or SVG element can be slotted in to create clipping effect
+ *
+ * SVG must have an id set, and contain only path elements
+ */
+
+export default {
+    props: {
+        imageSrc: {
+            type: String,
+            default: '',
+            required: true,
+        },
+        videoSrc: {
+            type: String,
+            default: '',
+        },
+        showOnHover: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data() {
+        return {
+            pathID: null,
+            fontSize: '12px',
+            svgEl: {},
+            svgChildren: [],
+        }
+    },
+    mounted() {
+        // if the slot contains text
+        if (this.defaultSlot.text) {
+            // set unique id of clipPath
+            this.pathID = _camelCase(this.defaultSlot.text)
+            // get rendered length of text and set width of final svg
+            const textLength = this.$refs.text.getComputedTextLength()
+            this.$refs.renderSvg.style.width = textLength + 'px'
+            // set inherited font-size to data
+            this.fontSize = window
+                .getComputedStyle(this.$el)
+                .getPropertyValue('font-size')
+        }
+        // if the slot contains an element
+        else if (this.defaultSlot.elm) {
+            this.svgEl = this.defaultSlot.elm
+            // hide the slotted svg
+            this.svgEl.style.display = 'none'
+
+            this.svgChildren = [...this.svgEl.children]
+            // set unique id of clipPath
+            this.pathID = 'clip' + this.svgEl.id
+        }
+    },
+    computed: {
+        defaultSlot() {
+            return this.$slots.default[0]
+        },
+        clipStyles() {
+            return {
+                '--path-url': `url('#${this.pathID}')`,
+            }
+        },
+        textStyles() {
+            return {
+                '--set-font-size': this.fontSize,
+            }
+        },
+        clipPathUnits() {
+            return this.defaultSlot.text
+                ? 'userSpaceOnUse'
+                : 'objectBoundingBox'
+        },
+        svgWidth() {
+            if (!this.svgEl.getAttribute) return 0
+            return this.svgEl.getAttribute('width')
+        },
+        svgHeight() {
+            if (!this.svgEl.getAttribute) return 0
+            return this.svgEl.getAttribute('height')
+        },
+        xScale() {
+            return 1 / parseInt(this.svgWidth)
+        },
+        yScale() {
+            return 1 / parseInt(this.svgHeight)
+        },
+        clipTransform() {
+            if (!this.svgEl.getAttribute) return ''
+            return `scale(${this.xScale}, ${this.yScale})`
+        },
+    },
+    methods: {
+        getDrawAttribute(el) {
+            return { d: el.getAttribute('d') }
+        },
+    },
+}
+</script>
+
+<style lang="scss">
+.clippy {
+    position: relative;
+    display: inline-block;
+
+    svg {
+        width: 100%;
+        height: auto;
+    }
+    .text-svg {
+        height: var(--set-font-size);
+
+        text {
+            font-size: inherit;
+            font-weight: inherit;
+        }
+    }
+    .clip-container {
+        @include fill;
+        width: 100%;
+        height: 100%;
+        -webkit-clip-path: var(--path-url);
+        clip-path: var(--path-url);
+
+        .color-bg {
+            opacity: 0;
+        }
+        video,
+        img {
+            @include fill;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    }
+
+    .show-on-hover {
+        .color-bg {
+            opacity: 1;
+            @include fill;
+            background: currentColor;
+            transition: opacity 300ms ease-in-out;
+        }
+        video,
+        img {
+            opacity: 0;
+            transition: opacity 300ms ease-in-out;
+        }
+    }
+    &:hover .show-on-hover {
+        .color-bg {
+            opacity: 0;
+        }
+        video,
+        img {
+            opacity: 1;
+        }
+    }
+}
+</style>
diff --git a/components/StudyBody.vue b/components/StudyBody.vue
new file mode 100644
index 0000000..35def5b
--- /dev/null
+++ b/components/StudyBody.vue
@@ -0,0 +1,141 @@
+<template>
+    <section class="study-body">
+        <!-- SELECT IMAGE -->
+        <span>IMAGE</span>
+        <select v-model="selectedImage">
+            <option
+                v-for="(image, i) in images"
+                :value="image.url"
+                :selected="image.url === selectedImage"
+                :key="i"
+            >
+                {{ image.name }}
+            </option>
+        </select>
+
+        <!-- SELECT VIDEO -->
+        <span>VIDEO</span>
+        <select v-model="selectedVideo">
+            <option
+                v-for="(video, i) in videos"
+                :value="video.url"
+                :selected="video.url === selectedVideo"
+                :key="i"
+            >
+                {{ video.name }}
+            </option>
+        </select>
+
+        <!-- IMAGE ONLY -->
+        <h4>IMAGE ONLY</h4>
+        <clippy class="text-clip" :imageSrc="selectedImage"> CTHDRL </clippy>
+        <clippy class="svg-clip" :imageSrc="selectedImage">
+            <svg-social-twitter />
+        </clippy>
+
+        <!-- VIDEO -->
+        <h4>WITH VIDEO</h4>
+        <clippy
+            class="text-clip"
+            :imageSrc="selectedImage"
+            :videoSrc="selectedVideo"
+        >
+            CTHDRL
+        </clippy>
+        <clippy
+            class="svg-clip"
+            :imageSrc="selectedImage"
+            :videoSrc="selectedVideo"
+        >
+            <svg-social-facebook />
+        </clippy>
+
+        <!-- HOVER -->
+        <h4>REVEAL ON HOVER</h4>
+        <clippy
+            class="text-clip"
+            :imageSrc="selectedImage"
+            :videoSrc="selectedVideo"
+            showOnHover
+        >
+            CTHDRL
+        </clippy>
+        <clippy
+            class="svg-clip"
+            :imageSrc="selectedImage"
+            :videoSrc="selectedVideo"
+            showOnHover
+        >
+            <svg-social-instagram />
+        </clippy>
+    </section>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedImage:
+                'https://alpacapower.co.uk/wp-content/uploads/2013/07/073.jpg',
+            selectedVideo:
+                'https://prismic-io.s3.amazonaws.com/cthdrl/2a24e61d-f79b-4167-8f2a-dbbeeb243bd9_FL_Desktop_2B.mp4',
+        }
+    },
+    computed: {
+        images() {
+            return [
+                {
+                    name: 'Alpaca',
+                    url: 'https://alpacapower.co.uk/wp-content/uploads/2013/07/073.jpg',
+                },
+                {
+                    name: 'Sheep',
+                    url: 'https://images.complex.com/complex/image/upload/c_fill,g_center,w_1200/fl_lossy,pg_1,q_auto/spcukrgxinitof0jhiqp.jpg',
+                },
+                {
+                    name: 'Chicken',
+                    url: 'https://cdn.britannica.com/s:700x500/07/183407-050-C35648B5/Chicken.jpg',
+                },
+            ]
+        },
+        videos() {
+            return [
+                {
+                    name: 'Foot Locker',
+                    url: 'https://prismic-io.s3.amazonaws.com/cthdrl/2a24e61d-f79b-4167-8f2a-dbbeeb243bd9_FL_Desktop_2B.mp4',
+                },
+                {
+                    name: 'Buntin',
+                    url: 'https://prismic-io.s3.amazonaws.com/cthdrl/8a7d866d-7286-474b-82f7-93b033578e80_Buntin_CS_site.mp4',
+                },
+                {
+                    name: 'FWB',
+                    url: 'https://prismic-io.s3.amazonaws.com/cthdrl/a6cd93f2-c71a-4c10-bfa2-7b6f50ab95ca_FWB_CS_Gate.mp4',
+                },
+            ]
+        },
+    },
+}
+</script>
+
+<style lang="scss">
+.study-body {
+    border: 1px solid var(--black);
+    padding: 20px;
+    box-sizing: border-box;
+    margin-top: 20px;
+
+    h4 {
+        margin: 10px 0;
+    }
+    .text-clip {
+        font-weight: bold;
+        font-family: var(--font-sans);
+        font-size: 90px;
+    }
+    .svg-clip {
+        display: block;
+        width: 50px;
+    }
+}
+</style>
diff --git a/components/svg/facebook-clipped.vue b/components/svg/facebook-clipped.vue
new file mode 100644
index 0000000..cee3cef
--- /dev/null
+++ b/components/svg/facebook-clipped.vue
@@ -0,0 +1,47 @@
+<template>
+    <svg
+        ref="svgEl"
+        width="28"
+        height="29"
+        viewBox="0 0 28 29"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <defs>
+            <clipPath
+                id="facebookClip"
+                clipPathUnits="objectBoundingBox"
+                :transform="clipTransform"
+            >
+                <path
+                    d="M27.7134 14.5664C27.7134 6.91357 21.5096 0.709717 13.8567 0.709717C6.20386 0.709717 0 6.91357 0 14.5664C0 21.4826 5.06717 27.2153 11.6916 28.2548V18.5719H8.17329V14.5664H11.6916V11.5136C11.6916 8.04078 13.7604 6.12249 16.9255 6.12249C18.4411 6.12249 20.0273 6.39313 20.0273 6.39313V9.80318H18.28C16.5588 9.80318 16.0218 10.8714 16.0218 11.9683V14.5664H19.8649L19.2505 18.5719H16.0218V28.2548C22.6462 27.2153 27.7134 21.4826 27.7134 14.5664Z"
+                />
+            </clipPath>
+        </defs>
+    </svg>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            svg: {},
+        }
+    },
+    mounted() {
+        this.svg = this.$refs.svgEl
+    },
+    computed: {
+        xScale() {
+            return 1 / parseInt(this.svg.getAttribute('width'))
+        },
+        yScale() {
+            return 1 / parseInt(this.svg.getAttribute('height'))
+        },
+        clipTransform() {
+            if (!this.svg.getAttribute) return ''
+            return `scale(${this.xScale}, ${this.yScale})`
+        },
+    },
+}
+</script>
diff --git a/components/svg/social/social-facebook.vue b/components/svg/social/social-facebook.vue
index 255e297..76d98e7 100644
--- a/components/svg/social/social-facebook.vue
+++ b/components/svg/social/social-facebook.vue
@@ -1,5 +1,6 @@
 <template>
     <svg
+        id="facebook"
         width="28"
         height="29"
         viewBox="0 0 28 29"
@@ -11,4 +12,4 @@
             fill="white"
         />
     </svg>
-</template>
\ No newline at end of file
+</template>
diff --git a/components/svg/social/social-instagram.vue b/components/svg/social/social-instagram.vue
index 127d7bc..9d78085 100644
--- a/components/svg/social/social-instagram.vue
+++ b/components/svg/social/social-instagram.vue
@@ -1,5 +1,6 @@
 <template functional>
     <svg
+        id="instagram"
         width="29"
         height="29"
         viewBox="0 0 29 29"
diff --git a/components/svg/social/social-linkedin.vue b/components/svg/social/social-linkedin.vue
index b6a51db..f7fcbd2 100644
--- a/components/svg/social/social-linkedin.vue
+++ b/components/svg/social/social-linkedin.vue
@@ -1,5 +1,6 @@
 <template functional>
     <svg
+        id="linkedIn"
         class="svg-social-linkedin"
         xmlns="http://www.w3.org/2000/svg"
         width="21.639"
diff --git a/components/svg/social/social-mail.vue b/components/svg/social/social-mail.vue
index ed1f69f..a02a9cf 100644
--- a/components/svg/social/social-mail.vue
+++ b/components/svg/social/social-mail.vue
@@ -1,5 +1,6 @@
 <template functional>
     <svg
+        id="mail"
         class="svg-social-mail"
         xmlns="http://www.w3.org/2000/svg"
         width="22.475"
diff --git a/components/svg/social/social-spotify.vue b/components/svg/social/social-spotify.vue
index 15a6303..9f95eda 100644
--- a/components/svg/social/social-spotify.vue
+++ b/components/svg/social/social-spotify.vue
@@ -1,5 +1,6 @@
 <template functional>
     <svg
+        id="spotify"
         class="svg-social-spotify"
         xmlns="http://www.w3.org/2000/svg"
         width="21.622"
diff --git a/components/svg/social/social-twitter.vue b/components/svg/social/social-twitter.vue
index 8548619..f372fa0 100644
--- a/components/svg/social/social-twitter.vue
+++ b/components/svg/social/social-twitter.vue
@@ -1,5 +1,6 @@
 <template functional>
     <svg
+        id="twitter"
         width="29"
         height="23"
         viewBox="0 0 29 23"
diff --git a/pages/index.vue b/pages/index.vue
index e2f79e0..95d80ef 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,8 +1,21 @@
 <template>
     <main class="front-page">
         <div class="contained">
-            <h1>CODE STUDY X.0</h1>
-            <p>This is some paragraph text.</p>
+            <!-- STUDY TITLE -->
+            <h1>CODE STUDY 1.0 - CLIPPY</h1>
+            <!-- DESCRIPTION -->
+            <p>
+                A reusable component for masking videos and images with SVGs and
+                text
+            </p>
+            <!-- LINK -->
+            <a
+                href="https://github.com/nicwands/code-study-boilerplate/blob/clipped-video/components/Clippy.vue"
+                target="_blank"
+                >SOURCE</a
+            >
+
+            <study-body />
         </div>
     </main>
 </template>
@@ -13,5 +26,18 @@ export default {}
 
 <style lang="scss">
 .front-page {
+    > .contained {
+        height: 100%;
+        padding-top: var(--margin);
+        padding-bottom: var(--margin);
+        box-sizing: border-box;
+        grid-template-rows: auto 1fr;
+        display: grid;
+
+        h1 {
+            margin: 0;
+            font-size: 20px;
+        }
+    }
 }
 </style>
diff --git a/static/fonts/fonts.css b/static/fonts/fonts.css
index 0991838..a295f43 100755
--- a/static/fonts/fonts.css
+++ b/static/fonts/fonts.css
@@ -10,25 +10,3 @@
         800 - Extra Bold (Ultra Bold)
         900 - Black (Heavy)
 */
-
-@font-face {
-    font-family: 'SweetSans';
-    font-style: normal;
-    font-weight: 400;
-    src: url('SweetSans-Regular.woff2') format('woff2'),
-        url('SweetSans-Regular.woff') format('woff');
-}
-@font-face {
-    font-family: 'SweetSans';
-    font-style: normal;
-    font-weight: 700;
-    src: url('SweetSans-Medium.woff2') format('woff2'),
-        url('SweetSans-Medium.woff') format('woff');
-}
-@font-face {
-    font-family: 'WT-Monarch';
-    font-style: normal;
-    font-weight: 400;
-    src: url('WT-Monarch.woff2') format('woff2'),
-        url('WT-Monarch.woff') format('woff');
-}
diff --git a/store/browser.js b/store/browser.js
index 69f1a22..d5443da 100755
--- a/store/browser.js
+++ b/store/browser.js
@@ -60,12 +60,12 @@ export const actions = {
             context.commit('FONTS_LOADING')
             await loadFonts([
                 {
-                    name: 'SweetSans',
+                    name: 'EB Garamund',
                     weights: [400, 700],
                 },
                 {
-                    name: 'WT-Monarch',
-                    weights: [400],
+                    name: 'Poppins',
+                    weights: [300, 400, 700],
                 },
             ])
             context.commit('FONTS_LOADED')
