Building the Casper homepage

Casper homepage

In September, I decided that it was time to take a break from client work. I would focus 100% of my time on my freelancing app, Cushion, and hopefully reach a point where I could live off its income.

One week later, however, I received an email from Gabe Flateman, CTO and co-founder of Casper. If you live in New York, you’re probably well aware of Casper because their subway ads are everywhere. In short, Casper is a mattress startup with emphasis on quality, affordability, and customer support.

Casper ad

Casper subway ads by Red Antler & Tomi Um

Typically, I would’ve stuck to the plan of going clientless, but Casper is an enticing client—I simply couldn’t pass up the opportunity to at least chat. If anything, this would allow me to work full-time on Cushion for even longer.

I met with Gabe and he filled me in on their plan to start offering pillows and sheets along with their signature mattress (not my typical client). To announce their new products, they needed a fancy new homepage.

I’ve worked on a few animated websites in the past, and that’s exactly how Gabe found me. These websites are fun because they give me the chance to experiment. I also do my best work under the pressure of their challenges and countless unknowns, like whether the website is even possible.

Casper sketch

“Dream Sandwich” sketch from Alex Malkin, Digital Experience Director at Red Antler

Gabe told me about their “Dream Sandwich” concept, designed by the creative studio, JaegerSloan. The bed would separate in mid-air and each product would float up the page as the user scrolls. Then, the products would float back down and land as a complete bed.

We discussed possible approaches, like scrubbing through a video or swapping out still images. Video is easy, but sacrifices quality and control. Stills are more flexible and higher quality, but at the cost of file size. Regardless of the direction we took, it was clear that this would be a real challenge.

I had experience animating with still images from my work on the FiftyThree Pencil page, where a hand holding a Pencil rotates as the user scrolls. That, however, was only a small section of the page using only a dozen images. The Casper website, on the other hand, would potentially be hundreds of hi-res images spanning the entire window.

FiftyThree Pencil website

The countless challenges raced through my mind as Gabe and I chatted—file size, performance, file size, image quality, file size, deadline. I could’ve walked away, but after brainstorming and talking through all the obstacles, I felt invested in the website—I wanted to be the one to make this special.

I accepted the gig.

I need to constantly remind myself of how fortunate I am to attract this caliber of client, and more importantly, that building websites even counts as a profession—let alone a valuable one. At any time, tides could shift and the industry could take a nosedive. It sounds far-fetched, but I was once a skilled Flash developer.

Gabe sent me a CodePen prototype they made for scrubbing a video with the scrollbar. CodePen and other web-based IDEs were completely foreign to me, so this was a first. I forked Casper’s prototype and added friction to make the scrubbing smoother. I was blown away by how easy it was to set up and share iterations. So much, in fact, that I decided to use it for the rest of the project.

Casper Codepen

Iterations in CodePen

These websites tend to go through dozens of iterations, so CodePen was the perfect tool for me to quickly make changes and get instant feedback from Casper. Whenever we decided to go in a different direction, I would simply fork the latest prototype and move on. This left me with shareable save points that I could easily link to.

After considering all of the potential issues with video, like aspect ratio and browser compatibility, we decided to ditch that approach. This was definitely for the best because if we were to discover a deal-breaker after shooting the video, we would be in a really sticky situation. By using still images, we would at least have some outs if anything went south.

The Gazelle camera crane photographing the Casper mattress

JaegerSloan was smart and shot each product individually—this gave us more control over scaling and positioning. They used a Gazelle camera crane on a green screen, which provided us with a smooth series of angles that we could select from. If I learned anything throughout this project, it’s that Casper does not mess around when it comes to big ideas.

With a tight deadline and no readily available assets, I had to make the most of my time. While JaegerSloan worked on touching up the images, I started coding a prototype using colored blocks as placeholders. This allowed me to focus on the timing, positioning, and feel of the animation before even thinking about actual images.

A prototype using colored blocks as placeholders

A few days later, JaegerSloan provided us with draft images for picking which frames we would need for the final animation. Because of the tight deadline, we didn’t have the luxury of touching up every single image from the photoshoot. And because of the concern with file size, we needed to know the frame rate that would require the fewest number of images while still feeling smooth.

With the FiftyThree page, I was able to keep it simple by loading a dozen images individually. With Casper, however, I’m dealing with hundreds of images, so the number of requests became a big concern as well.

