This post is dedicated to talking about one of my recent projects, Mindfull World. To note, this project is not yet complete in its vision, but is at the time of writing this, at a phased stopping point.
Because I ❤️ process, I’ll talk about that and also get include the HTML and CSS for parts of the project along the way.
First, there was…
While I wish this project involved some of the above (I guess it’s never too late?), it started after I discovered CSS loaders. I was playing around with them and decided to include one on Playfull World when realized I could nest CSS loaders inside one another.
Sweet, right?!
Phase I
I worked on it for a couple of hours and put it on Playfull World.
I left it up there for a week.
And another week.
HTML:
<div class="loader1">
<div class="loader2">
<div class="loader3">
<div class="loader4">
<div class="loader5"></div>
</div>
</div>
</div>
</div>CSS:
.loader1 {
border: 10px solid #f3f3f3;
border-top: 16px solid black;
border-right: 16px solid black;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin1 8s linear infinite;
}
@keyframes spin1 {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loader2 {
border: 5px solid #f3f3f3;
border-top: 8px solid black;
border-left: 8px solid black;
border-radius: 50%;
width: 80px;
height: 80px;
animation: spin2 4s linear infinite;
}
@keyframes spin2 {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loader3 {
border: 2.5px solid #f3f3f3;
border-top: 4px solid black;
border-right: 4px solid black;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin3 2s linear infinite;
}
@keyframes spin3 {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loader4 {
border: 1.25px solid #f3f3f3;
border-top: 2px solid black;
border-left: 2px solid black;
border-radius: 50%;
width: 20px;
height: 20px;
animation: spin4 1s linear infinite;
}
@keyframes spin4 {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loader5 {
border: .625px solid #f3f3f3;
border-top: 1px solid black;
border-right: 1px solid black;
border-radius: 50%;
width: 10px;
height: 10px;
animation: spin5 .5s linear infinite;
}
@keyframes spin5 {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}Phase II
Then I just couldn’t stop thinking about it. I would go back and stare at it. 🤫
Eventually, I realized that’s because it was relaxing to watch and I felt that there were some unexpressed facets of the idea.
So what if it was bigger and modeled after a seashell? Like this:
Then the ideas cascaded from there:
- Seashell->ocean->blue. What if it was blue?
- Because I was modeling it after something in nature, I wanted it seem alive. What if it pulsed?
- What if the pulse was at a cadence that was comfortable to breathe along with?
- This seashell has warm pinks. What if there was a pink glow that accompanied the pulse?
- The ocean makes sounds – why not create a song for it? (The tempo [BPM] of this song matches the pulse cycle in the visualization.) Click to listen to the song on my Soundcloud.
I took out the song, but the rest of the ideas stayed. I called in Breathe.
I hosted it on my portfolio and brushed my hands off. I done with the seashells and the ocean and the math and all that.
HTML:
<div class="singularity">
<div class="loader1">
<div class="loader2">
<div class="loader3">
<div class="loader4">
<div class="loader5">
<div class="loader6">
<div class="loader7">
<div class="loader8">
<div class="loader9 gradient">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>CSS:
/* animation stylings */
@-webkit-keyframes glow {
0% {
-webkit-box-shadow: 0 0 13rem #ffdcdc;
}
25% {
-webkit-box-shadow: 0 0 34rem #e4a0f5;
}
50% {
-webkit-box-shadow: 0 0 89rem #ff77a7;
}
95% {
-webkit-box-shadow: 0 0 21rem #ffdcdc;
}
100% {
-webkit-box-shadow: 0 0 13rem #fff;
}
}
}
@keyframes glow {
0% {
box-shadow: 0 0 13rem #ffdcdc;
}
25% {
box-shadow: 0 0 34rem #e4a0f5;
}
50% {
box-shadow: 0 0 89rem #ff77a7;
}
95% {
box-shadow: 0 0 21rem #ffdcdc;
}
100% {
box-shadow: 0 0 13rem #fff;
}
}
@-webkit-keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.1618, 1.1618, 1.1618);
transform: scale3d(1.1618, 1.1618, 1.1618);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.1618, 1.1618, 1.1618);
transform: scale3d(1.1618, 1.1618, 1.1618);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse;
}
/* general loader stylings */
.singularity {
position: fixed;
margin-top: 100rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* loader circle stylings */
.loader1 {
border: 46.943rem inset rgb(145, 212, 245);
border-radius: 50%;
width: 487.687rem;
height: 487.687rem;
animation: spin1 487.687s linear infinite, pulse 8s ease-in-out infinite, glow 8s linear infinite;
background: rgb(255, 255, 255);
background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(215, 240, 252, 1) 53%);
}
@keyframes spin1 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loader2 {
border: 29.013rem inset rgb(98, 186, 221);
border-radius: 50%;
width: 301.414rem;
height: 301.414rem;
animation: spin2 301.414s linear infinite;
}
@keyframes spin2 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loader3 {
border: 17.932rem inset rgb(71, 164, 201);
border-radius: 50%;
width: 186.288rem;
height: 186.288rem;
animation: spin3 186.288s linear infinite;
}
@keyframes spin3 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loader4 {
border: 11.083rem inset rgb(42, 145, 186);
border-radius: 50%;
width: 115.135rem;
height: 115.135rem;
animation: spin4 115.135s linear infinite;
}
@keyframes spin4 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loader5 {
border: 6.85rem inset rgb(24, 129, 170);
border-radius: 50%;
width: 71.159rem;
height: 71.159rem;
animation: spin5 71.159s linear infinite;
}
@keyframes spin5 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loader6 {
border: 4.234rem inset rgb(13, 115, 155);
border-radius: 50%;
width: 43.98rem;
height: 43.98rem;
animation: spin6 43.98s linear infinite;
}
@keyframes spin6 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loader7 {
border: 2.617rem inset rgb(6, 106, 145);
border-radius: 50%;
width: 27.182rem;
height: 27.182rem;
animation: spin7 27.182s linear infinite;
}
@keyframes spin7 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loader8 {
border: 1.618rem inset rgb(0, 98, 137);
border-radius: 50%;
width: 16.8rem;
height: 16.8rem;
animation: spin8 16.8s linear infinite;
}
@keyframes spin8 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loader9 {
border: 1rem inset rgb(0, 55, 76);
border-radius: 50%;
width: 10rem;
height: 10rem;
animation: spin9 10s linear infinite;
}
@keyframes spin9 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.gradient {
background: linear-gradient(-45deg, rgb(144, 213, 247), rgb(144, 213, 247), #ffdcdc, #ffdcdc);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
Phase III
However, I was not done with the song, which had prompted more thinking about movement.
So I created a counterpart to Breathe, called “Move.”
I made only a few modifications – just the color palettes, shapes (in animation, square characters project solidity and strength, a more fitting shape than circles for something dedicated to movement), and the timing of the pulse cycle.
It had more energy.
This was something I could look at and feel inspired to start moving my body.
Once again, I hosted it on my portfolio and brushed my hands off. I was fairly happy with it and really done looking at the pink.
Phase IV
After a couple weeks, I came back to Breathe and Move. It bothered me that they were both floating out there on my portfolio without a common landing page, despite being so related to each other.
I started thinking about what they had in common and came up with this list:
- Mindfulness
- Presence
- Connection
This image (essentially as it appears below) came to mind, so I created very first iteration of Mindfull World.
And that brings us to today and the live version of Mindfull World.
To wrap things up, some parting thoughts…
Final Thoughts
Flow
I really loved making Mindfull World because I got deep into the creative flow state. All of the hours flew by. I am passionate about mindfulness, being connecting to one’s body, and art – this project was a combination of so many of my interests. In case you haven’t heard of the flow state:
[The flow state is a] trance-like altered state of total absorption and effortless concentration…
BBC Article
“There’s this focus that, once it becomes intense, leads to a sense of ecstasy, a sense of clarity: you know exactly what you want to do from one moment to the other; you get immediate feedback. You know that what you need to do is possible to do, even though difficult, and sense of time disappears, you forget yourself, you feel part of something larger. And once the conditions are present, what you are doing becomes worth doing for its own sake.”
Mihaly Csikszentmihalyi, TED Talk, 2004
That TED Talk is amazing, as is Csikszentmihalyi’s book. Check it out on Goodreads.
Agile
Secondly – I applied concepts to this project from the Agile Manifesto! Who knew that was possible?! There were so many directions I wanted to go with Mindfull World. Most ideas, I set aside for the future so I could release something in the present. To achieve a more Agile approach, I:
- timeboxed my work
- created goals for each increment of work
- focused on delivering and releasing
- practiced incremental and iterative development
- kept coming back to my favorite Agile principle: Simplicity–the art of maximizing the amount of work not done–is essential.
Sometimes, planning is not great
Lastly – self-imposed creative parameters/themes/rules are useful… but only to an extent. I spent several hours trying to make the colors fit within the mathematical schema I had planned for the entire project, and it just didn’t work out. I could’ve saved myself a lot of time (and been kinder to myself) if I had been a less rigid about making my creation fit into these parameters I had established for myself and the project.
Sometimes, it is better to just let go.
And breathe.
🍵
Chloe Tucker 