Component
As you scroll down the page, there will be three points where the page theme changes: from the default to the Guardian theme, then to the Ranger theme, then back to the default.
Component
This is the short introductory text for the Text Panel component inside the Accordion component.
Component
In browsers that support animation-timeline, the media will move on scroll.
Component
This is the short introductory text for the Text Panel component inside the Hero component.
Component
This is the short introductory text for the Text Panel component inside the Highlights component.
Lorem ipsum dolor sit amet, consectetur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Module
Animated statistics can be displayed in Item Grid or Sticky Scroll components.
Component
Displays single or multiple Feature items. If multiple, the items horizontally scroll into view, as you scroll the browser vertically. This is accomplished with minimal, performant JavaScript that doesn't break keyboard navigation of the content.
Component
This is the short introductory text for the Text Panel component inside the Item Grid component.
This is marquee text that loops.
Component
This is the short introductory text for the Text Panel component inside the Slider component.
-
Placeholder caption -
Placeholder caption -
Placeholder caption -
Placeholder caption The Engram
Read article -
Placeholder caption -
Placeholder caption
Component
Sticky Scroll
We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.
Article I
Section 1: Congress
All legislative Powers herein granted shall be vested in a Congress of the United States, which shall consist of a Senate and House of Representatives.
Section 2: The House of Representatives
The House of Representatives shall be composed of Members chosen every second Year by the People of the several States, and the Electors in each State shall have the Qualifications requisite for Electors of the most numerous Branch of the State Legislature.
No Person shall be a Representative who shall not have attained to the Age of twenty five Years, and been seven Years a Citizen of the United States, and who shall not, when elected, be an Inhabitant of that State in which he shall be chosen.
Representatives and direct Taxes shall be apportioned among the several States which may be included within this Union, according to their respective Numbers, which shall be determined by adding to the whole Number of free Persons, including those bound to Service for a Term of Years, and excluding Indians not taxed, three fifths of all other Persons. The actual Enumeration shall be made within three Years after the first Meeting of the Congress of the United States, and within every subsequent Term of ten Years, in such Manner as they shall by Law direct.The Number of Representatives shall not exceed one for every thirty Thousand, but each State shall have at Least one Representative; and until such enumeration shall be made, the State of New Hampshire shall be entitled to chuse three, Massachusetts eight, Rhode-Island and Providence Plantations one, Connecticut five, New-York six, New Jersey four, Pennsylvania eight, Delaware one, Maryland six, Virginia ten, North Carolina five, South Carolina five, and Georgia three.
When vacancies happen in the Representation from any State, the Executive Authority thereof shall issue Writs of Election to fill such Vacancies.
The House of Representatives shall chuse their Speaker and other Officers;and shall have the sole Power of Impeachment.
Component
Single or multiple pieces of media can be shown.
Component
Embedded videos know if other videos are on the page and will ensure only one video is playing at a time.
Micro-Animations
ommo has a class-based, scalable animation system, that allows animations to be added to any component, and even Richtext.
The system is:
built around Modern CSS
accommodates accessibility
utilizes minimal JavaScript, only if needed, to trigger the animation
For instance, animations could be created using CSS animation-timeline, and allow non-supporting browsers to go without the animations until coming support is added. Or, a fallback animation triggered by Intersection Observer could also be set up, with minimal overhead and maintaining performance.
In terms of accessibility, the system honors a person's preference for reduced motion, and sets the animations in their completed state to provide the effect, minus the motion.
Secondly, animations on heading tags account for screen readers, making sure the content is read clearly.
Below are some basic examples of animations, all within Richtext, to give an idea of what the system can do. Note that the animations have exaggerated delays for the demo, and if you really want to dig into the details, I'd suggest:
view the page in a Chromium browser (Brave, Chrome, Edge)
view the page is Firefox or Safari
view the page with prefers reduced motion on
go through the page with a Screen Reader
That will allow you to see the differences between using animation-timeline and Intersection Observer, and what the content looks like for someone who prefers reduced motion.
h1/.text-1
h2/.text-2
h3/.text-3
h4/.text-4
h5/.text-5
h6/.text-6
unordered list
Development making people the priority.
Focused on performance, addressing all types of network connections.
Focused on accessibility, accounting for physical challenges.
Focused on the experience, from DX to UX.
Focused on a common sense approach.
ordered list
Development making people the priority.
paragraph
Devsigner HandoffA guide for bridging the gap between design and development, helping you to enhance collaboration and streamline your workflow.