Instead of loading images one-by-one, we needed to use sprite sheets—combining every frame of a product as one image. If we have 5 products on the page, the browser would only need to load 5 images with 100 frames versus 500 single-frame images. The file size would also be much lower because the images within the sprite sheet could share colors.

Casper sprite

A sprite sheet of Casper sheets

I wrote a script that takes a folder of images, compiles them into a sprite sheet, and optimizes the sheet to save even more on file size. The result is a single image and a CSS file of the background positions of the frames within the sprite sheet. In the Javscript, I simply change the class name of an element to display the correct frame.

The code I used to control the positioning and timing of the animation is step-based, similar to the system I wrote for Dropbox’s Carousel website. Each step has a duration and an array of items to animate. And each item has start/end values for each property (x, y, etc). The current step is detected based on the scroll position. The items then animate based on the scroll position within the current step. Everything is based on relative percentages, so if a specific step needs to be shortened or lengthened, I can increase the duration of that step and the animation will adjust itself.

A prototype using draft images

Now that we were using draft images instead of colored blocks, I was able to get a much better sense of the animation’s feel. It was exciting to see everything coming together—even as a draft. I tweaked the timing and positioning to smooth out the rough spots and shared the new prototype with Casper.

When we received the final images from JaegerSloan, it felt like Christmas. I had been working with the draft images for so long that I forgot that they were drafts—my brain learned to ignore their rough edges and color. Once I swapped out the drafts for the retouched images, everything instantly felt like a real webpage—no longer a prototype.

A prototype using final images

While I worked on the website, the Casper QA team performed user tests with each major iteration I sent them, rather than launching and hoping for the best. With the final images in place, they were able to discover a few difficult truths.

  • Users weren’t connecting with the room

  • Users didn’t realize that Casper was announcing pillows and sheets

  • Users thought Casper was introducing pajamas

With two weeks remaining before launch, these results were hard to swallow. We had to make some big changes, but fortunately, not all was lost. To make the room feel more relatable, Casper brought back the hero image with one of their lifestyle photos. This provided a more realistic image of a bedroom with more emphasis on the announcement copy. Instead of distracting the user with an animation right off-the-bat, the still image would give them time to digest the copy and realize that Casper now has sheets and pillows.

The rest of the page, including the animation, was more up-in-the-air at this point. Casper’s Director of Design, Huy Vu, and Senior Designer, Jarrod Barretto, focused on a new design. It would reuse the elements of the animation, but ditch the idea of the step-based animation.

Casper new direction

A sketch of the new direction

After the hero, the user would see the separated “Dream Sandwich” with buttons linking to each product. They would then scroll through the individual products before hitting the rest of the page. As the products move up the page, they would “rotate” with the scroll to create the illusion of 3D perspective.

I started on the new prototype and was blown away by how much code I was able to remove. I treated each section of the page as a self-contained block with its own scroll percentage. The items would move up the page like normal HTML elements, but the “rotation” would be determined by their independent position on the page. This approach cut the code to roughly 30 lines, down from over 600.

The final iteration

The final design immediately felt more like a webpage than any of the previous iterations, and I find the design much more effective than a complex animation—it doesn’t hijack the scroll or move elements against the grain of the page. If the user scrolls quickly from top to bottom, they might not even notice the rotating products, but once they do, it will wow them even more.

I spent the last week before launch moving the code from Codepen into Casper’s repo. Joseph Cortwabi, one of Casper’s front-end engineers, worked closely with Jarrod to fine-tune the hero across screen resolutions and orientations while Kei Sato, another front-end engineer, helped with the shop modules at the bottom of the page.

In the final hours, Betty Liao, Casper’s Digital Project Manager, tested a gnarly iOS7 bug for me while I attempted to blindly fix it (without the device). A few stressful minutes later, I merged my final pull request and called it a night. Casper launched the next day.

In the end, I’m thrilled with how everything turned out. The homepage fits that perfect balance between subtle and special without going overboard with animations. I had a blast working with the team and witnessing them build the rest of the website around my small contribution. I look forward to watching Casper grow, and I hope to hear from them again when they inevitably launch pajamas.

You can view the archived Casper homepage here.

Building the Carousel website with Dropbox

Carousel devices

A friend of mine and designer at Dropbox, Colin Dunn, reached out to me in January. He asked if I would mind him referring me to one of their project managers, Preston Hershorn, for an upcoming gig. Of course, I didn’t mind.

