ncinga-logo
v2.0.0
Published
Ncinga Logo Animation React Component
Readme
��#� �N�c�i�n�g�a� �L�o�g�o�
�
�
�
�A� �R�e�a�c�t� �c�o�m�p�o�n�e�n�t� �t�h�a�t� �d�i�s�p�l�a�y�s� �t�h�e� �a�n�i�m�a�t�e�d� �N�c�i�n�g�a� �l�o�g�o� �w�i�t�h� �t�r�a�n�s�p�a�r�e�n�t� �b�a�c�k�g�r�o�u�n�d� �s�u�p�p�o�r�t�.�
�
�
�
�#�#� �(' �F�e�a�t�u�r�e�s�
�
�
�
�-� �<ج� ���A�n�i�m�a�t�e�d� �G�I�F� �l�o�g�o��� �-� �S�m�o�o�t�h� �a�n�i�m�a�t�i�o�n� �p�l�a�y�b�a�c�k�
�
�-� �<ب� ���T�r�a�n�s�p�a�r�e�n�t� �b�a�c�k�g�r�o�u�n�d��� �-� �S�e�a�m�l�e�s�s�l�y� �b�l�e�n�d�s� �w�i�t�h� �a�n�y� �b�a�c�k�g�r�o�u�n�d�
�
�-� �=��� ���E�m�b�e�d�d�e�d� �a�s�s�e�t��� �-� �N�o� �e�x�t�e�r�n�a�l� �d�e�p�e�n�d�e�n�c�i�e�s� �o�r� �p�a�t�h� �i�s�s�u�e�s�
�
�-� �=�'� ���F�u�l�l�y� �c�u�s�t�o�m�i�z�a�b�l�e��� �-� �S�i�z�e�,� �s�t�y�l�i�n�g�,� �a�n�d� �b�e�h�a�v�i�o�r� �o�p�t�i�o�n�s�
�
�-� �=ت� ���T�y�p�e�S�c�r�i�p�t� �s�u�p�p�o�r�t��� �-� �F�u�l�l� �t�y�p�e� �d�e�f�i�n�i�t�i�o�n�s� �i�n�c�l�u�d�e�d�
�
�-� �=��� ���R�e�s�p�o�n�s�i�v�e��� �-� �W�o�r�k�s� �o�n� �a�l�l� �s�c�r�e�e�n� �s�i�z�e�s�
�
�
�
�#�#� �I�n�s�t�a�l�l�a�t�i�o�n�
�
�
�
����b�a�s�h�
�
�n�p�m� �i�n�s�t�a�l�l� �n�c�i�n�g�a�-�l�o�g�o�
�
����
�
�
�
�#�#� �U�s�a�g�e�
�
�
�
�#�#�#� �B�a�s�i�c� �U�s�a�g�e� �(�T�r�a�n�s�p�a�r�e�n�t� �B�a�c�k�g�r�o�u�n�d�)�
�
����t�s�x�
�
�i�m�p�o�r�t� �R�e�a�c�t� �f�r�o�m� �'�r�e�a�c�t�'�;�
�
�i�m�p�o�r�t� �{� �G�i�f�D�i�s�p�l�a�y� �}� �f�r�o�m� �'�n�c�i�n�g�a�-�l�o�g�o�'�;�
�
�
�
�f�u�n�c�t�i�o�n� �A�p�p�(�)� �{�
�
� � �r�e�t�u�r�n� �(�
�
� � � � �<�d�i�v� �s�t�y�l�e�=�{�{� �b�a�c�k�g�r�o�u�n�d�:� �'�l�i�n�e�a�r�-�g�r�a�d�i�e�n�t�(�4�5�d�e�g�,� �#�f�f�6�b�6�b�,� �#�4�e�c�d�c�4�)�'� �}�}�>�
�
� � � � � � �{�/�*� �L�o�g�o� �w�i�l�l� �b�l�e�n�d� �s�e�a�m�l�e�s�s�l�y� �w�i�t�h� �t�h�e� �g�r�a�d�i�e�n�t� �*�/�}�
�
� � � � � � �<�G�i�f�D�i�s�p�l�a�y� �
�
� � � � � � � � �w�i�d�t�h�=�{�2�0�0�}� �
�
� � � � � � � � �h�e�i�g�h�t�=�{�2�0�0�}� �
�
� � � � � � �/�>�
�
� � � � �<�/�d�i�v�>�
�
� � �)�;�
�
�}�
�
�
�
�e�x�p�o�r�t� �d�e�f�a�u�l�t� �A�p�p�;�
�
����
�
�
�
�#�#�#� �W�i�t�h� �S�h�a�d�o�w� �E�f�f�e�c�t�
�
����t�s�x�
�
�i�m�p�o�r�t� �R�e�a�c�t� �f�r�o�m� �'�r�e�a�c�t�'�;�
�
�i�m�p�o�r�t� �{� �G�i�f�D�i�s�p�l�a�y� �}� �f�r�o�m� �'�n�c�i�n�g�a�-�l�o�g�o�'�;�
�
�
�
�f�u�n�c�t�i�o�n� �A�p�p�(�)� �{�
�
� � �r�e�t�u�r�n� �(�
�
� � � � �<�d�i�v�>�
�
� � � � � � �<�G�i�f�D�i�s�p�l�a�y� �
�
� � � � � � � � �w�i�d�t�h�=�{�2�0�0�}� �
�
� � � � � � � � �h�e�i�g�h�t�=�{�2�0�0�}�
�
� � � � � � � � �s�h�o�w�S�h�a�d�o�w�=�{�t�r�u�e�}� �/�/� �A�d�d�s� �a� �s�u�b�t�l�e� �d�r�o�p� �s�h�a�d�o�w�
�
� � � � � � � � �c�l�a�s�s�N�a�m�e�=�"�m�y�-�l�o�g�o�"�
�
� � � � � � �/�>�
�
� � � � �<�/�d�i�v�>�
�
� � �)�;�
�
�}�
�
�
�
�e�x�p�o�r�t� �d�e�f�a�u�l�t� �A�p�p�;�
�
����
�
�
�
�#�#�#� �C�u�s�t�o�m� �S�t�y�l�i�n�g�
�
����t�s�x�
�
�i�m�p�o�r�t� �R�e�a�c�t� �f�r�o�m� �'�r�e�a�c�t�'�;�
�
�i�m�p�o�r�t� �{� �G�i�f�D�i�s�p�l�a�y� �}� �f�r�o�m� �'�n�c�i�n�g�a�-�l�o�g�o�'�;�
�
�
�
�f�u�n�c�t�i�o�n� �A�p�p�(�)� �{�
�
� � �r�e�t�u�r�n� �(�
�
� � � � �<�d�i�v�>�
�
� � � � � � �<�G�i�f�D�i�s�p�l�a�y� �
�
� � � � � � � � �w�i�d�t�h�=�{�3�0�0�}� �
�
� � � � � � � � �h�e�i�g�h�t�=�{�3�0�0�}�
�
� � � � � � � � �c�l�a�s�s�N�a�m�e�=�"�c�u�s�t�o�m�-�l�o�g�o�"�
�
� � � � � � � � �a�l�t�=�"�C�u�s�t�o�m� �N�c�i�n�g�a� �L�o�g�o�"�
�
� � � � � � �/�>�
�
� � � � �<�/�d�i�v�>�
�
� � �)�;�
�
�}�
�
����
�
�
�
�#�#� �P�r�o�p�s�
�
�
�
�|� �P�r�o�p� �|� �T�y�p�e� �|� �D�e�f�a�u�l�t� �|� �D�e�s�c�r�i�p�t�i�o�n� �|�
�
�|�-�-�-�-�-�-�|�-�-�-�-�-�-�|�-�-�-�-�-�-�-�-�-�|�-�-�-�-�-�-�-�-�-�-�-�-�-�|�
�
�|� ��c�l�a�s�s�N�a�m�e�� �|� ��s�t�r�i�n�g�� �|� ��'�'�� �|� �A�d�d�i�t�i�o�n�a�l� �C�S�S� �c�l�a�s�s�e�s� �|�
�
�|� ��w�i�d�t�h�� �|� ��n�u�m�b�e�r�� �|� ��u�n�d�e�f�i�n�e�d�� �|� �I�m�a�g�e� �w�i�d�t�h� �i�n� �p�i�x�e�l�s� �|�
�
�|� ��h�e�i�g�h�t�� �|� ��n�u�m�b�e�r�� �|� ��u�n�d�e�f�i�n�e�d�� �|� �I�m�a�g�e� �h�e�i�g�h�t� �i�n� �p�i�x�e�l�s� �|�
�
�|� ��a�l�t�� �|� ��s�t�r�i�n�g�� �|� ��'�N�c�i�n�g�a� �L�o�g�o� �A�n�i�m�a�t�i�o�n�'�� �|� �A�l�t� �t�e�x�t� �f�o�r� �a�c�c�e�s�s�i�b�i�l�i�t�y� �|�
�
�|� ��g�i�f�S�r�c�� �|� ��s�t�r�i�n�g�� �|� ��u�n�d�e�f�i�n�e�d�� �|� �C�u�s�t�o�m� �G�I�F� �U�R�L� �(�w�h�e�n� �u�s�e�E�m�b�e�d�d�e�d�=�f�a�l�s�e�)� �|�
�
�|� ��u�s�e�E�m�b�e�d�d�e�d�� �|� ��b�o�o�l�e�a�n�� �|� ��t�r�u�e�� �|� �U�s�e� �e�m�b�e�d�d�e�d� �G�I�F� �v�s� �e�x�t�e�r�n�a�l� �s�o�u�r�c�e� �|�
�
�|� ��s�h�o�w�S�h�a�d�o�w�� �|� ��b�o�o�l�e�a�n�� �|� ��f�a�l�s�e�� �|� �A�d�d� �d�r�o�p� �s�h�a�d�o�w� �e�f�f�e�c�t� �|�
�
�
�
�#�#� �<ب� �T�r�a�n�s�p�a�r�e�n�c�y� �S�u�p�p�o�r�t�
�
�
�
�T�h�e� �N�c�i�n�g�a� �l�o�g�o� �h�a�s� �a� ���t�r�a�n�s�p�a�r�e�n�t� �b�a�c�k�g�r�o�u�n�d��� �a�n�d� �w�i�l�l� �s�e�a�m�l�e�s�s�l�y� �b�l�e�n�d� �w�i�t�h� �a�n�y� �b�a�c�k�g�r�o�u�n�d�:�
�
�
�
�-� �' �G�r�a�d�i�e�n�t� �b�a�c�k�g�r�o�u�n�d�s�
�
�-� �' �P�a�t�t�e�r�n� �b�a�c�k�g�r�o�u�n�d�s� � �
�
�-� �' �I�m�a�g�e� �b�a�c�k�g�r�o�u�n�d�s�
�
�-� �' �D�a�r�k� �t�h�e�m�e�s�
�
�-� �' �L�i�g�h�t� �t�h�e�m�e�s�
�
�-� �' �C�o�m�p�l�e�x� �l�a�y�o�u�t�s�
�
�
�
�#�#� �=��� �R�e�s�p�o�n�s�i�v�e� �E�x�a�m�p�l�e�
�
�
�
����t�s�x�
�
�i�m�p�o�r�t� �R�e�a�c�t� �f�r�o�m� �'�r�e�a�c�t�'�;�
�
�i�m�p�o�r�t� �{� �G�i�f�D�i�s�p�l�a�y� �}� �f�r�o�m� �'�n�c�i�n�g�a�-�l�o�g�o�'�;�
�
�i�m�p�o�r�t� �'�.�/�A�p�p�.�c�s�s�'�;�
�
�
�
�f�u�n�c�t�i�o�n� �R�e�s�p�o�n�s�i�v�e�L�o�g�o�(�)� �{�
�
� � �r�e�t�u�r�n� �(�
�
� � � � �<�d�i�v� �c�l�a�s�s�N�a�m�e�=�"�l�o�g�o�-�c�o�n�t�a�i�n�e�r�"�>�
�
� � � � � � �<�G�i�f�D�i�s�p�l�a�y� �c�l�a�s�s�N�a�m�e�=�"�r�e�s�p�o�n�s�i�v�e�-�l�o�g�o�"� �/�>�
�
� � � � �<�/�d�i�v�>�
�
� � �)�;�
�
�}�
�
�
�
�/�/� �C�S�S�
�
�.�l�o�g�o�-�c�o�n�t�a�i�n�e�r� �{�
�
� � �d�i�s�p�l�a�y�:� �f�l�e�x�;�
�
� � �j�u�s�t�i�f�y�-�c�o�n�t�e�n�t�:� �c�e�n�t�e�r�;�
�
� � �b�a�c�k�g�r�o�u�n�d�:� �l�i�n�e�a�r�-�g�r�a�d�i�e�n�t�(�1�3�5�d�e�g�,� �#�6�6�7�e�e�a� �0�%�,� �#�7�6�4�b�a�2� �1�0�0�%�)�;�
�
� � �p�a�d�d�i�n�g�:� �2�r�e�m�;�
�
�}�
�
�
�
�.�r�e�s�p�o�n�s�i�v�e�-�l�o�g�o� �i�m�g� �{�
�
� � �w�i�d�t�h�:� �1�5�0�p�x�;�
�
� � �h�e�i�g�h�t�:� �1�5�0�p�x�;�
�
�}�
�
�
�
�@�m�e�d�i�a� �(�m�i�n�-�w�i�d�t�h�:� �7�6�8�p�x�)� �{�
�
� � �.�r�e�s�p�o�n�s�i�v�e�-�l�o�g�o� �i�m�g� �{�
�
� � � � �w�i�d�t�h�:� �2�0�0�p�x�;�
�
� � � � �h�e�i�g�h�t�:� �2�0�0�p�x�;�
�
� � �}�
�
�}�
�
�
�
�@�m�e�d�i�a� �(�m�i�n�-�w�i�d�t�h�:� �1�0�2�4�p�x�)� �{�
�
� � �.�r�e�s�p�o�n�s�i�v�e�-�l�o�g�o� �i�m�g� �{�
�
� � � � �w�i�d�t�h�:� �2�5�0�p�x�;�
�
� � � � �h�e�i�g�h�t�:� �2�5�0�p�x�;�
�
� � �}�
�
�}�
�
����
�
�
�
�#�#� �<د� �C�o�m�m�o�n� �U�s�e� �C�a�s�e�s�
�
�
�
�#�#�#� �H�e�a�d�e�r� �L�o�g�o�
�
����t�s�x�
�
�<�h�e�a�d�e�r� �s�t�y�l�e�=�{�{� �b�a�c�k�g�r�o�u�n�d�:� �'�#�2�c�3�e�5�0�'�,� �p�a�d�d�i�n�g�:� �'�1�r�e�m�'� �}�}�>�
�
� � �<�G�i�f�D�i�s�p�l�a�y� �w�i�d�t�h�=�{�1�2�0�}� �h�e�i�g�h�t�=�{�1�2�0�}� �/�>�
�
�<�/�h�e�a�d�e�r�>�
�
����
�
�
�
�#�#�#� �L�o�a�d�i�n�g� �S�c�r�e�e�n�
�
����t�s�x�
�
�<�d�i�v� �s�t�y�l�e�=�{�{� �
�
� � �b�a�c�k�g�r�o�u�n�d�:� �'�l�i�n�e�a�r�-�g�r�a�d�i�e�n�t�(�1�3�5�d�e�g�,� �#�6�6�7�e�e�a� �0�%�,� �#�7�6�4�b�a�2� �1�0�0�%�)�'�,�
�
� � �m�i�n�H�e�i�g�h�t�:� �'�1�0�0�v�h�'�,�
�
� � �d�i�s�p�l�a�y�:� �'�f�l�e�x�'�,�
�
� � �a�l�i�g�n�I�t�e�m�s�:� �'�c�e�n�t�e�r�'�,�
�
� � �j�u�s�t�i�f�y�C�o�n�t�e�n�t�:� �'�c�e�n�t�e�r�'�
�
�}�}�>�
�
� � �<�G�i�f�D�i�s�p�l�a�y� �w�i�d�t�h�=�{�2�0�0�}� �h�e�i�g�h�t�=�{�2�0�0�}� �/�>�
�
�<�/�d�i�v�>�
�
����
�
�
�
�#�#�#� �F�o�o�t�e�r� �B�r�a�n�d�i�n�g�
�
����t�s�x�
�
�<�f�o�o�t�e�r� �s�t�y�l�e�=�{�{� �b�a�c�k�g�r�o�u�n�d�:� �'�#�3�4�4�9�5�e�'�,� �c�o�l�o�r�:� �'�w�h�i�t�e�'� �}�}�>�
�
� � �<�G�i�f�D�i�s�p�l�a�y� �w�i�d�t�h�=�{�8�0�}� �h�e�i�g�h�t�=�{�8�0�}� �/�>�
�
�<�/�f�o�o�t�e�r�>�
�
����
�
�
�
�#�#� �L�i�c�e�n�s�e�
�
�
�
�I�S�C�
�
�
