Have you ever imagined how to create such a sophisticated user interface, that using on the front screen of the Tesla Model S plaid?
A bunch of flying panels and floating windows help to make your control experience smooth in all aspects. Moreover, the iPhone has almost become an almost natural continuous of your body and consciousness.
Panes is a key that opens a door for future interfaces where your thoughts are integrated with the program.
One Instance – thousands of solutions
The Panes are only provided for you in one single instance. You have only access to control your created instances with public methods and properties.
Control Pane instance like a spaceship or car. You can create many different instances, but with the same management interface. As many other front-end frameworks widely spread their duties to different components and tons of elements. Panes only focus on one.
This is the main concept of single-instance architecture for libraries and tools that we are strictly considering.
TIP 🍰: We focus on one type of instance and polish it as much as possible.
You are free to imagine, create, and use thousands of different variations with primary Pane instances. During the development of Panes, every millisecond of interaction is matter. No timeouts and timers should be, only natural asynchronous flow. What should we use in case of each vs in? In Panes, we will use for if it makes gestures to be sweetest.
The race is over: Vue, React, Angular, Svelte, JQuery
You can create react app or angular app, framework racing is not mattered anymore. Panes is would be the best framework-agnostic UI solution. Angular easily imports Panes to any controller without additional providers.
No excessive configuration is needed for module import. Vuejs also integrates Panes to any component with a few simple steps. Import as a module, create as an instance. JQuery is still here with full support.
The race is over, friendship is a winner. Every good package should have non-invasive import to any framework as an ECMA module or even default javascript AMD bundle.
The new generation of User Interfaces
Look at this simple example and imagine how difficult to realize it with no tools.
Look's quite familiar, isn't it? Have you ever seen something similar? The basis view of this scene was taken as the perfect example, from Bitcoin conf 22" – Presentation of Robinhood application UI/UX updates.
This is the hottest trending view of UI and Design nowadays, at all. Synthwave of the '80s is returned with a new quality of graphic. Fresh and sweetest bright colors: hotpink, hotgreen, with a dark background. But this is just a front makeup. All magic is in the modal window.
There are lots of modern interfaces using different types of floating windows, as you can see. Sophisticated UI is required, anyhow.
TIP 🍰: Such floating Pane you can implement to your interface in minutes, with your content. Just use the config of custom transitions, provided in the sources below.
Pane in this example uses a third-dimensional transition and touch gestures. Moving is intuitive, and fast swiping is automatic and will close the Pane. Drag the Pane with your finger: Pane will follow this Synthwave perspective, going away to the shadow, out of the scene.
How much time you will spend programming such sophisticated user gestures from zero? Also, Pane's behaviors should be smooth and reactive. This was achieved and maintained by hardware acceleration of transitions.
SOURCES
The full scene with Panes is available here
Bitcoin conf 22" – Robinhood application presentation
Scene not used for any commercial purposes.
Sweetest UI enhancement
The biggest piece of the cake here and you must try the gestures and transition of the Panes. In complicated interface planning, there are always obstacles and challenges you must struggle with.
From proper event listener assignments to transition timing functions, all of this stuff is not primary for UI controls but should be in handle.
TIP 🍰: You don't have to worry about gestures at all. We handle it out of the box.
Drag, Drops, Movements, Jumps, and Bounces – these all are predefined and what you will need is only to set up your direction for instances. Of course, for those who like to provide accurate configuration and sophisticated interactions, different public methods are allowed.
Language agnostic
If you're doubts about the top what should you use to create modern UI: typescript vs javascript? Chose what you like. Panes are using TypeScript for its stability, but there are also normal javascript bundles provided for those who prefer old-school javascript writing.
The good and sweetest cherry on the top of Pane's pie – async/await support. This is so huge leap was initiated for the JavaScript world after async/await functions were admitted to use as well as promises. Await for your Panes actions and transitions to be completed, for sure. Get rid of timeouts and callback hells.
Re-usable in full
No limitless for usage Panes next on your any front-end projects. Since you were create a configuration that matches your high fancy tastes, you will be able to use this configuration for any instance further.
Will it be flying transparent bottom panes, or horizontal picture-in-picture-like windows? This is fully re-usable with settings parameters.
TIP 🍰: Created pane design at once will be available in future with same configuration elsewhere.
You can even wrap your ready-to-use panes to your favorite framework component and use it with your minded API.
Modular architecture
Cupertino Panes 1.3.0 was pushed. From this version, the architecture of the whole system was fully modularized. There are different modules available for advanced configuration, transitions, backdrop usage, and other features.
TIP 🍰: Import only modules you are using to save the final bundle size and project budget.
We welcome for all developers to create their modules with different functions and transitions.
Does Panes library, framework, or component ?
The Panes is an Instance wrapped in to package for easy imports and usage. But these massive abilities, that package open for users, surely propose to call Panes a UI framework for sophisticated UI and great UX panels.
Do you wanna see it all in action? Getting started!
This is a little bit type of advertising for free open-source package that I'm proudly present. Thank you for attention 🙏
Top comments (0)