We spoke a few times on the phone, discussing a mystery project that needed a marketing website. I was fresh off of building the Pencil website for FiftyThree, and interested in building more of these single-page websites with a touch of something special. These websites allowed me to return to my roots of experimenting with code while also serving an actual purpose.

I flew out to San Francisco to work in-house at Dropbox for a week. On the first day, I sat in on a team meeting to review the state of this mystery project, named “Carousel”. A few team members provided an overview of the branding, along with its history. They demo’d the app itself, their original idea for the website, and storyboards for the upcoming video. It was impressive to see such a large-scale project represented by such a determined team. There was no question they all believed in Carousel.

While at Dropbox HQ, I worked on the mobile website, which would step the viewer through several views. A stack of photos would fall, arranging each photo on the device, to fill in the app’s content. Several transitions would play out, demonstrating the app’s main draw—sharing photos. The photos would then return to a stack and prompt the viewer to download the app.

Since these steps felt very clear-cut, I decided to treat each one as a “slide”. Instead of using a traditional scroll, and adding yet another moving part to the already active page, I locked it in place. I then listened for touch events and advanced to the next step with any vertical movement longer than a thumb’s radius.

The designer, Alice Lee, provided me with flats and we discussed possible transitions. I first used Chrome’s device emulator to test the website, but then moved to using an actual device. This helped in discovering a few key areas of improvement where we could tie the transitions closer to the gestures of the viewer. Since we were swiping up to advance, I wanted the content to feel like it was being pushed with the viewer’s thumb or finger—the logo would scale down in the direction of the swipe and the stack of photos would be pulled up from the bottom.

Originally, the stack of photos on the last slide returned to the bottom of the stage, but this felt unnatural, as if the photos were swimming against the current of the swipe. I reversed the positioning of the stack, placing them at the top of the stage, with the content below. Again, following the direction of the swipe, this adjustment really pulled the ending together. The last slide now appears to be the continuation of first slide.

I wrapped up the mobile website that week, with exception for a few content tweaks throughout the rest of the project. After returning home to Brooklyn, I started on the desktop version. Dropbox wanted a completely different experience from mobile, but they also made it clear they didn’t want a separate “” subdomain. Considering the mobile version used CSS for all of the transitions, I knew I would need to start from scratch with the desktop’s stylesheet. I ended up using the same HTML as the mobile version, but swapping out the stylesheets based on media queries on the stylesheet tags.

The original design of the desktop website used scroll-based breakpoints to trigger each transition. The text would follow one-to-one with the scroll and the device would remain fixed. This worked, but with the constant movement of the text, the viewer would be forced to switch focus between the two sides of the page. I switched the text to a fixed position and animated it in parallel with the device. This felt better, but there was a lot of waiting between transitions—and the wait would grow longer with the height of the window.

With only a couple weeks left, we decided to scrap the triggered animations and start over. Instead of relying on harsh breakpoints, we would track the animation with the scroll. To soften the feel, I took a page out of my Flash days and added friction to the scroll. This allowed the animations to ease into place without feeling so jarring. A few people at Dropbox looked at the website and felt the animations needed to snap into place better. At that time, they were a bit loose—you could easily scrub through the entire animation with a couple swipes on the trackpad.

I definitely didn’t want to return to the triggered approach from before, so I improvised. Since I was already using friction for a softer feel, I could simply increase the friction based on the scroll’s proximity to each lockpoint. In the code, I call these “speed bumps” and that’s exactly what they are. And, to make these speed bumps less apparent, I ease the friction based on the actual distance. This was enough to achieve the slick movement of the transitions while snapping each slide into place.

In the final week, there were several more revisions to the content. Initially, the desktop version had twice as many transitions, with each one split into separate parts. The second slide would swipe the screen up to portray a greater collection of photos. The third slide would transition into the conversation view with a fourth slide for easing the second message in from the bottom. We simplified these transitions by combining them, one by one, until we were left with three essential slides.

At launch, I let out a great sigh of relief. This project took a lot out of me because it consisted of countless technical challenges and several changes in direction late in the game. I’m happy with the end result, though. If we settled at any point instead of pushing through the difficult decisions, I think we would have been left with regret. Looking back, I’m incredibly grateful and fortunate that such a small gesture on Colin’s part, of putting my name in the hat, led to this collaboration.

