DEV Community: Peter Bokor

From a Day to 17 Minutes: How We’ve Dealt with Slow Build Times

Peter Bokor — Fri, 08 Mar 2024 15:26:30 +0000

The problem of a long deployment process isn't just the waiting; it's how this waiting seeps into every part of the development process, fundamentally changing how teams work. Test builds are less frequent and bigger in scope. This leads to slower turnaround times on feedback and testing. Release cycles are long and there is less space for experimentation and prototyping.

We experienced this in full fashion with 8 hour deployment times with a decent amount of manual work. Here's how we finally took action to significantly reduce the time it took.

Common Pains of Shipping an Electron App

acreom first started as a web app and deploying it was simple. Only after we have decided to support other platforms by creating an Electron version, we saw that things started to move much slower.

Distributing desktop versions of our app became a tough and tedious task. We would spend an entire day just getting the versions ready for release. It was not only time-consuming, but also highlighted several issues we faced, such as managing different platform requirements, and ensuring consistent performance across all of them.

Building the Frontend for Different Operating Systems

For the frontend part of our app, we use Vue+Nuxt. However, when we work with Electron, we don't use Nuxt's feature for server-side rendering. Instead, we build the frontend as a single page app, which means it's made up of static files like HTML, CSS, and JavaScript. It's important to note that we create a separate build for each operating system because there are some differences in how the app works on each one, such as the way users log in, deep links, and file management.

We are also building a tiny executable called acreom-assistant that is running a local language model for parsing dates. This executable is packaged with electron. You can learn more about how we ship it.

App Signing and Distribution Across Different Platforms

To make sure our app runs on Windows without triggering the SmartScreen warning, it has to be digitally signed. This process involves getting a certificate, which comes on a physical USB token (a USB drive with a private key on it). These tokens are bought from certificate authorities and cost around $300 a year. Because of this, the app's build process needs to happen on a computer that has this USB token plugged in, which we ended up doing manually on one of our developer's Windows computers.

For macOS, to avoid users having to manually allow the app in the Privacy & Security settings, the app must also be signed and then notarized by Apple. Notarization requires an Apple Developer account, which costs $100 annually. Fortunately, we had an old MacBook Pro that we dedicated to the tasks of building, signing, and notarizing the app.

When Apple released computers with the new M1 chips, we had to adapt again. We added another MacBook to our setup because we use ZeroMQ for communication between the Electron app and the acreom-assistant, and ZeroMQ has some native bindings that required adjustments for the M1 architecture.

Linux was a bit different; it was the only platform for which we set up the build and distribution process to run automatically through GitHub actions from the beginning. This approach for Linux was much simpler compared to the manual processes required for Windows and macOS, making it our "golden" platform in terms of ease of deployment.

Sharing Builds: Adapting to M1 Challenges on GitHub

The last step for each platform's build process is to upload the app to our GitHub releases repository. We automated this step from the beginning, but when we started creating builds for the new M1 chip Macs, we had to add a manual step. This involved merging files needed for the auto-updater to work with the M1 builds.

Making the Dev Team Happy with Faster Deployments

Originally, it took us a whole day to get the builds ready for users. We had a dedicated machine to run the non-automated build, then we had to upload the builds to a shared folder, and send each other messages that the build was done. Repeating this many steps made the whole process painfully slow. That’s when we started with automation and moving the pipeline to the cloud, which didn't work out that well at first.

Automated Internal Builds for Testing

We ship our products across multiple platforms. This includes web, desktop (like Windows, MacOS, Linux), and mobile devices (iOS and Android). We use the same steps for each platform, using continuous deployment to share our work with our team and the users.

Every time we add a new branch, GitHub Actions automatically makes an inside version of our app and puts it in a Google Cloud Platform bucket, which the team has access to and can try them out. Each feature has a specific Discord Forum, where we discuss and explore ideas.

Quick Beta Builds on Web

Our approach for web apps mirrors our desktop apps. We deploy each branch to a unique URL (e.g., [branchname].preview.acreom.com) using Netlify. We share some early versions of our projects hosted on Netlify with our Discord community. To protect user data, these test builds connect to a staging backend and database, instead of the production environment. While they aren't fully ready for release, they are prepared for users to explore, envision how they could use them, and share their feedback on Discord.

Impact on the Way We’re Building

Having this in place helped us tremendously iterating on our product. To show a real example after all the improvements: We knew there was something wrong with our sidebar so we've made an effort to improve doing a series of explorations with clear goals. We did 4-6 builds within 2 weeks, iterating on various parts. We explored and discussed what worked well and what didn’t. During that time, we have learnt everything - tradeoffs and consequences of decisions, so that we could confidently ship a good thing. If deployment time would take us day a week, our team couldn’t be focusing on solving user problems. We’ve talked about some of our learnings in common mistakes of building a productivity tool. But it also resulted in some unexpected benefits.

More Demos Over Discussions

Faster deploy times helped us rediscover an old mantra - show, don’t tell. Rapid prototyping and iterating on the end result is the best way to explore ideas. We don't have to spend hours talking about ideas in meetings without anything concrete to look at. The prototypes we do are often very basic and just good enough to communicate an idea, even if some parts are broken. They also encourage us to take action. It's hard not to try something when it doesn't cost much, while learning a lot from it. If we can build something in a day, we don't spend too much time talking about it. Combined with our team local-first approach, it results in much faster shipping times.

More Options to Choose From

Having multiple options and ideas makes it easier to pick the best one. Rapid prototypes leave you with a catalog of possible solutions clearly demonstrating its pros and cons. After that you have a rough understanding of costs and tiniest details of the implementation.

Targeted User Feedback

Shipping things quickly means you can share more with your users. Keeping in touch with your users is key to showing how you are solving their problems. Not everyone will test your prototype, but somebody will be interested to try out and help you to shape it. Talk to people, show them how you're solving their problems, and you might end up with a group of fans willing to help you.

by Adam Pavlisin & Slavo Glinsky
➤➤➤ https://acreom.com

The Offline-First Sync

Peter Bokor — Fri, 05 Jan 2024 14:53:50 +0000

Transferring data between devices is a common feature these days. Most apps you use everyday implement some kind of mechanism for syncing information between the app and the server it's connected to, enabling instant access, no matter where you connect from.

Syncing gets difficult the moment you make your app offline first. Your data, including all changes made on a different device, must be accessible offline.

One of our core values is to make your knowledge base available no matter the system you use. We've specifically tailored acreom to work primarily offline, with sync being just an extension for our offline-first system. No matter where you access from, whether using a web browser, mobile, or desktop apps, your data is primarily stored on your device and only then synced to your other devices. This ensures that you always own your data.

Offline-first sync comes with its own specific problems that pile above all the issues of other sync solutions. Engineers at Linear had an insightful talk about the problems and workings of a similar sync solution and so did Figma. We have decided to base our sync engine on a similar concept, with some interesting modifications.

Offline first

Before we dive into how the sync extension works, let’s start with covering the offline workings of acreom.

In most cases, offline-first apps store data either in a local database or directly on a disk. Internally, acreom uses indexedDB. Each entity modification creates a change object that is saved in the Changes Queue. A change describes what exactly happened to an entity. It contains the ID of an entity, the table it belongs to, the type of the change, and all the modifications. To make the sync work, three types of changes are used - create, update and delete.

{    
    key: <uuid>, 
    type: 2, // 1 - create, 2 - update, 3 - delete
    table: “documents”,
    modifications: {
         …
    }
}

Change objects in the queue are thrown away the moment they are processed. The change queue allows multiple processors to consume changes. In our case, there are two: a Cloud processor that sends the change to the server, and a local file system processor that writes the data to the filesystem. Additionally, search indices are updated and any 3rd party apps are notified of a change if necessary. All of these are running as workers on separate threads.

Note that this process is invisible to the user. The frontend layer will update the data optimistically and instantly for a seamless experience.

Sync

The sync protocol is initialized when you log in. It establishes connection to our sync server, fetches all already synced data, and registers websocket listeners.

Syncing between devices

Websocket connection enables real time sync of data between different devices. acreom protocol communicates with the sync server in two ways:

The protocol takes changes on entities marked as syncable and sends them to the sync server using REST. It also fetches incremental changes on each app startup, ensuring the data present in the app is always up to date.
The second part of the communication is based on websockets. In case you have multiple devices online at the same time, changes are sent to devices using websockets, resulting in the devices getting the updates in real time.

All changes that are synced are grouped by the entity. If you edit a single entity multiple times in a row, these changes are grouped into a single change object.

Coming online

The same approach is used when you do some work offline, and then (when online), try to sync. Each change gets saved separately and is resolved into a single change object right before being synced. Data is therefore synced almost instantly, no matter the changes you've made while being offline.

The backend

The server side of the sync is quite simple: the sync server receives requests from acreom and compares the entity received to the one stored in the database. If the entity received is a newer version of the entity stored, it is saved and propagated to all online devices using websockets. If it’s not, the change is discarded. All devices that are not online will fetch the latest state from DB when they come online.

Conflict resolution

The current conflict resolution of the sync is "latest version wins". We plan on bringing CRDTs and transactions to replace the existing implementation alongside the collaboration later this year.

Handling network states

The biggest challenge we've faced was not the synchronization itself, but the management of the synchronization state. Disconnecting the protocol (e.g. when acreom goes offline, when there are connection issues on our backend, or when you lock your screen), turned out to be a bigger challenge than we thought it would be.

acreom is an electron app, so we rely on solutions available for the web. Electron window has a listener for online and offline events, but they are not reliable all the time. When you go offline but stay connected to the wifi, the listeners won’t fire and the protocol continues sending requests. This results in requests not going through and protocol getting stuck. Same goes for putting your pc to sleep. Proper handling of online/offline state became a priority.

While working on the mobile apps, we've noticed that iOS had a great offline detection. We've decided to look into it and use the same solution. The solution boils down to pinging different DNS servers in a few second intervals. The pinging is done after a request fails because of network error, or an offline event is received. After the first successful ping, the protocol tries to reconnect, but if it fails, the process is repeated from the first step Upon success, acreom protocol fetches all data that changed since last sync from the sync server, applies local changes on top of the newly fetched data, and syncs local changes to the sync server.

Takeaways

While building the sync protocol, we've obtained a few key insights, which helped us iterate to the right solution.

Managing sync state is key. Knowing when to sync and when not to sync will make your life much easier. Being able to rely on knowing when you are online and offline takes a big chunk out of the sync protocol complexity.
When syncing data in a "last change wins" kind of fashion, some scenarios are not worth solving. You won’t solve the problems that come with it completely and the minor gains are worth it only on paper, users won’t notice much of a difference.
Merging changes in text without CRDTs or transactions and without knowing the chronological order is not worth it. If you were to keep all the changes, just go with CRDT like Y.js and avoid implementing solutions from scratch.
It’s better to not sync one update than not sync anything at all. If you have issues on the backend with saving a certain entity, it's better to skip a single update and let the user know about it, than to stop the whole sync. Yes, you can fix the sync server, but the user can lose their unsynced data in the meantime, for example from changes that happened on other devices.

➤➤➤ https://acreom.com

Lessons From Implementing Themes: Design & Engineering Perspective

Peter Bokor — Thu, 04 Jan 2024 08:34:55 +0000

Introduction

One of the most extensive and challenging projects we've tackled involved a significant overhaul of our CSS. We're talking about refactoring and deduplicating the CSS of over 400 components.The end goal was to introduce a light theme into an existing codebase built with Vue.js and Nuxt.js. This journey was full of learnings, and we are excited to share them with you from the perspectives of both a designer and a developer.

Starting Small - Proof of Concept

Designer: Unlike most of the apps, acreom started dark. We knew we would love to introduce a light theme one day, but for a long time, our priorities were elsewhere.

Before we’ve actually started editing the codebase, we’ve built a light theme skeleton of one the screens. It served both as a proof of concept, and also as a way to explore the possibilities of our current color palette. It was our main aid when defining the right color hierarchy.

From the single proof of concept screen, we transitioned to higher fidelity details, while constantly tweaking the colors. After having a base structure nailed down, we’ve jumped into the first component: a dropdown. What led us to more detail. What makes dropdown work in light and what in the light theme?

Dropdown is often the highest level of hierarchy, so it needs to stand out on various backgrounds. To make that

Dropdown on background without appropriate shadow.
on dark background you need to add an make component stand out from the background, inner shadow with lighter color will do that.

It took multiple iterations to match the visual / color hierarchy, define a visual language we want to use, and explore what works and what does not.

Developer: Once we had our first prototype in design, we began by implementing a single component - dropdown. Some questions we wanted to answer with this experiment were:

Do we use SCSS variables or CSS variables?
Do we define variables in component files or in one global config file?
How do we “toggle” the actual theme?

Our codebase is written in Vue and 99% of our components are written as single file components - html template, typescript logic, and styling in single file.

First prototypes defined the variables as SCSS variables saved in the component file.

Component:

App root:

While this approach works it has several issues. First, saving variables for each component is not scalable in the long term. Second, there are patterns that repeat across the app so we don’t need to define the same colors each time. Third, the logic for applying theme color based on class in each component adds a lot of unnecessary code, plus adding more than one theme requires you to rewrite this everywhere.

After several iterations and experiments we have ended up with the following implementation:

Variables:

Theme files:

Component:

We ended up with a mix of SCSS and CSS variables. We could have gone with CSS variables only, but parts of our codebase, where themes are not relevant, still use SCSS vars. We have created a theme file for each theme. The theme file has all the variables from the app, similar to VS code or Sublime text theming. Adding a new theme is just a matter of duplicating existing theme file and updating color values. These variables are inserted to the :root css scope by changing the class (theme-dark / theme-light) on the root component.

Once we did this with a few more components, we were comfortable to go ahead with this approach.

Establishing Naming Conventions for CSS Variables

Developer: As rumour has it, the world of computer science has two hardest problems: cache invalidation and naming variables.

For our theming task, we have established a systematic approach for naming CSS variables, which proved to be crucial.

Our formula was straightforward, yet effective:

--{component}-{type}__{state}

For instance:

This naming evolved organically as we refactored the application, ensuring consistency and ease of understanding across our CSS. It made our theming process a whole lot smoother.

Designer: Continuously, we’ve updated each of the core components listed below separately:

Colors, Buttons, Dropdowns, Select Menus, Dialog Windows, Tooltip, In app Notification, Checkbox, Switch, Segmented Picker, Editor (Bubble menu, inline components, etc...)

We’ve used various colors while tweaking the components. The current color scheme stopped working, when the underlying color of the app changed from a dark one to a light one, so we had to introduce new accent colors. Great resource to inspect is apple mac os figma template by Joey Banks, where you can inspect the difference, so you get an idea how to start moving. Video of acreola was also a good resource to grasp that challenge.

We’ve also added opacity to colors. It is a nice trick to provide a hierarchy later on. Instead of using #fff or #000, we’ve used color from our color palette to respect a hue. Blue Grey 500, has a variation with alpha channel 16% and 32%. Bringing an opacity color to our theme allows our developers to move faster constantly without giving it an extra thought. Plus it looks cool.

Prioritizing Function Over Form in Early Stages

Developer: We learned that it's more efficient to start with what looks "okay" - so we’ve kept our designer away. Then refined the semi-broken, developer-made design iteratively with our designer's input focusing on important details. This approach helped us focus on the right parts at the right time and speed up the whole process, allowing for rapid development and continuous improvement.

For those looking to deepen their understanding of theming, especially dark mode, I highly recommend the article “Illuminating Dark Mode” from the Figma blog. It’s a treasure trove of insights.

Designer: After the first iteration of the transition was done and we had a rough app in the light theme, we’ve gone deeper into specific details. We’ve used a lot of sticky notes in Figma. Some screens needed to be re-drawn completely. We did visual QA iterations in multiple passes, tweaking colors and seeing what works. Some specific components were useless to match to our defined patterns, so they needed to be customized.

Learnings

Developer

Start with a single component. Experiment and try to find a system that is scalable and maintainable.
Keep all the CSS variables in a single theme file. This way you can easily add new themes in the future.
Naming convention matters. Find name convention for CSS variables. This will make life easy for your teammates.

Designer

Rapid fixes in passes help a lot. Depends on the structure of your team, but overall I think the fluid process worked best. It provided a vital pacing of the project, and didn’t overwhelm and trap us in overthinking. It’s overwhelming, it’s hard, but it works.
Use Color overlays. Before the redesign we used certain shades of color for hover states (bluegrey900 on bluegrey950 background). Bringing an opacity color to our theme allowed us to move faster constantly and look good.

Let us know if you have any questions or would love to know more.

➤➤➤ https://acreom.com

Common Mistakes of Building a Productivity Tool

Peter Bokor — Thu, 14 Dec 2023 16:53:52 +0000

Great apps are opinionated, and laser focused on solving a single problem in the best way possible. For a long time, we were trying to combine 3 functional components together: markdown pages, tasks, and calendar. We have been inadvertently trying to do it all. This caused confusion to our users, led to an unintuitive hierarchy of entities, and made development cycles longer for us.

This blog is about the mistakes, decisions, and the eventual course correction we have made, while building a slightly different kind of devtool - a knowledge base for developers.

Trying to Do It All

Our mission is to help developers organize their work - from the moment they are assigned a new issue, all the way to the point it's merged into the main branch. Our goal is to guide them throughout this process and make it easy when it comes to organizing their work.

It was clear to us from the beginning that we had to establish focus. We knew who we were building for - developers, but we haven’t defined which problems we are solving, and which ones we are not. We have found ourselves on the verge of becoming one of the tools that try to do it all, but fail to solve one problem properly.

Figuring Out What to Do
What helped us was being in touch with our users, talking to them on a daily basis, and relentlessly chasing critical feedback from them.

The primary issues were the lack of a main entity in the app and the presence of too many options without a clear preferred choice. We have also learned that most of the users were using acreom for a frequent job - breaking down large features, or issues they work on, into actionable steps, using pages. While our focus was scattered by solving every other job, we forgot to support the main job of our users.

We have decided to embrace this user job, and cut back everything else to place a clear opinion and focus in the app.

Making Hard Decisions

In order to shape the current product version into what we decided to solve, we had to cut features that users frequently use which is a painful process. We wanted to be fast and do what's necessary in the long-run, even if it meant sacrificing the happiness of some users in the process.

Laser Focus

Chances are, there already exists a solution for whatever you are building, with a single focus, that deals with a single job, and does it great. If you try to solve the problem, plus something else, you just can’t compete - your resources and focus are split into solving 2 problems.

In our case, the problem we were solving was the calendar, which was only a small part of our app. We have decided to cut it, because we could never meet the user's expectations when it comes to being a full-fledged calendar - we just didn’t have the right platform to do it.

Single Top-level Entity

Laser focus means having a clear hierarchy of entities and explicit opinions on how to use the product from day 1. One of the major mistakes we have made early was designing around same-level entities. In our case these were tasks and pages, representing action items.

Having to do so often slowed down our development cycles, because we had to support edge cases and confused ourselves about what is truly important. One had to go, and, based on our learnings from the feedback mentioned before, it was clear what we had to double down on pages.

This change made everything clear for us and the user. Suddenly things clicked and there was a clear opinion on how to get things done in the app.

Validate

Getting feedback on early concepts from users throughout this process is critical for a successful product pivot. What we did right here was to iterate fast on our explorations and share these iterations with our community. We were waking up to long threads of feedback which was essential for us to course correct and navigate these changes.

An important takeaway here is that a major change in the product UX is usually going to cause a pushback. Take this pushback as an opportunity to explore the job that profoundly matters to users, by diving deep in the followup questions, and compensate for it in a new design if it belongs to your newly defined direction. Also, keep in mind that the pushback is always part of changing the status quo.

Learnings and Closing Thoughts

Making everyone happy is hard, especially if you are making a simple app. There will always be a pushback from the users that are used to a certain way of how the app works. It is your responsibility as the maker to incorporate the feedback in a way that will make the tool you are building better.

Cutting features users are used to is a pain, but is sometimes necessary for further growth. The most important part of this process is to listen to the feedback, and decide what really is important. In our case it has led us to a better app, and some great solutions we wouldn’t have made otherwise - such as the Timeline of your day.

Above all, having a concise goal, purpose, and a main use case should be the main priority. From the moment they are assigned a new issue, all the way to the point it's merged into the main branch.Diverging from those leaves your efforts scattered, and the tool you are making, full of friction.

Now that we have regained our course, we are not diverging from it. We are building acreom around the single entity - pages - locally stored in your markdown files. And our every decision will be made in a way to keep the app laser-focused and concise.

TL;DR

Learnings on building a great product:

Define a clear and narrow focus where you can deliver a 10x product.
Great products are simple. Focus on multiple same level entities distract you from simple hierarchy and sidetrack you from your mission.
Talk to users, a lot. By speaking to people we’ve found some things were not as important as we thought, and helped us focus on the core value.
Don’t be afraid to make difficult decisions.

Capturing at Speed of Thought

Peter Bokor — Thu, 07 Sep 2023 14:24:39 +0000

Most of the workflow management interfaces we use today prioritize organizing before capturing. Working with them often is a burden, and we lose focus simply by having to make sure we put the right information in the right place.

We felt this friction ourselves, hence one of the core philosophies for building acreom is capture-first, organize-later.

Capturing for developers

Oftentimes you come across a bug or an optimisation you need to do later, or simply want to note something down quickly, but as soon as you leave your IDE, your focus breaks and you lose your flow state, which takes time to regain.

Tools that help us capture issues with context do not provide an easy way to keep us in the flow state. Here’s a brief background on how we thought about designing such a feature from scratch.

Welcome Quick Capture

Quick capture is our way to capture your thoughts, not your attention. We address the problems with capturing in the following ways:

Switching context => floating window on top of your current app
Losing focus => everything captured has a clear destination
Losing flow => after writing down your thoughts, you perform a single action - capture
Other distractions => no unnecessary UI. You get an editor and a capture button

The Problem of Version 1.0

The main flaws of the first version was the lack of features. It could capture text to My Day, but that was it. The iteration only included a simple markdown editor. We did have tools and shortcuts to “postprocess” the captured text later in the main app - like convert to task / convert to page, but that required more user interaction than we would have wanted.

The Quick Capture V1 turned out to be too limited in functionality and having to almost always perform a follow-up action with your captured content was annoying. Our own experience and the community feedback made it clear that the functionality needed to be extended in a way that kept Quick Capture simple to use.

The Road to 2.0

We knew from the feedback that the editor in Quick Capture resembled a Page, which suggested that you could: 1. capture a Page, and 2. use plugins - such as Tasks, when capturing. That was exactly what we set out to add in V2.

Early Redesign

The image shows the drafts of an early V2. The capture would be split into 3 “screens”:

Entity picker with a markdown editor - capturing to My Day
Task capture with a simple input and a switch to enable capturing multiple tasks (the Quick Capture would automatically re-open after capturing)
Page capture with a title input + markdown editor

The decision of what you wanted to capture would be made before capturing, but you could always switch between different capture types.

The main problem with this version was the changing content of the whole window. Every capture entity had a completely different screen, which was confusing and overwhelming, especially when switching the different capture types. Furthermore, it put the burden on you to decide before capturing. So we decided to explore a different direction.

Unifying the Content

We have decided to unify the different capture types in order to mitigate the confusion. We have made the header - now with entity type selector (shown above), and the footer persistent across all entities, with only the “body” changing (shown below).

The feeling started to be better, but what surfaced was a problem with Tasks - they just weren’t fitting in with the Page and My Day.

The Problem with Tasks

Our next question was: Why does the Task Capture feel weird?

We came up with a few answers:

The Task capture does not feel and look the same as Task modal in-app, creating confusion
It was missing the functionality to add date / labels
There was no way to include Tasks in text, removing one of the essentials of acreom - capturing tasks with context

The solutions were not great:

We could add page, date, and labels pickers to Task capture, basically making it Not-very-quick Capture and overwhelming to use
There were 3 solutions: add full-fledged suggestions similar to task modal - bad feeling, couldn’t fit the window; make custom suggestions - feels weird and disconnected from app; don’t show suggestion, but show “pills” with parsed data - no user control, could lead to frustration (shown in picture below)
There would need to be a page selector, again making it slow and overwhelming.

One more solution to the tasks is shown below - the picture shows an exploration combining 2 actions - capturing a task, or capturing as the selected entity, covered under a tooltip. We found it only usable for power users, and that it may result in different data input than expected. For tasks you would also be missing feedback - what date and what label has been parsed. It could be done, but we wanted to go with a unified logic, where you capture only plain text.

In the end, the solution addressing all the problems mentioned above was simple - remove the Task capture altogether, and move Tasks inline. The Tasks would then act exactly as the Tasks in the app - you add a Task, get suggestions, accept whichever one you want. You could, naturally, capture tasks with their context, and, the cherry on top - we have removed one decision you have to make before capturing, making it more accessible and flowy. It all just made sense.

Quick Capture 2.0

With the Tasks out of the way, the functionality was mostly finished. What remained was making Quick Capture as non-distracting and easy to use, as possible.

We unified the capture to My Day and Page capture completely - moving the entity picker to the footer and making the action you perform as clear as possible - “Capture”. The secondary action - cancel is a necessity, as ‘escape’ shortcut to close the window is not known to everyone. We have also added a “add inline task button” to make the tasks more accessible.

We ended up with the bare minimum - a single editor with inline tasks, exactly what you are used to and would expect from using acreom.

In the final version we have included:

Capturing to My day
Creating a new Page
A markdown editor with tasks
A single action to capture

We have not included:

A separate task capturing
Complicated controls
Multiple screens and decision points increasing friction and reducing accessibility

Quick Capture Under the Hood

acreom is a single window electron app. In order to implement Quick Capture, we needed to make it a separate electron window. The window should be displayed above everything, in a place where you would expect it. It should also have a lightweight feel and take as little screen space as possible. That has brought a couple of technical challenges.

Display

Displaying an electron window above all other apps and hiding OS controls is straightforward. Simple config does the trick:

new BrowserWindow({
   title: 'Quick Capture',
   show: false,
   resizable: false,
   movable: true,
   minimizable: false,
   maximizable: false,
   closable: false,
   fullscreenable: false,
   autoHideMenuBar: true,
   frame: false,
   transparent: true,
   opacity: 1,
   alwaysOnTop: true,
   titleBarStyle: 'hiddenInset',
});

Displaying Quick Capture Where You Expect It

One thing to make the Quick Capture experience seamless is displaying it in the most convenient place: the screen you are looking at, and the position where you would expect it - exactly where you left it the last time.

In the early versions, quick capture was always shown in the center of your main screen. This turned out to be inconvenient - you had to switch context, and was confused when not seeing it on your secondary display. Lucky for us, electron has a way to check which screen is focused - more specifically, which screen the cursor is on, by calling the getDisplayNearestPoint method with the current pointer position (obtained by getCursorScreenPoint).

Not having to switch screens when capturing was a great improvement. A problem has arisen though - not all screens are made equal (in their resolution), and if you dragged the QC on a larger screen, dropped it out of bounds of a smaller screen, and tried to display it, it would not show - the image illustrates this perhaps better than words.

To solve the problem, we needed to recalculate the quick capture coordinates relative to the new screen before showing it. We used the following approach:

Get the screen with pointer - as described above
Get the original screen the window was shown on - using getDisplayNearestPoint to the window
Normalize the window position according to the old screen space - calculating for the x coords we get normX = (qc.x - window.bounds.x) / window.width;, where bounds is a rectangle containing the bounds of the display.
Multiply the normalized position with the new window dimensions to get the final adjusted position - again calculating for the x coords - x = newWindow.x + normX * newWindow.width;
Display quick capture

Now the Quick Capture is showing exactly where you need it and also expect it.

Sizing / Resizing

When the content in editor overflows the window, an event with the new content height is emitted to electron. Electron then resizes the Quick Capture window accordingly.

// on Frontend
resize() {
   window.electron.resize(
      editor.clientHeight ?? 235,
   );
},

// in Electron
ipcMain.handle('resize', (_event, height) => {
   if (quickCapture.isDestroyed()) return;
   quickCapture.setMinimumSize(
      quickCapture.getSize()[0],
      height,
  );
  quickCapture.setSize(quickCapture.getSize()[0],height);
});

Platform Specific Challenges

Different platforms have technical limitations with regards to windows and app focus management. We’ve had to make some workarounds for specific platforms to deal with them.

Windows Tray

We do not expect users to have acreom always open. However there are some features that users expect to work even when acreom is closed, like notifications, or invoking the Quick Capture window.

We have enabled tray on Windows to address this issue. Having the app present in the tray will keep the global shortcut bound and the user can invoke Quick Capture. Adding tray functionality to electron apps is easy. Read more.

Note: some users do not appreciate apps inserting themselves into the tray, so we have added an option to disable having acreom in the tray.

macOS Focus Handling and Fullscreen Apps

While working on Quick Capture - a floating window, which could show above the fullscreened app, we have encountered an interesting issue. Upon closing the Quick Capture, the acreom main app was always being focused, instead of the correct app - the one underneath the Quick Capture window.

Turns out, there is an issue with the electron window not returning focus correctly on mac - https://github.com/electron/electron/issues/5495. The trick to solving is to treat quick capture as a screensaver. When closing, you hide it by setting the opacity to 0 and sending hide: command to the first responder.

Another problem that has come up was the Quick Capture window couldn’t render over fullscreened apps. The result was, your desktop was switched whenever you wanted to capture. To deal with that, we set the window to screen saver. Combined with removing the app from the tray before rendering the window for the first time enables it to render over fullscreen apps.

After you render the window in screen saver mode you can once again show your app on the tray. You will of course always have another window on the background but since the opacity is 0 and mouse interactions are also disabled, you won’t be able to interact with it other than through the keyboard shortcut.

Final Words

We hope you find this blog useful. This is how we approach product building at acreom. If you like this style of blogs, have a look at The Quest for a Great Search.

We’ve introduced Quick Capture in v1.8.0, you can already try it out after downloading acreom - acreom.com/downloads. Tweet us what you think @acreom!

Bento Layouts Tilt Me

Peter Bokor — Tue, 05 Sep 2023 12:06:48 +0000

I was recently playing around with bento layouts (if you don't know what Bento layout / grid is, it's the new trend all the cool kids are doing, catch up) and actually automating it a little - basically using grid-auto-flow on grid layout. Then I got an idea: "Could I make the tiles tilt towards the mouse?" Why? - Why not? Let's do it.

Bento layouts actually don't tilt me, sorry. I just wanted to use this awesome clickbait opportunity for what I've made. This is a semi-demo, semi-tutorial, short post about how to do it.

Making a single tile tilt

