{"id":495238,"date":"2026-09-19T05:50:15","date_gmt":"2026-09-19T05:50:15","guid":{"rendered":"https:\/\/savepearlharbor.com\/?p=495238"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=495238","title":{"rendered":"Centrifugal. A flexible user interface for creating standalone web applications"},"content":{"rendered":"
\n

Hi everyone! Today I\u2019d like to talk about another\u00a0open-source<\/a>\u00a0project of mine for building web applications based on Angular.<\/p>\n

Over the past few years, I have conducted numerous successful experiments with high-performance web interfaces, which has given me a clear understanding of the structure and architecture for the project discussed below.<\/p>\n

So, meet\u00a0Centrifugal<\/a>. Check out the project\u2019s\u00a0official website<\/a>\u2014there are plenty of cool use cases there!<\/p>\n

The project was originally conceived to create a set of high-performance, flexible tools and components for building web applications. However, during one of the development iterations, I decided to add support for creating \u201call-in-one\u201d interfaces\u2014specifically, a standalone application mode featuring a fully customizable virtual keyboard. This enabled full support for building user interfaces for applications such as self-service kiosks and similar systems.<\/p>\n

Keyboard position, layouts, key sets, and styles are fully customizable. A custom mechanism for focusing on on-screen elements has been implemented. When a text field gains focus, the virtual keyboard slides out (depending on the configuration), and scroll containers undergo multi-level scrolling up to the keyboard\u2019s actual edge, ensuring ease of input and readability.<\/p>\n

Since custom scroll containers are used, the handling of standard interactive HTML components\u2014such as <button\/>, <a\/>, <input\/>, <textarea\/>, and so on\u2014changes slightly. To ensure correct handling, a special\u00a0NtControl<\/code>\u00a0directive has been created; it must be applied to all standard interactive HTML components.<\/p>\n

Example:<\/p>\n

<button ntControl (onVirtualClick)=\"onVirtualClickHandler($event)\">  My button<\/button><\/code>
<\/a><\/div><\/pre>\n
Full support has been implemented for\u00a0<input\/><\/code>\u00a0types such as text, password, number, email, tel, and URL. Additionally, you can specify a custom text field type and configure the corresponding keyboard layout for that type.<\/p>\n
<input type=\"text\" ntControl value\"Text\"><\/code>
<\/a><\/div><\/pre>\n
For an example of a custom type and keyboard layout, see the\u00a0Virtual keyboard<\/a>\u00a0link. Using\u00a0Centrifugal<\/a>\u00a0components is quite simple; take a look at the example of creating a scroll-view:<\/p>\n
<nt-scroll-view #scrollView>  <div class=\"scroll-view__content\" [style.width.px]=\"3000\" [style.height.px]=\"3000\"    [class.grabbing]=\"scrollView.$grabbing | async\">    My content  <\/div><\/nt-scroll-view><\/code>
<\/a><\/div><\/pre>\n
or a slider example:<\/p>\n
<nt-slider [step]=\"1\" [max]=\"100\" [value]=\"value()\" thumbSize=\"50%\" (onChange)=\"onSliderChangeHandler($event)\"><\/nt-slider><\/code>
<\/a><\/div><\/pre>\n
Fluid UI<\/h3>\n
Now I would like to demonstrate the Fluid UI concept and the principles of how it works.<\/p>\n
Each component of the user interface\u2014developed using the\u00a0Centrifugal<\/a>\u00a0library\u2014interacts with the other components along a hierarchical chain, employing specific \u201cphysical\u201d interactions. Forces of compression or tension may be applied, impulses transmitted, and so forth.<\/p>\n
\"1000467292.gif\"<\/p>\n
A representation of the interaction between Fluid UI components.<\/figcaption><\/div>\n<\/figure>\n
The library does not handle standard web scroll containers; instead,\u00a0Centrifugal<\/a>\u00a0employs its own implementation of scroll containers featuring specific \u201cphysical\u201d properties\u2014such as scroll speed, acceleration, friction, and so on. This tool focuses entirely on working with standard HTML components, providing developers with familiar methods for building web applications.<\/p>\n
In addition to the \u201cphysics\u201d engine, each base component accepts a set of parameters to generate a motion blur effect. Motion blur is disabled by default, as it is a relatively resource-intensive post-processing effect.<\/p>\n
\"1000467293.gif\"<\/p>\n
An  example demonstrating the compression\/stretching of user interface components.<\/figcaption><\/div>\n<\/figure>\n
In addition to motion blur, virtual lists can apply element transformations to create 3D list spaces, as well as depth of field and fog effects for list elements receding into the background.<\/p>\n
\"1000467294.gif\"<\/p>\n
Drawer component with vertical spacing.<\/figcaption><\/div>\n<\/figure>\n
Support is provided for complex component interactions\u2014such as the example in the image above, which demonstrates a sectioned \u201cSheet\u201d web component. In addition to controlling the component itself (opening or closing it), the user can simultaneously interact with its internal components.<\/p>\n
Most importantly, notice how simple it is to use complex component implementations in the code:<\/p>\n
<nt-sheet #sheet class=\"sheet\" position=\"bottom\">  <div class=\"sheet__content\" [class.grabbing]=\"sheet.$grabbing | async\">    Content  <\/div><\/nt-sheet><\/code>
<\/a><\/div><\/pre>\n
It is designed with developer ease of use in mind.<\/p>\n
All this and more enables you to create sophisticated next-gen web interfaces for your applications!<\/p>\n
API<\/h3>\n
The API is available for extensions, enabling the creation of compelling components. See an\u00a0example of a custom component<\/a>\u00a0built using the library\u2019s standard API.<\/p>\n
A full description of the API and usage examples are provided on the project\u2019s\u00a0official website<\/a>.<\/p>\n
Examples<\/h3>\n
The\u00a0centrifugal\/examples<\/code>\u00a0section features great examples of how to use the tool. You can view live demos on the project\u2019s official website under \u201cAdvanced Examples.\u201d<\/p>\n<\/div>\n
\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 https:\/\/habr.com\/ru\/articles\/1084070\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Hi everyone! Today I\u2019d like to talk about another\u00a0open-source\u00a0project of mine for building web applications based on Angular.Over the past few years, I have conducted numerous successful experiments with high-performance web interfaces, which has given me a clear understanding of the structure and architecture for the project discussed below.So, meet\u00a0Centrifugal. Check out the project\u2019s\u00a0official website\u2014there are plenty of cool use cases there!The project was originally conceived to create a set of high-performance, flexible tools and components for building web applications. However, during one of the development iterations, I decided to add support for creating \u201call-in-one\u201d interfaces\u2014specifically, a standalone application mode featuring a fully customizable virtual keyboard. This enabled full support for building user interfaces for applications such as self-service kiosks and similar systems.Keyboard position, layouts, key sets, and styles are fully customizable. A custom mechanism for focusing on on-screen elements has been implemented. When a text field gains focus, the virtual keyboard slides out (depending on the configuration), and scroll containers undergo multi-level scrolling up to the keyboard\u2019s actual edge, ensuring ease of input and readability.Since custom scroll containers are used, the handling of standard interactive HTML components\u2014such as <button\/>, <a\/>, <input\/>, <textarea\/>, and so on\u2014changes slightly. To ensure correct handling, a special\u00a0NtControl\u00a0directive has been created; it must be applied to all standard interactive HTML components.Example:<button ntControl (onVirtualClick)=»onVirtualClickHandler($event)»>  My button<\/button>Full support has been implemented for\u00a0<input\/>\u00a0types such as text, password, number, email, tel, and URL. Additionally, you can specify a custom text field type and configure the corresponding keyboard layout for that type.<input type=»text» ntControl value»Text»>For an example of a custom type and keyboard layout, see the\u00a0Virtual keyboard\u00a0link. Using\u00a0Centrifugal\u00a0components is quite simple; take a look at the example of creating a scroll-view:<nt-scroll-view #scrollView>  <div class=»scroll-view__content» [style.width.px]=»3000″ [style.height.px]=»3000″    [class.grabbing]=»scrollView.$grabbing | async»>    My content  <\/div><\/nt-scroll-view>or a slider example:<nt-slider [step]=»1″ [max]=»100″ [value]=»value()» thumbSize=»50%» (onChange)=»onSliderChangeHandler($event)»><\/nt-slider>Fluid UINow I would like to demonstrate the Fluid UI concept and the principles of how it works.Each component of the user interface\u2014developed using the\u00a0Centrifugal\u00a0library\u2014interacts with the other components along a hierarchical chain, employing specific \u201cphysical\u201d interactions. Forces of compression or tension may be applied, impulses transmitted, and so forth.A representation of the interaction between Fluid UI components.The library does not handle standard web scroll containers; instead,\u00a0Centrifugal\u00a0employs its own implementation of scroll containers featuring specific \u201cphysical\u201d properties\u2014such as scroll speed, acceleration, friction, and so on. This tool focuses entirely on working with standard HTML components, providing developers with familiar methods for building web applications.In addition to the \u201cphysics\u201d engine, each base component accepts a set of parameters to generate a motion blur effect. Motion blur is disabled by default, as it is a relatively resource-intensive post-processing effect.An  example demonstrating the compression\/stretching of user interface components.In addition to motion blur, virtual lists can apply element transformations to create 3D list spaces, as well as depth of field and fog effects for list elements receding into the background.Drawer component with vertical spacing.Support is provided for complex component interactions\u2014such as the example in the image above, which demonstrates a sectioned \u201cSheet\u201d web component. In addition to controlling the component itself (opening or closing it), the user can simultaneously interact with its internal components.Most importantly, notice how simple it is to use complex component implementations in the code:<nt-sheet #sheet class=»sheet» position=»bottom»>  <div class=»sheet__content» [class.grabbing]=»sheet.$grabbing | async»>    Content  <\/div><\/nt-sheet>It is designed with developer ease of use in mind.All this and more enables you to create sophisticated next-gen web interfaces for your applications!APIThe API is available for extensions, enabling the creation of compelling components. See an\u00a0example of a custom component\u00a0built using the library\u2019s standard API.A full description of the API and usage examples are provided on the project\u2019s\u00a0official website.ExamplesThe\u00a0centrifugal\/examples\u00a0section features great examples of how to use the tool. You can view live demos on the project\u2019s official website under \u201cAdvanced Examples.\u201d\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 https:\/\/habr.com\/ru\/articles\/1084070\/<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-495238","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/495238","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=495238"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/495238\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=495238"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=495238"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=495238"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}