You can view the archived Carousel website here.

Building the Mailbox website with Dropbox

Mailbox devices

While in-house at Dropbox, working on the Carousel website, the PM for Mailbox, Liz Armistead, caught a glimpse of my work on the mobile website. She leaned in my direction and asked about my availability—would I have extra time to also take on the Mailbox website? Over the years, I’ve realized that I work best under pressure, but two major projects with the same deadline is floor-of-the-ocean pressure. Continuing a pattern of complete disregard for personal health, I said yes.

The design of the website took a number of turns before I was given the green light. Morgan Knutson led the final version, landing on using videos to demo the many gestures within the app. Upon scrolling the website, the videos will autoplay once they come into view. When a video falls out of view, it pauses. It’s a straight-forward approach, but very effective, showcasing exactly how the app works without hitting you over the head with effects.

The responsive side of the Mailbox website is all about replacing content. Reflowing down to the tablet breakpoint, the website first swaps out all videos for stills. As it narrows to the phone breakpoint, icons replace the stills and the top image is replaced with the Mailbox logo. The most complex part of the responsive implementation would definitely be the line of devices at the bottom of the website—the phones fit perfectly together, but at smaller scales, the laptop is too much. Because of this, I move the laptop below its copy when it hits the phone breakpoint.

Though the Mailbox website wasn’t as ambitious as the Carousel website, I feel its strength lies in its restraint to not go over the top. Because the app’s ease and simplicity is its main appeal, the goal of the website is to showcase Mailbox’s key gestures and get users right into the app.

Book Covers, Model Airplanes, and My Dad

This is an extended transcription of my CreativeMornings talk. The theme was “Make,” and instead of speaking about my own work, I decided to talk about my dad, his work, and how he turned me into the maker I am today.

Dad covers

My dad is a freelance book cover illustrator. He started right out of college and has been pushing out covers ever since—about 37 years now. If you’ve ever been in a book store, you’ve seen one of his covers. If you’ve walked past a cardboard box on the street with a stack of books in it, you’ve seen one of his covers.

For the first 20 years, he painted each and every cover. He would take a few reference photos with his polaroid land camera and spend the following month painting with acrylics on a gessoed masonite board. Upon finishing, he would slip the cover in a Fedex box and ship it to his publisher in New York, hoping it would arrive in one piece. Now, my dad uses Photoshop. He can start a cover on a Friday and email it to his publisher on Monday.

Since my dad works from home, my siblings and I grew up watching him illustrate these covers. He greeted us in the morning from his studio and wished us goodnight from his studio. My dad burns the midnight oil better than anyone I know, which explains why working a 14-hour day sometimes feels normal to me. Some nights, we would work alongside each other in his studio, watching any given Philly game, with the audio from the local radio broadcast.

Dad polaroid

Because my parents live in the small town of Macungie, PA, my dad would ask us to pose for him rather than hiring models. At the time, there was nothing special about this—it was just part of our childhood. I would spend a few minutes looking like a boy without a family and he would pay me $20, which I could use towards my next video game. To a kid, this was a steal.

Dad Lizzy

Posing for my dad was rarely planned—he would just call us over from his studio and ask us to spare a few minutes. The shoot often involved my mom holding a piece of foamcore as a makeshift reflector or picking out the correct attire for us. We would goof around, treating this like our own version of dress-up.

After holding still for a few shots, trying to make each other laugh while not laughing ourselves, we would go back to whatever we were doing. Then, several months later, we would find ourselves on another cover. This felt like magic. My dad doesn’t need green screens or professional lighting—he can make a cover out of anything.

Dad sketches

To start a cover, one of my dad’s publishers would send him a sketch. The sketch was often more of a scribble than anything descriptive, so they would follow up the sketch with a call. The art director would chime in and provide a sketch of their own. This would typically be more elaborate, but still difficult for most to interpret. My dad had no problem, though. He would take these sketches and produce a cover with the exact image his publishers had in mind.

Because of this, his publishers would consistently return to him when they needed the job done right. This had a major impact on my own work ethic and the kind of relationships I try to build with others. If you establish yourself as someone who can always finish the job with a level of quality beyond expectations, you will never have trouble finding work.

Dad airplanes

Though my dad is at the top of his game with book covers, his true passion lies with model airplanes. When he wished us goodnight from his studio, he usually had an airplane in front of him rather than a cover.