Tilting a single tile is actually pretty simple and a really nice person - some Armando Canals, already did that (https://armandocanals.com/posts/CSS-transform-rotating-a-3D-object-perspective-based-on-mouse-position.html)

All I needed to do was scale it by adding multiple tiles, inside a grid layout. The code is here, with the relevant parts described in the comments:

devslovecoffee.com

Bento layout with tiles tilting toward the cursor

<style>
    body {
        background: #302c31;
    }
    .container {
        height: 100%;
        width: 100%;
        /* Make it a grid */
        display: grid;

        /* 8 columns and 4 rows */
        grid-template-columns: repeat(8, 100px);
        grid-template-rows: repeat(4, 100px);

        /* Make the layout dense = fill out any "holes" and leave uncompleted rows if necessary */
        /* Try commenting the dense option out to see the difference */
        grid-auto-flow: dense;

        align-content: center;
        justify-content: center;
        gap: 8px;
    }

    .box {
        background: white;
    }

    /* Here we make some if the tiles different size */
    /* to see the effect of the grid layout */
    .box:is(:nth-child(2), :nth-child(8), :nth-child(10)) {
        grid-column: span 2;
        grid-row: span 1;
    }

    .box:is(:nth-child(3), :nth-child(7), :nth-child(13)) {
        grid-column: span 2;
        grid-row: span 2;
    }
</style>
<body>
<!--    Spawn multiple boxes -->
    <div class="container" id="container">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</div>
</body>
<script>
    // Try smaller numbers to see more tilt
    let constrain = 30;
    // the part where mouse movement will be taken into account
    // replace with 'body' to consider the whole body of the webpage
    let mouseOverContainer = document.getElementById("container");
    // select all our boxes
    let boxes = document.getElementsByClassName("box");

    function transforms(x, y, el) {
        let box = el.getBoundingClientRect();
        let calcX = -(y - box.y - (box.height / 2)) / constrain;
        let calcY = (x - box.x - (box.width / 2)) / constrain;

        // try smaller perspective for more tilt. (may produce some fun artifacts)
        return "perspective(500px) "
            + "   rotateX("+ calcX +"deg) "
            + "   rotateY("+ calcY +"deg) ";
    }

    function transformElement(el, xyEl) {
        el.style.transform  = transforms.apply(null, xyEl);
    }

    mouseOverContainer.onmousemove = function(e) {
        let xy = [e.clientX, e.clientY];
        window.requestAnimationFrame(function(){
            // Calculate the transform for all our boxes
            for (const box of boxes) {
                let position = xy.concat([box]);
                transformElement(box, position);
            }
        });
    };
</script>

Bonus: making the highlight pop

We can add some more flavour to the layout - the hovered tile can pop out. To do that, we check whether we've hovered a smaller area inside the tile, and if so, we scale it. Simple and effective. To try it out, just replace your transforms function with the one below.

function transforms(x, y, el) {
let box = el.getBoundingClientRect();
let calcX = -(y - box.y - (box.height / 2)) / constrain;
let calcY = (x - box.x - (box.width / 2)) / constrain;

        // try smaller perspective for more tilt. (may produce some fun artifacts)
        let transformString = "perspective(500px) "
            + "   rotateX("+ calcX +"deg) "
            + "   rotateY("+ calcY +"deg) ";

        // make the hover area half the tile's bounding box
        const halfBox = {
            left: box.left + box.width / 4,
            right: box.right - box.width / 4,
            top: box.top + box.height / 4,
            bottom: box.bottom - box.height / 4,
        }

        // if the mouse is within the half-BBox, 
        // don't apply the rotation, but scale the tile instead
        if (x >= halfBox.left && x <= halfBox.right
            && y >= halfBox.top && y <= halfBox.bottom) {
            transformString = "   scale(2) "
        }
        return transformString;
    }

devslovecoffee.com

The final result

The end (that was fast)

Thanks for reading this quick post. Now that you are a cool kid, tweet (X?) me your best Bento grid @devslovecoffee.

Don't forget to check out my other posts and projects ☕.

The Resend Cube Lookalike Part 3 - Lights, God Rays, Final Touches

Peter Bokor — Mon, 17 Jul 2023 08:00:00 +0000

This is the final part of the Resend cube lookalike series where we are trying to recreate the Resend cube. This time we fix the lights and add the "god rays" which are a pretty neat trick as we find out. You can get caught up with parts 1 and 2 here: part 1, part 2.

Lights

the current lights setup is shown below:

The effect it creates is not ideal - we never have a whole side of the cube highlighted, but always only a circle within the side. To make the lightning look better, we can use different kind of lights - RectAreaLight.

RectAreaLights are literally just panes which emit light. If we make them big enough, we can make the whole side of the cube highlighted. To make the RectAreaLights work though, we have to change the controls of our cube - instead of orbit controls, we need to rotate the whole cube. We will see why in a while.

Starting with some imports, we add the following lines to our importmap (if you don't have an importmap to add to, you might want to check the part 2 of this series):

"RectAreaLightHelper": "https://cdn.jsdelivr.net/npm/three@0.154.0/examples/jsm/helpers/RectAreaLightHelper.js",
"RectAreaLightUniformsLib": "https://cdn.jsdelivr.net/npm/three@0.154.0/examples/jsm/lights/RectAreaLightUniformsLib.js"
...
import { RectAreaLightHelper } from 'RectAreaLightHelper';
import { RectAreaLightUniformsLib } from 'RectAreaLightUniformsLib';

Now we edit the Lights section of the code (search for // Create the light) by replacing the lights with a single RectAreaLight.

// Create the light
RectAreaLightUniformsLib.init();
const rectLight1 = new THREE.RectAreaLight( 0xffffff, 10, 100, 100 );
rectLight1.position.set( -5, 5, 5 );
scene.add( rectLight1 );

scene.add( new RectAreaLightHelper( rectLight1 ) );

Rotating the cube, you can see it looks much better. You can also see a huge pane of light, which is not desired and needs getting rid of. Here comes the rotating the cube instead of using orbit controls part.

Rotation

Borrowing some code from this jsfiddle, we can rotate the cube on drag instead of rotating the camera, which stays fixed - allowing us to place the lights outside of the camera view, but still casting light on the cube.

The problem is that there are rotations already going on with the cube. Lucky for us, we can use the same solution we did in part 2 - we just wrap the cube in another object which we apply the rotations to - shown below.

To begin, we replace the old wrapper code inside makeCubes function with the following:

// Replace this:
const wrapper = new THREE.Object3D();
wrapper.add(cubes);
return wrapper;

// With this:
const innerWrapper = new THREE.Object3D();
innerWrapper.add(cubes);
const outerWrapper = new THREE.Object3D();
outerWrapper.add(innerWrapper);
return outerWrapper;

We also need to update our tRotate call to account for the added wrapper:

// cube.children[0] = the outer wrapper;
// cube.children[0].children[0] = the inner wrapper;
// cube.children[0].children[0].children[0] one side of the actual cube
tRotate(cube.children[0].children[0], 2000);

Now you should see the cube working exactly as before - the whole cube should be rotating and the sided should be rotating as well.

Our next step is to remove all logic regarding the orbit controls and replace it with the "drag controls". Below are the lines we are removing (you can search for them in the code):

"OrbitControls":"https://cdn.jsdelivr.net/npm/three@0.142.0/examples/jsm/controls/OrbitControls.js",
...
import { OrbitControls } from 'OrbitControls';
...
const controls = new OrbitControls(camera,renderer.domElement);
// disable zoom
controls.enableZoom = false;
// disable pan
controls.enablePan = false;
...
controls.update();

If done correctly, you have lost the ability to rotate the cube and the page still runs fine inside your browser. Now let's steal some code from the jsfiddle. We will add a "Controls" section right before animating the cube and a call of the update function right after calling animate():

// Controls
var isDragging = false;
var previousMousePosition = {
    x: 0,
    y: 0
};
addEventListener('mousedown', function(e) {
    isDragging = true;
})
addEventListener('mousemove', function(e) {
    // get how much the mouse has moved
    let deltaMove = {
        x: e.offsetX-previousMousePosition.x,
        y: e.offsetY-previousMousePosition.y
    };

    if(isDragging) {
        // prepare the rotation
        let deltaRotationQuaternion = new THREE.Quaternion()
            .setFromEuler(new THREE.Euler(
                toRadians(deltaMove.y * 1),
                toRadians(deltaMove.x * 1),
                0,
                'XYZ'
            ));
        // actually rotate the cube (the outer wrapper)
        cube.quaternion.multiplyQuaternions(deltaRotationQuaternion, cube.quaternion);
    }
    // store the prev position
    previousMousePosition = {
        x: e.offsetX,
        y: e.offsetY
    };
});

addEventListener('mouseup', function(e) {
    isDragging = false;
});

let lastFrameTime = new Date().getTime() / 1000;
let totalGameTime = 0;

function update() {
    setTimeout(function() {
        let currTime = new Date().getTime() / 1000;
        let dt = currTime - (lastFrameTime || currTime);
        totalGameTime += dt;
        update(dt, totalGameTime);
        lastFrameTime = currTime;
    }, 0);
}
// Animate the cube
function animate() {
    requestAnimationFrame(animate);
    cube.children[0].rotation.x += 0.005;
    cube.children[0].rotation.y += 0.005;
    cube.children[0].rotation.z += 0.005;
    TWEEN.update();
    composer.render();
}
animate();
update();

You should be able to rotate the cube again. Awesome. Now for the fancy lights: what you should see right now is a somewhat faded cube - we have lost the direct light on either side. We need to bring that back by adding more rect lights.

Adding more rect lights

I have tinkered with the lights, so you don't have to. You're welcome. Here is the configuraiton I personally like:

// Create the light
RectAreaLightUniformsLib.init();
const rectLight1 = new THREE.RectAreaLight( 0xffffff, 100, 20, 20 );
rectLight1.position.set( 10, 15, 0 );
rectLight1.rotation.x = Math.PI * 1.5;
rectLight1.rotation.y = Math.PI / 4;
scene.add( rectLight1 );
const rectLight2 = new THREE.RectAreaLight( 0xffffff, 5, 20, 20 );
rectLight2.position.set( 0, -20, 0 );
rectLight2.rotation.x = Math.PI / 2
scene.add( rectLight2 );

scene.add( new RectAreaLightHelper( rectLight1 ) );
scene.add( new RectAreaLightHelper( rectLight2 ) );

And here is what it looks like from distance:

Pretty sick. I encourage you to play with the light and find out what you like. Pro tip: when positioning the lights, pause the animation by commenting out the following lines:

cube.children[0].rotation.x += 0.005;
cube.children[0].rotation.y += 0.005;
cube.children[0].rotation.z += 0.005;
TWEEN.update();

and setting camera.position.z to a high number (like 60), so you get an overview of the scene.

God rays

Now let's look at a pretty neat trick I think (might be a complete conspiration by me) the Resend guys did - using the god rays to fix a flaw of the cube where it sometimes almost entirely blends into the background. The image below demonstrates the issue.

To fix this (or at least I think that's what happened), they introduced an element serving both as a "light source", but more importantly serving as a background for the cube in the case it gets too dark. Giving it a lighter background keeps the outline visible and you won't get "lost" (suddenly realise you don't know what you are looking at).

So how do we add it? This time we don't use the fancy Three.js, but turn to our old friends HTML and CSS.

Starting off, we need to place the three canvas above the future light ray. We create a div element we will use as the container for our canvas and while we are at it, we also add the light ray divs:

<div class="canvas-container" id="canvasContainer"></div>
<div class="god-rays-wrapper"><div class="god-rays"></div></div>

You can place the elements anywhere within the <body> tag. Next we set up the canvas to be a child of our container:

// replace this:
document.body.appendChild(renderer.domElement);

// with this:
const container = document.getElementById( 'canvasContainer' );
container.appendChild(renderer.domElement);

Next we can add the css required to make it work. In the <style> tag, add the following lines:

<style>
    body {
        margin: 0;
        background: black;
    }
    canvas {
        display: block;
        position: absolute;
        z-index: 100;
    }
    .canvas-container {
        width: 100%;
        height: 100%;
    }
    .god-rays-wrapper {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 0;
        width: 1000px;
        height: 350px;
        transform: rotate(-45deg);
        filter: blur(50px);
        pointer-events: none;
    }
    .god-rays {
        width: 100%;
        height: 100%;
        background: white;
        opacity: 0.5;
        mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
        -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
        mix-blend-mode: screen;
    }
</style>

And you are good to go... except that nothing changed. That is because I lied, and we actually need to do some work in three to remove the background opacity and let the light ray shine through.

Removing scene background

This might seem like and easy task - remove the scene background and we are done. At least that's what I thought. The reality is not so bright as we will soon find out.

We can really start with removing the scene background, which is this line: scene.background = new THREE.Color( 0x000000 );. We should then set the rendering to support opacity by adding alpha to renderer options:

const renderer = new THREE.WebGLRenderer({
  antialias: false,
  alpha: true,
});

We still can't see the light ray. That is, as I've found out (here and here) because our Bloom pass does not support opacity. The solution - replace the rendering pipeline.

We will replace our render pass and our effects pass from three with effects from postprocessing library by Poimandres. Let's start by importing it (add to importmap + call inside script)

// add to importmap
"postprocessing": "https://cdn.jsdelivr.net/npm/postprocessing@6.32.2/+esm"

// add to script
import {
    BloomEffect,
    FXAAEffect,
    EffectComposer,
    EffectPass,
    RenderPass
} from "postprocessing";

We then replace the following code:

// Create the renderer
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
// make it sharper
renderer.setPixelRatio(window.devicePixelRatio * 1.5);
document.body.appendChild(renderer.domElement);

// Create effects
const bloomPass = new UnrealBloomPass(new THREE.Vector2(1000, 1000), 1.5, 0.4, 0.85)
bloomPass.threshold = 0.4
bloomPass.strength = 0.7
bloomPass.radius = 0.2
bloomPass.renderToScreen = true

var composer = new EffectComposer(renderer);
composer.setSize(window.innerWidth, window.innerHeight);
var renderPass = new RenderPass(scene, camera);

composer.addPass(renderPass);
composer.addPass(bloomPass);

with a more readable adn updated function addRendering:

function addRendering() {
        // Create the renderer
        const renderer = new THREE.WebGLRenderer({
        antialias: false,
        alpha: true,
        powerPreference: "high-performance",
        stencil: false,
        depth: false
    });

    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.autoClear = false;

    const container = document.getElementById( 'canvasContainer' );
    container.appendChild(renderer.domElement);

    const bloomOptions = {
        luminanceThreshold: 0.9,
        luminanceSmoothing: 0.7,
        intensity: 0.8,
        radius: 0.1,
    }
    const bloomPass = new BloomEffect(bloomOptions);
    const FXAAPass = new FXAAEffect();

    var composer = new EffectComposer(renderer);
    composer.setSize(window.innerWidth, window.innerHeight);
    composer.addPass(new RenderPass(scene, camera));
    composer.addPass(new EffectPass(camera, FXAAPass, bloomPass));
    return composer;
}

const composer = addRendering();

Additionally, we replace the animate function at the end of our code:

function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.005;
    cube.rotation.y += 0.005;
    cube.rotation.z += 0.005;
    controls.update();
    TWEEN.update();
    composer.render();
}
animate();
update();

with a direct call to requestAnimationFrame:

requestAnimationFrame(function render() {
    requestAnimationFrame(render);
    cube.children[0].rotation.x += 0.005;
    cube.children[0].rotation.y += 0.005;
    cube.children[0].rotation.z += 0.005;
    TWEEN.update();
    composer.render();
});
update();

If you've done everything correctly, the light ray should be visible now. The screenshot below shows what it looks like (note: this is a happy case set up to look good).

Based on your screen resolution though, the rays might not look the best - they might not be aligned, or might not reach the dark parts of the cube. Let's fix that.

Centering the rays to the cube

We can resolve the issues by setting our renderer to a fixed size and centering the god rays to the cube, making them always align perfectly. Starting off, we set the size of our composer to 600 by 600 pixels - composer.setSize(600, 600);.

Next we must set the aspect ratio of our camera to reflect the changed aspect ratio of the renderer. Since we are rendering a 600px by 600px square, the aspect ratio will be 1 - const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);.

And lastly, we re-center the cube by editing the css for our canvas:

canvas {
    display: block;
    position: absolute;
    z-index: 100;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Now the cube stays in the center regardless of the window size (and we don't have to add three resizing). Next, we fix the light ray in place:

.god-rays-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)  rotate(-50deg);
    z-index: 0;
    width: 100%;
    height: 350px;
    filter: blur(50px);
    pointer-events: none;
}

Now if you resize the window, the light ray stays in the same place, always seemingly radiating light towards the cube.

Closing thoughts

I have refactored the final code, so it is more readable, and as always, you can find it at the end of the post.

And we are done. I think we have a pretty solid Resend cube lookalike. Of course, it will never be exactly the original (and it is not trying to), but I'd say it's close.

Thanks for reading this post (and the series). It's been fun and insightful for me to make it. I certainly have learned a ton of stuff and hope you have as well. I'd be happy to hear any feedback either via email at petttr1[at]gmail[dot]com, or via Twitter.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Resend Cube Lookalike</title>
    <style>
        body {
            margin: 0;
            background: black;
        }
        canvas {
            display: block;
            position: absolute;
            z-index: 100;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .canvas-container {
            width: 100%;
            height: 100%;
        }
        .god-rays-wrapper {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%)  rotate(-50deg);
            z-index: 0;
            width: 100%;
            height: 350px;
            filter: blur(50px);
            pointer-events: none;
        }
        .god-rays {
            width: 100%;
            height: 100%;
            background: white;
            opacity: 0.4;
            mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
            -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
            mix-blend-mode: screen;

        }
    </style>
    <script type="importmap">
        {
            "imports": {
                "three": "https://cdn.jsdelivr.net/npm/three@0.154.0/build/three.module.js",
                "UnrealBloomPass":"https://cdn.jsdelivr.net/npm/three@0.154.0/examples/jsm/postprocessing/UnrealBloomPass.js",
                "EffectComposer":"https://cdn.jsdelivr.net/npm/three@0.154.0/examples/jsm/postprocessing/EffectComposer.js",
                "RenderPass":"https://cdn.jsdelivr.net/npm/three@0.154.0/examples/jsm/postprocessing/RenderPass.js",
                "tween": "https://cdn.jsdelivr.net/npm/@tweenjs/tween.js@18.5.0/dist/tween.esm.js",
                "RectAreaLightHelper": "https://cdn.jsdelivr.net/npm/three@0.154.0/examples/jsm/helpers/RectAreaLightHelper.js",
                "RectAreaLightUniformsLib": "https://cdn.jsdelivr.net/npm/three@0.154.0/examples/jsm/lights/RectAreaLightUniformsLib.js",
                "postprocessing": "https://cdn.jsdelivr.net/npm/postprocessing@6.32.2/+esm"
            }
        }
    </script>
</head>
<body>
<script type="module">
    import * as THREE from 'three';
    import TWEEN from 'tween';
    import { RectAreaLightHelper } from 'RectAreaLightHelper';
    import { RectAreaLightUniformsLib } from 'RectAreaLightUniformsLib';
    import {
        BloomEffect,
        FXAAEffect,
        EffectComposer,
        EffectPass,
        RenderPass
    } from "postprocessing";

    const CUBES_PER_SIDE = 3;

    function toRadians(angle) {
        return angle * (Math.PI / 180);
    }

    function createBoxWithRoundedEdges( width, height, depth, radius0, smoothness ) {
        let shape = new THREE.Shape();
        let eps = 0.00001;
        let radius = radius0 - eps;
        shape.absarc( eps, eps, eps, -Math.PI / 2, -Math.PI, true );
        shape.absarc( eps, height -  radius * 2, eps, Math.PI, Math.PI / 2, true );
        shape.absarc( width - radius * 2, height -  radius * 2, eps, Math.PI / 2, 0, true );
        shape.absarc( width - radius * 2, eps, eps, 0, -Math.PI / 2, true );
        let geometry = new THREE.ExtrudeGeometry( shape, {
            depth: depth - radius0 * 2,
            bevelEnabled: true,
            bevelSegments: smoothness * 2,
            steps: 1,
            bevelSize: radius,
            bevelThickness: radius0,
            curveSegments: smoothness
        });

        geometry.center();

        return geometry;
    }

    function makeCubes() {
        const material = new THREE.MeshStandardMaterial({ color: 0x000000, metalness: 1., roughness: 0.01 });
        const numCubes = CUBES_PER_SIDE;
        // Create the group, we will add layers to the group
        const cubes = new THREE.Object3D();
        // iterate over all dimensions
        const offset = (numCubes - 1) / 2;
        for(let i = 0; i < numCubes; i ++) {
            // create the layer
            const layer = new THREE.Object3D();
            for(let j = 0; j < numCubes; j ++) {
                for(let k = 0; k < numCubes; k ++) {
                    const geom = createBoxWithRoundedEdges(1, 1, 1, .09, 40);
                    const x = (i - offset) * 1.03;
                    const y = (j - offset) * 1.03;
                    const z = (k - offset) * 1.03;
                    geom.translate(x, y, z);
                    const cube = new THREE.Mesh(geom, material);
                    layer.add(cube);
                }
            }
            cubes.add(layer);
        }
        const innerWrapper = new THREE.Object3D();
        innerWrapper.add(cubes);
        const outerWrapper = new THREE.Object3D();
        outerWrapper.add(innerWrapper);
        return outerWrapper;
    }

    function tRotate( cube, delay ) {
        // rotate the wrapped cube 90 deg along y/z axis
        if (Math.random() > 0.5) {
            cube.rotateY(Math.PI / 2);
        }
        else {
            cube.rotateZ(Math.PI / 2);
        }
        // pick a random layer to rotate
        const sideIndex = Math.floor(Math.random() * CUBES_PER_SIDE);
        const side = cube.children[sideIndex];

        // pick a random direction to rotate
        const angles = {
            x: Math.random() > 0.5 ? -Math.PI : Math.PI,
            y:0,
            z:0
        }

        // pick a random time to wait between rotations
        const pause = Math.random() * 1000;

        new TWEEN.Tween(side.rotation)
            .delay(pause)
            .to( {
                x: side.rotation._x + angles.x,
                y: side.rotation._y + angles.y,
                z: side.rotation._z + angles.z
            }, delay )
            .onComplete(function() {
                setTimeout( tRotate, pause, cube, delay );
            })
            .start();
    }

    function constructScene() {
        // Create the scene
        const scene = new THREE.Scene();

        // Create the light
        RectAreaLightUniformsLib.init();
        const rectLight1 = new THREE.RectAreaLight( 0xffffff, 100, 20, 20 );
        rectLight1.position.set( 10, 15, 0 );
        rectLight1.rotation.x = Math.PI * 1.5;
        rectLight1.rotation.y = Math.PI / 4;
        scene.add( rectLight1 );

        const rectLight2 = new THREE.RectAreaLight( 0xffffff, 5, 20, 20 );
        rectLight2.position.set( 0, -20, 0 );
        rectLight2.rotation.x = Math.PI / 2
        scene.add( rectLight2 );

        scene.add( new RectAreaLightHelper( rectLight1 ) );
        scene.add( new RectAreaLightHelper( rectLight2 ) );

        // Create a cube
        const cube = makeCubes();
        scene.add(cube);
        return {scene, cube};
    }

    function addControls() {
        addEventListener('mousedown', () => {
            isDragging = true;
        })
        addEventListener('mousemove', (e) => {
            // get how much the mouse has moved
            let deltaMove = {
                x: e.offsetX-previousMousePosition.x,
                y: e.offsetY-previousMousePosition.y
            };

            if(isDragging) {
                // prepare the rotation
                let deltaRotationQuaternion = new THREE.Quaternion()
                    .setFromEuler(new THREE.Euler(
                        toRadians(deltaMove.y * 1),
                        toRadians(deltaMove.x * 1),
                        0,
                        'XYZ'
                    ));
                // actually rotate the cube (the outer wrapper)
                cube.quaternion.multiplyQuaternions(deltaRotationQuaternion, cube.quaternion);
            }
            // store the prev position
            previousMousePosition = {
                x: e.offsetX,
                y: e.offsetY
            };
        });

        addEventListener('mouseup', () => {
            isDragging = false;
        });
    }

    function addCamera() {
        // Create the camera
        const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
        // Position the camera
        camera.position.z = 6;
        camera.lookAt(new THREE.Vector3(0., 0., 0.));
        return camera;
    }

    function addRendering() {
        // Create the renderer
        const renderer = new THREE.WebGLRenderer({
            antialias: false,
            alpha: true,
            powerPreference: "high-performance",
            stencil: false,
            depth: false
        });

        renderer.autoClear = false;

        const container = document.getElementById( 'canvasContainer' );
        container.appendChild(renderer.domElement);

        const bloomOptions = {
            luminanceThreshold: 0.9,
            luminanceSmoothing: 0.7,
            intensity: 0.8,
            radius: 0.1,
        }
        const bloomPass = new BloomEffect(bloomOptions);
        const FXAAPass = new FXAAEffect();

        var composer = new EffectComposer(renderer);
        composer.setSize(600, 600);
        composer.addPass(new RenderPass(scene, camera));
        composer.addPass(new EffectPass(camera, FXAAPass, bloomPass));
        return composer;
    }

    function update() {
        setTimeout(function() {
            let currTime = new Date().getTime() / 1000;
            let dt = currTime - (lastFrameTime || currTime);
            totalGameTime += dt;
            update(dt, totalGameTime);
            lastFrameTime = currTime;
        }, 0);
    }

    // Controls
    let isDragging = false;
    let previousMousePosition = {
        x: 0,
        y: 0
    };

    let lastFrameTime = new Date().getTime() / 1000;
    let totalGameTime = 0;

    const {scene, cube} = constructScene();
    const camera = addCamera();
    const composer = addRendering();

    // cube.children[0] = the outer wrapper;
    // cube.children[0].children[0] = the inner wrapper;
    // cube.children[0].children[0].children[0] one side of the actual cube
    tRotate(cube.children[0].children[0], 2000);

    requestAnimationFrame(function render() {
        requestAnimationFrame(render);
        cube.children[0].rotation.x += 0.005;
        cube.children[0].rotation.y += 0.005;
        cube.children[0].rotation.z += 0.005;
        TWEEN.update();
        composer.render();
    });
    addControls();
    update();
</script>
<div class="canvas-container" id="canvasContainer"></div>
<div class="god-rays-wrapper"><div class="god-rays"></div></div>
</body>
</html>

Part 1 with the basics is here: https://devslovecoffee.com/making-the-resend-cube-from-scratch-using-three-js/.
Part 2 with the Bloom and Animation here: https://devslovecoffee.com/resend-cube-lookalike-part-2/.

The Resend Cube Lookalike Part 2 - Bloom and Animation

Peter Bokor — Fri, 14 Jul 2023 15:46:33 +0000

The unfinished stuff from Making the Resend cube from scratch using Three.js bothered me, So part 2 with bloom and animation is here. This is a continuation of my previous post and builds on the code we have produced, so be sure to check it out and catch up.

First things first

In order to do the fun stuff, we need to rework the imports. It works in the current, very simple, setup, but adding more imports - like bloom, or render pass, just won't work, as they are not in the main three.js lib.

What we will use is called an importmap - basically a JSON object, that is used by js to map your imports within a module to their corresponding value, represented as an URL. Using importmap allows us to import and specific packages from the three.js examples.

We will just add this piece of code to the <head> part of our code.

<script type="importmap">
  {
    "imports": {
      "three": "https://cdn.jsdelivr.net/npm/three@0.142.0/build/three.module.js",
      "OrbitControls":"https://cdn.jsdelivr.net/npm/three@0.142.0/examples/jsm/controls/OrbitControls.js",
    }
  }
</script>

Then add the following to our <script>:

import * as THREE from 'three';
import { OrbitControls } from 'OrbitControls';

We are now using a different version of OrbitControls, so we need a different setup:

const controls = new OrbitControls(camera,renderer.domElement);
// disable zoom
controls.enableZoom = false;
// disable pan
controls.enablePan = false;

We have removed the THREE_ADDONS from before using OrbitControls (since we import it in a different way), and added the lines to disable zoom and pan as those are implemented in this version. The cube should look exactly the same, but now we can build further.

We now have an extensible imports solution, allowing us to use all the goodness that three.js provides.

Bloom

With the imports out of the way, we can start with the relatively straightforward thing to implement - Bloom. To add the bloom effect, we need to add some things:

the first one is EffectComposer, which lets you add different post-processing effects
the second thing we add is a RenderPass, which allows you to chain the actual events
the last thing we add is the UnrealBloomPass - the actual filter responsible for the bloom

To do all this, we start with editing the importmap to add the imports:

<script type="importmap">
  {
    "imports": {
      "three": "https://cdn.jsdelivr.net/npm/three@0.142.0/build/three.module.js",
      "OrbitControls":"https://cdn.jsdelivr.net/npm/three@0.142.0/examples/jsm/controls/OrbitControls.js",
      "UnrealBloomPass":"https://cdn.jsdelivr.net/npm/three@0.142.0/examples/jsm/postprocessing/UnrealBloomPass.js",
      "EffectComposer":"https://cdn.jsdelivr.net/npm/three@0.142.0/examples/jsm/postprocessing/EffectComposer.js",
      "RenderPass":"https://cdn.jsdelivr.net/npm/three@0.142.0/examples/jsm/postprocessing/RenderPass.js"
    }
  }
</script>

then we import them in our module like so:

import * as THREE from 'three';
import { UnrealBloomPass } from 'UnrealBloomPass';
import { EffectComposer } from 'EffectComposer';
import { RenderPass } from 'RenderPass';
import { OrbitControls } from 'OrbitControls';

Now we can replace the old code creating the renderer:

// Create the renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

with the new code creating the renderer, the effects composer and adding the bloom effect:

// Create the renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
// make it sharper
renderer.setPixelRatio(window.devicePixelRatio * 1.5);
document.body.appendChild(renderer.domElement);

// Create effects
const bloomPass = new UnrealBloomPass(new THREE.Vector2(1000, 1000), 1.5, 0.4, 0.85)
bloomPass.threshold = 0.3
bloomPass.strength = 0.7
bloomPass.radius = 0.2
bloomPass.renderToScreen = true

var composer = new EffectComposer(renderer);
composer.setSize(window.innerWidth, window.innerHeight);
var renderPass = new RenderPass(scene, camera);

composer.addPass(renderPass);
composer.addPass(bloomPass);

As the final step, we replace the renderer.render(scene, camera); call in the animate function with composer.render(); and we are done. Now our cube looks a bit more sexy thanks to the bloom effect.

The parameters for the bloom effect are adjustable and I have not explored too many options - I've just used whatever looked ok. Feel free to experiment with them and search for a better look.

Animation

Now we want to add the animation - rotating the sides of the cube. The Resend cube, our inspiration, always rotates 2 opposite sides in random intervals - leading me to believe that the construction of the cube is the following:

Rotating then is a simple act of rotating layers 1 and 3, 180 degrees (or PI). Sounds easy enough.

Firstly, we need to augment the function used to create the cube.

function makeCubes() {
    const material = new THREE.MeshStandardMaterial({ color: 0x2a2a2a, metalness: 1, roughness: 0.11 });
    const numCubes = 3;
    // Create the group, we will add layers to the group
    const cubes = new THREE.Object3D();
    const offset = (numCubes - 1) / 2;
    // iterate over all dimensions
    for(let i = 0; i < numCubes; i ++) {
        // create the layer
        const layer = new THREE.Object3D();
        for(let j = 0; j < numCubes; j ++) {
            for(let k = 0; k < numCubes; k ++) {
                const geom = createBoxWithRoundedEdges(1, 1, 1, .17, 20);
                const x = (i - offset) * 1.03;
                const y = (j - offset) * 1.03;
                const z = (k - offset) * 1.03;
                geom.translate(x, y, z);
                const cube = new THREE.Mesh(geom, material);
                layer.add(cube);
            }
        }
        cubes.add(layer);
    }
return cubes;
}

We now create the cube as an object which holds the layers, that hold the actual cubes - exactly as is shown in the picture above. We have also enhanced the cube creation a little bit - the numCubes now works properly and spawns the correct amount of cubes per side, we always center the cube using the offset, and we have added a little bit of spacing between the cubes.

That's all for the structure side of the animation. To rotate the layers, I have found a neat little function. It uses the TWEEN library to interpolate between 2 states over some time. It is set up to endlessly repeat itself rotating the layers.

The setup process for tween is similar to the others:

add to importmap: "tween": "https://cdn.jsdelivr.net/npm/@tweenjs/tween.js@18.5.0/dist/tween.esm.js"
add to the start of you module: import TWEEN from 'tween';
add to your animate function: TWEEN.update(); so TWEEN knows when to update the interpolated states

You are now ready to use TWEEN. The rotate function itself is pretty straightforward: it takes the object it should rotate, the angle to rotate the object, time over which to rotate, and the pause between 2 rotations, and endlessly calls itself rotating the object and waiting for the set time.

function tRotate( obj, angles, delay, pause ) {
    new TWEEN.Tween(obj.rotation)
    .delay(pause)
    .to( {
        x: obj.rotation._x + angles.x,
        y: obj.rotation._y + angles.y,
        z: obj.rotation._z + angles.z
    }, delay )
    .onComplete(function() {
        setTimeout( tRotate, pause, obj, angles, delay, pause );
    })
    .start();
}

We can call the function right after adding the cube to the scene, with the object we rotate being the first of the layers - object.chilren[0]:

// Create a cube
const cube = makeCubes();
scene.add(cube);

tRotate(cube.children[0], {x:-Math.PI,y:0,z:0}, 2000, 1000 );

You should notice one side of your cube rotating. It is always the same side though, which doesn't look that good.

Fancier animation

To make the feeling better we can do a little trick - rotate the whole cube 90 degrees along one of the axes right before the side rotates, which will produce the effect of rotating a different side every time.

The current setup of the cube would not allow for this because of a simple reason - we already rotate the cube in our animate function. Were we to rotate the whole cube before rotating one of its sides, it would change direction completely, messing up the whole feeling.

What we need to do is add a wrapper to the cube, rotate the wrapper continuously, and, when the time comes, rotate the wrapped element.

Adding the wrapper is easy - we just add this at the end of our makeCubes function:

const wrapper = new THREE.Object3D();
wrapper.add(cubes);
return wrapper;

We basically take the cubes object and just wrap it in another object. What is does is allow us to transform (including rotate) each object separately.

The only thing left is to augment the tRotate function to rotate the inner cube before rotating the side, and the call of the function, to pass the correct elements needed to rotate:

function tRotate( parent, children, angles, delay, pause ) {
    parent.rotateY(Math.PI / 2);
    parent.rotateZ(Math.PI / 2)
    new TWEEN.Tween(children.rotation)
    .delay(pause)
    .to( {
        x: children.rotation._x + angles.x,
        y: children.rotation._y + angles.y,
        z: children.rotation._z + angles.z
    }, delay )
    .onComplete(function() {
        setTimeout( tRotate, pause, parent, children, angles, delay, pause );
    })
    .start();
}
...
// cube.children[0] = the wrapped cube; cube.children[0].children[0] = one side of the wrapped cube
tRotate(cube.children[0], cube.children[0].children[0], {x:-Math.PI,y:0,z:0}, 2000, 1000 );

Adding Randomness

Some other enhancements we could do to make the feel more refined are:

rotate a random layer of the cube
use a random direction of the rotation.
rotate the whole cube along a random axis
randomize the pause between rotations

function tRotate( cube, delay ) {
    // rotate the wrapped cube 90 deg along y/z axis
    if (Math.random() > 0.5) {
    cube.rotateY(Math.PI / 2);
    }
    else {
    cube.rotateZ(Math.PI / 2);
    }
    // pick a random layer to rotate
    const sideIndex = Math.floor(Math.random() * 3);
    const side = cube.children[sideIndex];

    // pick a random direction to rotate
    const angles = {
        x: Math.random() > 0.5 ? -Math.PI : Math.PI,
        y:0,
        z:0
    }

    // pick a random time to wait between rotations
    const pause = Math.random() * 1000;

    new TWEEN.Tween(side.rotation)
        .delay(pause)
        .to( {
            x: side.rotation._x + angles.x,
            y: side.rotation._y + angles.y,
            z: side.rotation._z + angles.z
        }, delay )
        .onComplete(function() {
            setTimeout( tRotate, pause, cube, delay );
        })
        .start();
}
...
// cube.children[0] = the wrapped cube; cube.children[0].children[0] = one side of the wrapped cube
tRotate(cube.children[0], 2000);

Final remarks

We now have a pretty solid Resend cube lookalike (with our own animation enhancement as well :) ). There are some parts of the Resend cube which we don't have yet, that make id run and looks better. I suspect it is partly due to the lights, but I already have a solution in mind, and the running better part should be fixable with some optimizations.

I have originally wanted to do bloom, animation, better lightning and the god rays in this post, but it got too long right around the animation part. Sorry for that. I want to do these things however, so expect a part 3 with the lightning, god rays, and optimizations.

Once again, the complete code can be found below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Resend Cube Lookalike</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
    <script type="importmap">
        {
            "imports": {
                "three": "https://cdn.jsdelivr.net/npm/three@0.142.0/build/three.module.js",
                "OrbitControls":"https://cdn.jsdelivr.net/npm/three@0.142.0/examples/jsm/controls/OrbitControls.js",
                "UnrealBloomPass":"https://cdn.jsdelivr.net/npm/three@0.142.0/examples/jsm/postprocessing/UnrealBloomPass.js",
                "EffectComposer":"https://cdn.jsdelivr.net/npm/three@0.142.0/examples/jsm/postprocessing/EffectComposer.js",
                "RenderPass":"https://cdn.jsdelivr.net/npm/three@0.142.0/examples/jsm/postprocessing/RenderPass.js",
                "tween": "https://cdn.jsdelivr.net/npm/@tweenjs/tween.js@18.5.0/dist/tween.esm.js"
            }
        }
    </script>
</head>
<body>

<script type="module">
    import * as THREE from 'three';
    import TWEEN from 'tween';
    import { UnrealBloomPass } from 'UnrealBloomPass';
    import { EffectComposer } from 'EffectComposer';
    import { RenderPass } from 'RenderPass';
    import { OrbitControls } from 'OrbitControls';

    const CUBES_PER_SIDE = 3;

    function createBoxWithRoundedEdges( width, height, depth, radius0, smoothness ) {
        let shape = new THREE.Shape();
        let eps = 0.00001;
        let radius = radius0 - eps;
        shape.absarc( eps, eps, eps, -Math.PI / 2, -Math.PI, true );
        shape.absarc( eps, height -  radius * 2, eps, Math.PI, Math.PI / 2, true );
        shape.absarc( width - radius * 2, height -  radius * 2, eps, Math.PI / 2, 0, true );
        shape.absarc( width - radius * 2, eps, eps, 0, -Math.PI / 2, true );
        let geometry = new THREE.ExtrudeBufferGeometry( shape, {
            depth: depth - radius0 * 2,
            bevelEnabled: true,
            bevelSegments: smoothness * 2,
            steps: 1,
            bevelSize: radius,
            bevelThickness: radius0,
            curveSegments: smoothness
        });

        geometry.center();

        return geometry;
    }

    function makeCubes() {
        const material = new THREE.MeshStandardMaterial({ color: 0x2a2a2a, metalness: 1, roughness: 0.11 });
        const numCubes = CUBES_PER_SIDE;
        // Create the group, we will add layers to the group
        const cubes = new THREE.Object3D();
        // iterate over all dimensions
        const offset = (numCubes - 1) / 2;
        for(let i = 0; i < numCubes; i ++) {
            // create the layer
            const layer = new THREE.Object3D();
            for(let j = 0; j < numCubes; j ++) {
                for(let k = 0; k < numCubes; k ++) {
                    const geom = createBoxWithRoundedEdges(1, 1, 1, .17, 20);
                    const x = (i - offset) * 1.03;
                    const y = (j - offset) * 1.03;
                    const z = (k - offset) * 1.03;
                    geom.translate(x, y, z);
                    const cube = new THREE.Mesh(geom, material);
                    layer.add(cube);
                }
            }
            cubes.add(layer);
        }
        const wrapper = new THREE.Object3D();
        wrapper.add(cubes);
        return wrapper;
    }

    function tRotate( cube, delay ) {
        // rotate the wrapped cube 90 deg along y/z axis
        if (Math.random() > 0.5) {
            cube.rotateY(Math.PI / 2);
        }
        else {
            cube.rotateZ(Math.PI / 2);
        }
        // pick a random layer to rotate
        const sideIndex = Math.floor(Math.random() * CUBES_PER_SIDE);
        const side = cube.children[sideIndex];

        // pick a random direction to rotate
        const angles = {
            x: Math.random() > 0.5 ? -Math.PI : Math.PI,
            y:0,
            z:0
        }

        // pick a random time to wait between rotations
        const pause = Math.random() * 1000;

        new TWEEN.Tween(side.rotation)
                .delay(pause)
                .to( {
                    x: side.rotation._x + angles.x,
                    y: side.rotation._y + angles.y,
                    z: side.rotation._z + angles.z
                }, delay )
                .onComplete(function() {
                    setTimeout( tRotate, pause, cube, delay );
                })
                .start();
    }


    // Create the scene
    const scene = new THREE.Scene();
    scene.background = new THREE.Color( 0x000000 );

    // Create the light
    const light = new THREE.PointLight( 0xffffff, 100, 500 );
    light.position.set( 0, 5, 10 );
    scene.add( light );
    const light2 = new THREE.PointLight( 0xffffff, 10, 500 );
    light2.position.set( 0, -10, -5 );
    scene.add( light2 );

    // Create the camera
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    // Create the renderer
    const renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setSize(window.innerWidth, window.innerHeight);
    // make it sharper
    renderer.setPixelRatio(window.devicePixelRatio * 1.5);
    document.body.appendChild(renderer.domElement);

    // Create effects
    const bloomPass = new UnrealBloomPass(new THREE.Vector2(1000, 1000), 1.5, 0.4, 0.85)
    bloomPass.threshold = 0.4
    bloomPass.strength = 0.7
    bloomPass.radius = 0.2
    bloomPass.renderToScreen = true

    var composer = new EffectComposer(renderer);
    composer.setSize(window.innerWidth, window.innerHeight);
    var renderPass = new RenderPass(scene, camera);

    composer.addPass(renderPass);
    composer.addPass(bloomPass);

    // Create a cube
    const cube = makeCubes();
    scene.add(cube);

    // cube.children[0] = the wrapped cube; cube.children[0].children[0] = one side of the wrapped cube
    tRotate(cube.children[0], 2000);

    // Position the camera
    camera.position.z = 10;

    const controls = new OrbitControls(camera,renderer.domElement);
    // disable zoom
    controls.enableZoom = false;
    // disable pan
    controls.enablePan = false;

    // Animate the cube
    function animate() {
        requestAnimationFrame(animate);
        cube.rotation.x += 0.005;
        cube.rotation.y += 0.005;
        cube.rotation.z += 0.005;
        controls.update();
        TWEEN.update();
        composer.render();
    }
    animate();
</script>
</body>
</html>

Part 1 - making the base cube here: https://devslovecoffee.com/making-the-resend-cube-from-scratch-using-three-js/.
Part 3 where tie it all up here: https://devslovecoffee.com/resend-cube-lookalike-part-3/.

Making the Resend cube from scratch using Three.js

Peter Bokor — Fri, 16 Jun 2023 12:29:04 +0000

4 months ago - on 30th January, I have seen the https://resend.com webpage with the amazing looking 3D cube. My brain immediately kicked into gear trying to figure out how they did it.

4 months later, their recent launch reminded me of this desire of mine to steal it (Steal like an artist reference, yay!). As I have some experience with Three.js, I went right in.

Start with a boilerplate

This sets you up with the most basic scene - a single white cube, black background, and standard material on the cube, meaning you should see the shadows and stuff. Pretty neat. You're welcome. (I have actually stolen this and adapted it a bit from 3dcodekits; thanks 3dcodekits, I love you!).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Resend Cube</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/three@0.142.0/build/three.min.js"></script>
<script>
    // Create the scene
    const scene = new THREE.Scene();
    scene.background = new THREE.Color( 0x000000 );

    // Create the light
    const light = new THREE.DirectionalLight( 0xffffff );
    light.position.set( 0, 0.5, 1 );
    scene.add( light );
    // Create the camera
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    // Create the renderer
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // Create a cube
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshStandardMaterial({ color: 0xffffff });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    // Position the camera
    camera.position.z = 10;

    // Animate the cube
    function animate() {
        requestAnimationFrame(animate);
        cube.rotation.x += 0.005;
        cube.rotation.y += 0.005;
        renderer.render(scene, camera);
    }
    animate();
</script>
</body>
</html>

Let's make the cube a bit less cuber (more round)

Turns out, three js does not have a direct solution to this. So a quick google search yielded this neat little function (source)

function createBoxWithRoundedEdges( width, height, depth, radius0, smoothness ) {
    let shape = new THREE.Shape();
    let eps = 0.00001;
    let radius = radius0 - eps;
    shape.absarc( eps, eps, eps, -Math.PI / 2, -Math.PI, true );
    shape.absarc( eps, height -  radius * 2, eps, Math.PI, Math.PI / 2, true );
    shape.absarc( width - radius * 2, height -  radius * 2, eps, Math.PI / 2, 0, true );
    shape.absarc( width - radius * 2, eps, eps, 0, -Math.PI / 2, true );
    let geometry = new THREE.ExtrudeBufferGeometry( shape, {
        amount: depth - radius0 * 2,
        bevelEnabled: true,
        bevelSegments: smoothness * 2,
        steps: 1,
        bevelSize: radius,
        bevelThickness: radius0,
        curveSegments: smoothness
    });

    geometry.center();

    return geometry;
}

Calling the function produces a neat little cube with rounded corners. you can tweak how much you would like to have the corners rounded with the 4th parameter - radius0. (don't forget to adjust smoothness as you make the radius larger. You'll see why once you do it)

const geometry = createBoxWithRoundedEdges( 1, 1, 1, .06, 20 ); //the smoother the better

Material + Lights

Now we want the cube to feel like the resend one - meaning we need to make it metal and a different light. Metal is easy - we already use standard material, so we just add some metalness and tone down roughness (while we are at it, we change the color to dark grey).

const material = new THREE.MeshStandardMaterial({ color: 0x2a2a2a, metalness: 1, roughness: 0.11 });

Now the cube is faded a lot - it almost blends into the background, and you occasionally see some flashes. We need to replace the light with a point light and tune it to always light some part of the cube up.

Compared to directional light, which gets emitted in a specific direction (but is quite weak and falling on a side of the cube creates a "flashlight" effect - you see small surface being affected), point light emits light in all directions, which creates a nice effect we can use - the light reflected in the cube will be larger, and always hitting surfaces - edges for even more cool effect. We create quite a large point light capable of lightning a whole side of the cube.

We can also add a second light for the undertones. Placing it below the cube ensures that we always have some part highlighted.

// Create the light
const light = new THREE.PointLight( 0xffffff, 100, 500 );
light.position.set( 0, 10, 10 );
scene.add( light );

const light2 = new THREE.PointLight( 0xffffff, 10, 500 );
light2.position.set( 0, -10, -5 );
scene.add( light2 );

You can play with the material properties and lights (intensities, colors) to create some cool effects.

Making baby cubes

Here comes the fun part. We will create another function which will call the rounded edges cube function in some nested loops and make 27 cubes. Let's go.

function makeCubes() {
    const material = new THREE.MeshStandardMaterial({ color: 0x1a1a1a, metalness: 1, roughness: 0.18 });
    const numCubes = 3;
    // Create the group, we will add cubes to the group
    const cubes = new THREE.Group();
    // iterate over all dimensions + trick to center the cube
    for (let i = -Math.floor(numCubes / 2); i <= Math.floor(numCubes / 2); i++) {
        for (let j = -Math.floor(numCubes / 2); j <= Math.floor(numCubes / 2); j++) {
            for (let k = -Math.floor(numCubes / 2); k <= Math.floor(numCubes / 2); k++) {
                // adding the cubes
                const geom = createBoxWithRoundedEdges(1, 1, 1, .1, 20);
                geom.translate(i, j, k);
                const cube = new THREE.Mesh(geom, material);
                cubes.add(cube);
            }
        }
    }
    return cubes;
}

All we need to do now is call it:

// Create a cube
const cube = makeCubes();
scene.add(cube);

Adding controls

As a bonus we can add controls and rotate the cube as we like. If you want to disable the autorotation, just comment away the two cube.rotation lines.

First we need to import addons script. Place this line below the three import script.

<script src="https://cdn.jsdelivr.net/npm/three-addons@1.2.0/build/three-addons.min.js"></script>

Then we add the controls - you can add it anywhere, for example near the camera = ... line.

const controls = new THREE_ADDONS.OrbitControls(camera,renderer.domElement);

And finally we edit the animate function which gets called every time something is rendering.

// Animate the cube
function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.005;
    cube.rotation.y -= 0.005;
    controls.update();
    renderer.render(scene, camera);
}

Why does the resend cube look better?

BLOOM - the glow effect you see coming off the cube is called bloom. In three js it is overly complicated to add (example_1 , example_2 ), and I was just too lazy. I have actually implemented it once in another project which I will perhaps share some other time.
The mini cubes are not the same - resend has different geometry with the "squares" that are being extruded into cubes having rounded corners as well. Might be a good exercise for both you and me to try and make some other time.
The effect of rotating layer - This looks cool and in theory could be made by always rotating just 1 layer - right before rotating, you can flip the cube by a before-defined, random transformation turning it on one of the sides. This way you can create the effect that you always rotate a different side.
Better lightning - Nailing the lightning is difficult, so I approximated the best I could (I gave it 2 minutes).

I encourage you to add these features and tag me in the results - perhaps on Twitter. Have fun.

Final code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Resend Cube</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>

<script src="https://cdn.jsdelivr.net/npm/three@0.142.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three-addons@1.2.0/build/three-addons.min.js"></script>

<script type="module">
    function createBoxWithRoundedEdges( width, height, depth, radius0, smoothness ) {
        let shape = new THREE.Shape();
        let eps = 0.00001;
        let radius = radius0 - eps;
        shape.absarc( eps, eps, eps, -Math.PI / 2, -Math.PI, true );
        shape.absarc( eps, height -  radius * 2, eps, Math.PI, Math.PI / 2, true );
        shape.absarc( width - radius * 2, height -  radius * 2, eps, Math.PI / 2, 0, true );
        shape.absarc( width - radius * 2, eps, eps, 0, -Math.PI / 2, true );
        let geometry = new THREE.ExtrudeBufferGeometry( shape, {
            depth: depth - radius0 * 2,
            bevelEnabled: true,
            bevelSegments: smoothness * 2,
            steps: 1,
            bevelSize: radius,
            bevelThickness: radius0,
            curveSegments: smoothness
        });

        geometry.center();

        return geometry;
    }

    function makeCubes() {
        const material = new THREE.MeshStandardMaterial({ color: 0x2a2a2a, metalness: 1, roughness: 0.11 });
        const numCubes = 3;
        // Create the group, we will add cubes to the group
        const cubes = new THREE.Group();
        // iterate over all dimensions
        for (let i = -Math.floor(numCubes / 2); i <= Math.floor(numCubes / 2); i++) {
            for (let j = -Math.floor(numCubes / 2); j <= Math.floor(numCubes / 2); j++) {
                for (let k = -Math.floor(numCubes / 2); k <= Math.floor(numCubes / 2); k++) {
                    // adding the cubes
                    const geom = createBoxWithRoundedEdges(1, 1, 1, .17, 20);
                    geom.translate(i, j, k);
                    const cube = new THREE.Mesh(geom, material);
                    cubes.add(cube);
                }
            }
        }
        return cubes;
    }

    // Create the scene
    const scene = new THREE.Scene();
    scene.background = new THREE.Color( 0x000000 );

    // Create the light
    const light = new THREE.PointLight( 0xffffff, 100, 500 );
    light.position.set( 0, 5, 10 );
    scene.add( light );
    const light2 = new THREE.PointLight( 0xffffff, 10, 500 );
    light2.position.set( 0, -10, -5 );
    scene.add( light2 );

    // Create the camera
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    // Create the renderer
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // Create a cube
    const cube = makeCubes();
    scene.add(cube);

    // Position the camera
    camera.position.z = 10;

    const controls = new THREE_ADDONS.OrbitControls(camera,renderer.domElement);

    // Animate the cube
    function animate() {
        requestAnimationFrame(animate);
        cube.rotation.x += 0.005;
        cube.rotation.y -= 0.005;
        controls.update();
        renderer.render(scene, camera);
    }
    animate();
</script>
</body>
</html>