He started building airplanes at the age of eight, having learned from his dad. Back then, video games and computers didn’t exist (*gasp*), so models were a common hobby for the average kid. Hobby shops are rare these days, but if you can find one, there’s a good chance it will have a section for model airplanes. But, my dad doesn’t just build his airplanes from kits. He actually constructs them from scratch, and each one is an exact replica of an existing airplane from a previous era, mainly WWI and WWII.

Dad bones

A single airplane will take anywhere from two months to a year to complete. Each one is constructed from several sheets of balsa wood that are cut down to size and glued in place. The airplane is then wrapped in tissue paper and decorated with all the details of its original design. As a kid, I witnessed the daily progress of every plane—each one built as separate parts, then pieced together at the end. Now, I see progress in months, when I’m able to visit home. I’ll catch him either starting a new plane or putting the finishing touches on one I’ve seen only once or twice before. Nevertheless, he’s always excited to show me his latest creation.

Dad flying

Building model airplanes requires enough work on its own to be considered a full-time job, let alone a hobby, but my dad isn’t the type to just shelf a piece of work and call it a day. Every airplane he builds can also fly as well as it looks. In his eyes, what’s a plane that can’t fly? He takes this very seriously, too, to the extent of mowing only a portion of his backyard, so the rest could remain a soft “landing strip” for testing and minor tweaking. He calls it “Hallman’s Meadow”.

Dad winder

As you might expect by now, these airplanes aren’t RC-powered. Believe it or not, they fly on rubber band power. Inside each airplane is a greased rubber band running from a hook in the back to the propeller in the front. The length of the rubber band depends on the size of the airplane, with some reaching as long as several feet.

Winding one of these airplanes by hand would be very tiring, not to mention time-consuming, considering a single flight requires several hundred winds. Instead, my dad uses a makeshift winder. This MacGyver-esque device can wind ten times faster than using your hand. It also comes equipped with a calculator that keeps track of the number of winds, using a magnet that is literally taped to the crank. Surprising no one, you can’t buy these—he knows a guy who makes them.

Dad mass launch

My dad also competes as a member of the Flying Aces Club. He drives to either Geneseo or Wawayanda in upstate New York and flies against dozens of other “pilots”—each of whom has been building and flying airplanes for decades. They spend a few days competing, but also discussing their craft, process, and experiences from the past year’s build. Having been to several competitions as a kid, I can tell you that each one of these fliers wants nothing more than to share what they know and celebrate each other’s flights.

At the age of 59, my dad is considered the young gun among the other fliers, with most of them old enough to be his dad, but as a 5-time grand champion, he carries a strong reputation.

Dad canopy

Along with constructing the actual airplanes, my dad also builds tools to help him make specific parts of each plane. One of these tools, he calls a “canopy vacuformer”, is a contraption that forms the canopy of an airplane from a single sheet of plastic.

My dad places the top-half of the tool in his oven with the plastic securely held in place. The plastic is heated at a temperature between 300-350 degrees, until malleable. Then, he removes the plastic from the oven and places it on top of the balsa mold of the canopy. With the family vacuum, he suctions the plastic down to perfectly fit over the mold, forming the canopy of the airplane.

As a kid, growing up watching this process, I didn’t think twice about it—this was just how you build the canopy for a rubber band-powered model airplane. How else would you do it? Now, I truly appreciate the creativity and resourcefulness on my dad’s part to even think of a process like this, utilizing household appliances.

Dad detail

The attention to detail my dad puts into every airplane is incredible. His obsession with even the most minute details is one that I often see in myself. Every time he reveals his latest workboard of airplane parts to me, I soak in every consideration he shares and admire the precision of each piece. Everything is always perfect. In my own work, I want people to feel the way I do when I see his work.

Dad process

While constructing an airplane, my dad takes the time to document the entire process, which is why I do the same with my own projects. I love seeing how each part comes together and how it contributes to the final product. Seeing this documentation as a kid, I learned its importance in telling the story of each airplane. I could witness the struggles, decisions and sacrifices that lead to the end result, making every airplane so much better.

Dad Mitsubishi

My dad’s airplanes are more than just airplanes. Each one is a piece of art and an extension of my dad. Though these planes don’t really matter in the grand scheme of things, they mean the world to him. He taught me everything I know about craftsmanship and what it’s like to be truly passionate about our work. And, I’m passionate about my work because of my dad.

Building the Pencil Page with FiftyThree

Pencil desktop homepage

FiftyThree has always been an inspiration of mine—their dedication to craft is admirable. When they asked me to work with them on the product page for their first piece of hardware, Pencil, I jumped at the opportunity.

The project started out with a meeting at the FiftyThree office—a beautiful loft in Tribeca. KJ Chun walked me through the design he prepared for the page and Ian Curry showed me a few interaction prototypes for the fancier sections. I wore the serious professional face, but on the inside, I felt like a kid on Christmas Eve, and Santa was giving me a sneak peek at all my presents.

The Pencil product page was my first foray into scrolling effects—no pressure. I’ve never been a fan of scrolling effects, mainly because most implementations hijack the scrollbar. With that in mind, I coded it in a way that would maintain the integrity of the scroll, while still surprising the viewer. I wanted the parts to reveal themselves as if you could feel them sliding out. The animation works when resizing the window as well, so if you drag from the bottom, you can actually pull the pencil apart.

The “Inspired Form” section was originally designed to rotate the pencil with the horizontal tracking of the cursor, but it felt unnatural. If someone were to scroll the entirety of the page, they might miss it, as it required them to stop and move their cursor perpendicular to the scroll. As an alternative, I experimented with scrolling to rotate the pencil, so everyone would discover it. The pencil starts by facing left and rotates a full 180 degrees, exposing the front of the pencil half-way through. Luckily, this accomplished the natural feel I’m always aiming for in my work.

Pencil desktop

The page is fully responsive—even the scrolling effects. The FiftyThree team was open to suggestions on how to reflow the content across each breakpoint. I took a few cues from their existing product pages for consistency, but also tried a couple new directions of my own.

Pencil mobile

After a long week, I handed the code off to Tara Feener and Scott Olson, who prepared it for production. Not knowing when it would launch, I continued with my other work, but kept an eye on the site. A few Twitter mentions started to roll in and I knew it was live. I couldn’t be happier with the end result, as well as the response. It was an absolute privilege working with the FiftyThree team and tagging along for a small part of their adventure.

Washing the Dishes and Other Moments of Thought

Running water

When I turned seven years old, my family moved from the city of Allentown to the suburbs of Macungie. Our house was one of the first built in the development, with a quarter-acre backyard consisting of only dirt and rock. My mom spent most of her time transforming it into a typical yard in the suburbs—full of healthy grass and tall trees lining the perimeter. One day, she found a flat rock the size of a seat and placed it upon one of the tree beds. Mom called that our “thinking rock.” Whenever we needed some alone time to think, we could walk to the back of the yard and sit on it. I still remember it for that purpose. To anyone else, it is a rock, but to my mom, it is a place for thinking.

A couple years ago, I threw out my back. This wasn’t the first time I threw out my back, but it was the first time the pain lasted more than a day—eight months to be exact. I tried everything from foam roller exercises and spine alignment tools to chiropractors and physical therapists. Losing hope of recovery, I decided to try acupuncture. Twice a week, I would spend 20 minutes lying face down with a dozen needles strategically placed in my back. What was first considered to be a last resort for relief turned into one of my most precious times for thinking. I found myself relying on this time to clear my head and address anything that was plaguing me that week. I would leave each session feeling rested and motivated to seize the day.

Now, I do my best thinking while washing the dishes. To most, it feels like a chore, but I consider it quality thinking time. My hands are busy, I feel productive, and I have no mental blocks—my thoughts flow like the water from the faucet. Those 15 minutes of constant, mindless activity provide the perfect environment for deep thought. I think of all that needs to be done for the week ahead. I think of anything causing roadblocks in my work. I think of ways to improve my current workflows. As I think of all these things, I keep a mental to-do list. And when I finish washing the dishes, I feel a small sense of accomplishment—enough to leave me eager to tackle the next item on the list.

These moments are important. Getting away from the computer and away from our work sometimes feels like the only way to move past mental blocks or obstacles. We’ve all been there, sitting at the computer, staring at nothing, thinking of nothing. Hours might go by before you realize you haven’t accomplished anything at all. This happens to me constantly and it tears me apart. Internally, I know I should be full-speed ahead, but I can’t get into it. The key is to find your moment of thought, realize its value, and lean on it when you need to take a break.